집 > 기사 > 웹 프론트엔드 > HTML을 사용하여 간단하고 아름다운 장바구니 인터페이스 만들기

HTML을 사용하여 간단하고 아름다운 장바구니 인터페이스 만들기

王林앞으로: 2021-01-20 10:42:369570검색

먼저 장바구니 인터페이스를 보여드리겠습니다.

(학습 동영상 공유: html 동영상 튜토리얼)

HTML을 사용하여 간단하고 아름다운 장바구니 인터페이스 만들기

이 페이지는 블로그에서 js 또는 jquery 관련 언어를 사용하지 않고 레이아웃 보기만 구현합니다. 자체 프로그램에 추가하는 것이 더 편리한 것 같습니다. 관련 코드는 다음과 같습니다.

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

HTML을 사용하여 간단하고 아름다운 장바구니 인터페이스 만들기

관련 기사