Verwenden Sie HTML, um eine einfache und schöne Warenkorboberfläche zu erstellen-HTML-Tutorial-php.cn

Verwenden Sie HTML, um eine einfache und schöne Warenkorboberfläche zu erstellen

王林

Freigeben： 2021-01-20 10:42:36

nach vorne

9620 Leute haben es durchsucht

Verwenden Sie HTML, um eine einfache und schöne Warenkorboberfläche zu erstellen

Zuerst zeigen wir die Warenkorboberfläche:

(Lernvideo-Sharing: HTML-Video-Tutorial)

Verwenden Sie HTML, um eine einfache und schöne Warenkorboberfläche zu erstellen

Diese Seite implementiert nur ihre Layoutansicht, ohne js oder jquery-bezogene Sprachen im Blog zu verwenden Es scheint für uns bequemer zu sein, es zu unserem eigenen Programm hinzuzufügen. Das Folgende ist der relevante Code:

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="css/car.css" rel="stylesheet" type="text/css">
		<title></title>
	</head>
	<body>
		<div class="car">
			
				<div class="good">
					<table><tr><td width=30%>商品名称</td><td width=20%>单价</td><td width=20%>数量</td><td width=30%>操作</td></tr></table>
				</div>
				<div class="goods">
					<table><tr><td width=30%>旁氏洗发露</td><td width=20%>99</td><td width=20%>1</td><td width=30%><a><button class="btn1">删除</button></a></td></tr></table>
				</div>
				<div class="goods">
					<table><tr><td width=30%>旁氏洗发露</td><td width=20%>99</td><td width=20%>1</td><td width=30%><a><button class="btn1">删除</button></a></td></tr></table>
				</div>
				<div class="goods2">
					<table><tr><td width=560></td><td width=20%>小计：</td><td>总数：</td></tr></table>
				</div>
				<div class="goods1">
					<table><tr><td width=50%><button class="btn2">确认购买</button></td><td><button class="btn3">全部清空</button></td></tr></table>
				</div>
			
		</div>
	</body>
</html>

Nach dem Login kopieren

car.css

body{
	overflow: hidden;
	text-align: center;
	
}
.car{
	width:60%;
	border: 1px solid #F88020;
	border-radius: 18px;
	margin-left: 300px;
	
	
}
.car .good{
	background-color: #F88020;
	height:55px;
	font-size: 22px;
	color:white;
	line-height: 55px;
	font-weight: 200;
	border-radius: 18px 18px 0 0;
	margin-bottom: 20px;
	
}
.car .good table{
	width:100%;
}
.car .goods{
	height:45px;
	line-height: 45px;
	font-size: 20px;
	font-weight: 200;
}
.car .goods table{
	width:100%;
}
.car .goods table .btn1{
	width: 70px;
	height:28px;
	border: 2px solid #46B3E6;
	background-color: white;
	color: #46B3E6;
	border-radius: 4px;
	font-weight: 600;
}
.car .goods table button:hover{
	background-color: #46B3E6;
	color: white;
}
.car .goods1{
	margin-top: 10px;
	
	background-color: ;
	height:50px;
	font-size: 19px;
	color:white;
	line-height: 50px;
	font-weight: 200;
	border-radius:0 0 10px 10px ;
}
.car .goods2{
	border-top: 1px solid #F88020;
	margin-top: 10px;
	height:50px;
	font-size: 19px;
	line-height: 50px;
	font-weight: 200;
	border-radius:0 0 10px 10px ;
}
.car .goods1 table{
	
	width:100%;
}
.car .goods1 .btn2{
	width: 70px;
	height:28px;
	border: 2px solid #21BF73;
	background-color: white;
	color: #21BF73;
	border-radius: 4px;
	font-weight: 600;
}
.car .goods1 .btn2:hover{
	color:white;
	background-color: #21BF73;
}
.car .goods1 .btn3{
	width: 80px;
	height:30px;
	border: 2px solid #FF0000;
	background-color: white;
	color: #FF0000;
	border-radius: 4px;
	font-weight: 600;
}
.car .goods1 .btn3:hover{
	color:white;
	background-color:#FF0000 ;
}

Nach dem Login kopieren

Verwandte Empfehlungen:

html-Tutorial

Das obige ist der detaillierte Inhalt vonVerwenden Sie HTML, um eine einfache und schöne Warenkorboberfläche zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!