溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎樣利用html來制作一個簡單美觀的購物車界面

發(fā)布時間：2021-01-20 11:11:43 來源：億速云 閱讀：1036 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)怎樣利用html來制作一個簡單美觀的購物車界面，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

首先來展示一下購物車界面：

怎樣利用html來制作一個簡單美觀的購物車界面

這個頁面只是實現(xiàn)了其布局視圖，沒有使用js或者jquery相關(guān)語言，在博主看來是比較利于我們將其加入到自己的程序中的
以下是相關(guān)代碼：

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%>數(shù)量</td><td width=30%>操作</td></tr></table>
				</div>
				<div class="goods">
					<table><tr><td width=30%>旁氏洗發(fā)露</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%>旁氏洗發(fā)露</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>總數(shù)：</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 ;
}

關(guān)于“怎樣利用html來制作一個簡單美觀的購物車界面”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手