首先来展示一下购物车界面：
（学习视频分享：html视频教程）
这个页面只是实现了其布局视图，没有使用js或者jquery相关语言，在博主看来是比较利于我们将其加入到自己的程序中的
以下是相关代码：
index.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教程
以上是利用html来制作一个简单美观的购物车界面的详细内容。更多信息请关注PHP中文网其他相关文章！
