如何正确排列/定位这些按钮-CSS

时间：2019-04-17 05:02:40

标签： javascript jquery html css

我很困惑。我需要一些专业建议。

首先，第二个菜单，我想我应该使用填充将其放置在正确的位置？ 其次，即使导航栏看上去看上去很相似，但是当我向其中添加图像时，它们的分辨率较低，并且在激活时它也会停止变为蓝色。 另外，我非常确定将箭头添加为具有隐藏的溢出状态的临时形状是错误的，因为我希望整个事情在移动设备上都能响应。 这没有反应。实际上，如果我调整按钮的大小，则左上方的徽标会变小。 我只需要按正确的方向轻推一下，因为我现在已经进行了2-3天的操作，据说操作起来很容易。我应该重新开始吗？

.html{
	height: auto;
}
.uk-container
{
	display: flex;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height:auto;
	
}
.box-1
{
	width:100%;
	height:auto;
	margin: 0;
	padding: 0;
}
#card{
	margin: 0;
	padding: 0;
	height: 100%;
	width: auto;
	display:block;
}
.box-2
{
display: inline-block;
}
.uk-card-media-top
{
	padding: 70px 50px 70px 50px;
	margin: 0;
}
/*********************************************************************/

/***************************List Properties**************************/
ul
{
	position: relative;;
	padding: 0;	
}
ul li
{
	background-repeat: none;
	background-position-x:200px;
	border:0;
	line-height: 15px;
	margin:0%;
	padding: 9px;
	text-align: left;
	position: relative;
	width:100%;
	height:100%;
	list-style: none;
	margin-bottom: 5px;
	background-color: #eeeeee;
}
ul li.active:after 
{
	content: "";
	width: 0; 
	height: 0; 
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #0092ff;
	position:absolute;
	top: 20%;
	right:-15px;
  }
ul li a
{
	display:block;
	padding:10px 10px 10px 20px;
	text-decoration: uppercase;
	color:#555353;
	font-weight: bold;
	overflow: hidden;
}
ul li.active a
{
	background:#0092ff ;
	color:white ;
}
ul li.active:hover a{
	color:white;
}
ul li:hover a{
	text-decoration: none;
	color: rgb(149, 147, 147);
}
/*****************************************************/
/*******************Buttons***************************/
.contactdiv
{
	display: flex;
	position: center;
	justify-content: center;
}
#contact{
	background-color: #555353;
	color: #eeeeee;
	border-radius: 4px;
	margin: 4%;
}
.button {
  border: none;
  color: white;
  padding: 100px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
	cursor: pointer;
	border-radius: 5px;
}
.buttn{
    
    border:0;
	padding: 75px; /* this is how wide the image is plus any additional padding*/
	border-radius: 5px;
	cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
	 <meta charset="UTF-8" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
	<script src="js.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Gerege EasyPay</title>
</head>
<body>
	<div class= "uk-container">
		<div id="card" class="uk-card uk-card-horizontal uk-card-default uk-card-body">
				<div class="uk-card-media-top">
						<img src="1/gerege.png" alt="Something Went Wrong...">
					</div>
		<div class="box-1">
			</div>
			<div class="uk-width-auto">  <!--270 px height 170 px width-->
				<ul> <!--starting to understand why bootstrap,uikit was made-->
				
					<li class="active"><a href="#">НИЙТЛЭГ ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Торгууль, татвар, СӨХ...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/car.png) left no-repeat; background-size: 20% 50%">АВТО ТЭЭВЭР<br><span style="font-size:15px;">Торгууль, татвар...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/travel.png) left no-repeat; background-size: 20% 50%">АЯЛАЛ ЗУГААЛГА<br><span style="font-size:15px;">Хот хоорондын тээвэр, галт тэрэг...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/goverment.png) left no-repeat; background-size: 20% 50%">ТӨРИЙН ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Лавлагаа, тодорхойлолт...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/apartment.png) left no-repeat; background-size: 20% 50%">ОРОН СУУЦ<br><span style="font-size:15px;">Цахилгаан, дулаан, СӨХ...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/ticket.png) left no-repeat; background-size: 20% 50%">ҮЗВЭР ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Ticket.mn, Playtime...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/contact.png) left no-repeat; background-size: 20% 50%">ГАР УТАС<br><span style="font-size:15px;">Skytel,Unitel,G-Mobile...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/other.png) left no-repeat; background-size: 20% 50%">БУСАД<br><span style="font-size:15px;">Skymedia, Univision...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/contract.png) left no-repeat; background-size: 20% 50%">ХАМТРАН АЖИЛЛАХ<br><span style="font-size:15px;">Бид таны итгэлт түнш</span></a></li>
				
				</ul>
				<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
				<script type="text/javascript">
				$(document).on('click','ul li', function(){
				$(this).addClass('active').siblings().removeClass('active')
				$(this).addClass('active')
				})
				</script>
				<div class="contactdiv">
				<!-- This is a button toggling the modal with the default close button -->
				<button id="contact" class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-default">ХОЛБОО БАРИХ</button>

				<!-- This is the modal with the default close button -->
				<div id="modal-close-default" uk-modal>
					<div class="uk-modal-dialog uk-modal-body">
						<button class="uk-modal-close-default" type="button" uk-close></button>
						<h2 class="uk-modal-title">WHA</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>
				</div>
				</div>
				</div>
				</div>
			<div class="box-2">
				<button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button>
				<button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button>						
				<button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button>						
				<button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button>						
				<button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button>						
			</div>
		</div>
		</div>
	</div>
		</body>
</body>
</html>

应该看起来像这样： https://i.ibb.co/FzCNMjz/kiosk-home.jpg 看起来像这样： https://i.ibb.co/BTPRnR1/Fire-Shot-Capture-001-Gerege-Easy-Pay-127-0-0-1.png

本来应该在星期三转过这个（以及另外2件事），但现在通过了，我已经坚持了4天。

1 个答案:

答案 0 :(得分：0)

.html{
	height: auto;
}
.uk-container
{
	display: flex;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height:auto;
	
}
.box-1
{
	width:100%;
	height:auto;
	margin: 0;
	padding: 0;
}
#card{
	margin: 0;
	padding: 0;
	height: 100%;
	width: auto;
	display:block;
}
.box-2
{
display: inline-block;
}
.uk-card-media-top
{
	padding: 70px 50px 70px 50px;
	margin: 0;
}
/*********************************************************************/

/***************************List Properties**************************/
ul
{
	position: relative;;
	padding: 0;	
}
ul li
{
	background-repeat: none;
	background-position-x:200px;
	border:0;
	line-height: 15px;
	margin:0%;
	padding: 9px;
	text-align: left;
	position: relative;
	height:100%;
	list-style: none;
	margin-bottom: 5px;
	background-color: #eeeeee;
}
ul li.active:after 
{
	content: "";
	width: 0; 
	height: 0; 
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #0092ff;
	position:absolute;
	top: 20%;
	right:-15px;
  }
ul li a
{
	display:block;
	padding:10px 10px 10px 20px;
	text-decoration: uppercase;
	color:#555353;
	font-weight: bold;
	overflow: hidden;
}
ul li.active a
{
	background:#0092ff ;
	color:white ;
}
ul li.active:hover a{
	color:white;
}
ul li:hover a{
	text-decoration: none;
	color: rgb(149, 147, 147);
}
/*****************************************************/
/*******************Buttons***************************/
.contactdiv
{
	display: flex;
	position: center;
	justify-content: center;
}
#contact{
	background-color: #555353;
	color: #eeeeee;
	border-radius: 4px;
	margin: 4%;
}
.button {
  border: none;
  color: white;
  padding: 100px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
	cursor: pointer;
	border-radius: 5px;
}
.buttn{
    
    border:0;
	padding: 75px; /* this is how wide the image is plus any additional padding*/
	border-radius: 5px;
	cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
	 <meta charset="UTF-8" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
	<script src="js.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Gerege EasyPay</title>
</head>
<body>
	<div class= "uk-container">
		<div id="card" class="uk-card uk-card-horizontal uk-card-default uk-card-body">
				<div class="uk-card-media-top">
						<img src="1/gerege.png" alt="Something Went Wrong...">
					</div>
		<div class="box-1">
			</div>
			<div class="uk-width-auto">  <!--270 px height 170 px width-->
				<ul> <!--starting to understand why bootstrap,uikit was made-->
				
					<li class="active"><a href="#">НИЙТЛЭГ ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Торгууль, татвар, СӨХ...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/car.png) left no-repeat; background-size: 20% 50%">АВТО ТЭЭВЭР<br><span style="font-size:15px;">Торгууль, татвар...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/travel.png) left no-repeat; background-size: 20% 50%">АЯЛАЛ ЗУГААЛГА<br><span style="font-size:15px;">Хот хоорондын тээвэр, галт тэрэг...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/goverment.png) left no-repeat; background-size: 20% 50%">ТӨРИЙН ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Лавлагаа, тодорхойлолт...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/apartment.png) left no-repeat; background-size: 20% 50%">ОРОН СУУЦ<br><span style="font-size:15px;">Цахилгаан, дулаан, СӨХ...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/ticket.png) left no-repeat; background-size: 20% 50%">ҮЗВЭР ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Ticket.mn, Playtime...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/contact.png) left no-repeat; background-size: 20% 50%">ГАР УТАС<br><span style="font-size:15px;">Skytel,Unitel,G-Mobile...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/other.png) left no-repeat; background-size: 20% 50%">БУСАД<br><span style="font-size:15px;">Skymedia, Univision...</span></a></li>
					<li><a href="#" style=	"background:url(1/menu/old_con/contract.png) left no-repeat; background-size: 20% 50%">ХАМТРАН АЖИЛЛАХ<br><span style="font-size:15px;">Бид таны итгэлт түнш</span></a></li>
				
				</ul>
				<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
				<script type="text/javascript">
				$(document).on('click','ul li', function(){
				$(this).addClass('active').siblings().removeClass('active')
				$(this).addClass('active')
				})
				</script>
				<div class="contactdiv">
				<!-- This is a button toggling the modal with the default close button -->
				<button id="contact" class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-default">ХОЛБОО БАРИХ</button>

				<!-- This is the modal with the default close button -->
				<div id="modal-close-default" uk-modal>
					<div class="uk-modal-dialog uk-modal-body">
						<button class="uk-modal-close-default" type="button" uk-close></button>
						<h2 class="uk-modal-title">WHA</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>
				</div>
				</div>
				</div>
				</div>
			<div class="box-2">
				<button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button>
				<button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button>						
				<button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button>						
				<button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button>						
				<button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button>						
			</div>
		</div>
		</div>
	</div>
		</body>
</body>
</html>

相关问题
最新问题