Use html to create a simple and beautiful shopping cart interface-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Use html to create a simple and beautiful shopping cart interface

王林

Jan 20, 2021 am 10:42 AM

htmlshopping cart

Use html to create a simple and beautiful shopping cart interface

First, let’s show the shopping cart interface:

(Learning video sharing: html video tutorial)

Use html to create a simple and beautiful shopping cart interface

This page only implements its layout view without using js or jquery related languages. In the opinion of bloggers, it is more convenient for us to add it to our own programs.
The following is the relevant 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>

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

Related recommendations: html tutorial

The above is the detailed content of Use html to create a simple and beautiful shopping cart interface. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:csdn. If there is any infringement, please contact admin@php.cn delete