recherche

Maison >interface Web >tutoriel HTML >Utilisez HTML pour créer une interface de panier simple et esthétique

Utilisez HTML pour créer une interface de panier simple et esthétique

王林
王林avant
2021-01-20 10:42:369619parcourir

Utilisez HTML pour créer une interface de panier simple et esthétique

Tout d'abord, montrons l'interface du panier :

(Partage de vidéos d'apprentissage : tutoriel vidéo html)

Utilisez HTML pour créer une interface de panier simple et esthétique

Cette page implémente uniquement sa vue mise en page et n'utilise pas de langages liés à js ou jquery. De l'avis des blogueurs, il est plus pratique pour nous de l'ajouter à nos propres programmes
Ce qui suit est le. code pertinent :

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>

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 ;
}

Recommandations associées : tutoriel html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment ajouter des styles CSS au HTMLArticle suivant：Comment ajouter des styles CSS au HTML

Articles Liés

Voir plus