這篇文章將為大家詳細講解有關怎樣利用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來制作一個簡單美觀的購物車界面”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
