本文展示了电商购物车的网页布局设计，包括头部导航、商品列表和操作项。使用CSS进行样式设计，定义了不同区域的宽度、浮动方式以及颜色、线条等样式。页面结构清晰，包含商品图片、名称、价格、数量、小计和操作选项，如删除和移动到关注列表。
1、效果图：
2、style设计：
<style>
.header{
width: 80%;
margin: auto;
height: 40px;
line-height: 40px;
}
.left{
width: 300px;
float: left;
}
.right{
float: right;
width: 300px;
}
.header a{
text-decoration: none;
color: #777;
}
.container{
width: 80%;
margin: auto;
}
.row_1{
border: solid 1px #111;
background-color: #ccc;
line-height: 40px;
text-align: center;
height: 40px;
}
.col_1{ width: 100px;float: left}
.col_2{width: 500px;float: left}
.col_3{width: 200px;float: left}
.col_4{width: 100px;float: left}
.col_5{width: 100px;float: left}
.col_6{width: 200px;float: left}
.rows{margin-top: 20px;height: 30px}
.rows_shops{height: 120px;border: solid 1px #111}
.ss a{
text-decoration: none;
display: block;
line-height: 30px;
}
</style>
3、body结构：
<body>
<div class="header">
<div class="left">
<a href="#">优选购物欢迎你！</a>
<a href="#" style="color: blue">登录！免费注册</a>
</div>
<div class="right">
<a href="#">我的订单</a>
<span>|</span>
<a href="
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
