javascript - 如何正确地网格化/定位这些按钮 - CSS

标签 javascript jquery html css

我被难住了。我需要一些专业建议。

首先，第二个菜单，我想我应该使用填充将其放在正确的位置？ 其次，即使我的导航栏在视觉上看起来很相似，但当我向其中添加图像时，它们是低分辨率的，并且在激活时它不再变成蓝色。 另外，我很确定将箭头添加为 overflow hidden 的即兴形状是错误的，因为我希望整个事物在移动设备上都能响应。 这不是响应式的。事实上，如果我调整按钮的大小，左上角的标志会变小。 我只需要在正确的方向上轻推一下，因为我已经做了 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 天。

最佳答案 

.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>

关于javascript - 如何正确地网格化/定位这些按钮 - CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55720251/

上一篇：css - 如何使我的菜单在同一水平线上？

下一篇：css - 如何布局要堆叠在移动设备上的按钮？

相关文章：

javascript - 在 React App 中阻止导航

javascript - 动态地将类应用于无法执行单击事件的按钮

javascript - 如何使用 JS 获取完整的 HTML 标签并放入文本区域

html - 如何显示openweathermap天气图标

javascript - 无法使用javascript获取值(value)

javascript - jQuery 错误 "Uncaught TypeError: Cannot read property ' 未定义的应用'

javascript - 从重定向获取链接

jquery - HTML:更改图像onclick？

javascript - 从 Html 表单 Meteor javascript 获取 Var 时出错

java - 在 Java 中嵌入 Web 浏览器/HTML 引擎

©2024 IT工具网  联系我们