Web全栈~16.购物车案例(页面样式完结)
上一期
前言
关于购物车的案例在前两期主要是针对浮动和定位的一些练习，因此是画了导航栏和logo,搜索框。那么这一期就把购物车的页面给做完来。页面做完后就开始使用JavaScript添加动态样式了。
购物车第一期(导航栏)
购物车第二期(Logo和搜索框)
这一期把页面画完,下一期开始写JavaScript~
标题
一般购物车都会有一系列标题,还有配送位置。所以制作购物车内容之前先画标题
配送至
将全部商品设置左浮动,配送至设置右浮动,并且设置好位置
<!-- class这样写相当于同时给了两个CSS样式 -->
<div class="title warp">
<h3>全部商品</h3>
<div>
<span>配送至 : </span>
<select>
<option>朝阳区</option>
<option>顺义区</option>
<option>房山区</option>
<option>丰台区</option>
<option>大兴区</option>
</select>
</div>
</div>
.title{
margin-top: 130px;
}
/*使H3左浮动*/
.title H3{
float: left;
/*字体大小*/
font-size: 23px;
/*字体颜色*/
color: #c91623;
}
/*使div右浮动*/
.title div{
float: right;
font-size: 14px;
color: gray;
}
当前样式
菜单
画完标题后该开始画菜单了~
初始布局
菜单导航还是用列表来做,先画好骨架,然后再给每个选项挨个调整
<div class="menu warp">
<!-- 菜单导航 -->
<ul>
<li>
<input type="checkbox"/>全选
</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
.menu{
width: 1000px;
height: 50px;
background-color: #F1F1F1;
margin-top: 165px;
}
/*将li进行浮动*/
.menu li{
/*左浮动*/
float: left;
/*设置行高*/
line-height: 50px;
/*字体大小*/
font-size: 12px;
}
当前样式
我们看到,虽然设置了浮动,但是字体依然靠在一起,不够美观。这个时候我们就需要用到CSS的选择器了。
挨个调整
.menu li:nth-child(1){
width: 90px;
border-top: 3px;
}
.menu li:nth-child(2){
margin-left: 130px;
}
.menu li:nth-child(3){
margin-left: 430px;
}
.menu li:nth-child(4){
margin-left: 70px;
}
.menu li:nth-child(5){
margin-left: 80px;
}
.menu li:nth-child(6){
margin-left: 50px;
}
商品详情展示
<div class="info warp">
<ul>
<li><input type="checkbox"/></li>
<li><img src="./img/thinkingForJava.jpg" width="80px"/></li>
<li>Java编程思想</li>
<li>作者:埃克尔</li>
<li>￥95.00</li>
<li>
<button>+</button>
1
<button>-</button>
</li>
<li>￥95.00</li>
<li>
<a href="#">删除</a><br/>
</li>
</ul>
</div>
设置边框
.info{
height: 125px;
width: 1000px;
background-color: #fff4e8;
border: 1px solid gray;
margin-top: 30px;
}
设置浮动
/*设置浮动*/
.info li{
/*设置左边浮动*/
float: left;
/*下来一点*/
margin-top: 10px;
}
/*和前面的一样,设置Info下面第 n 个 li*/
.info li:nth-child(1){
margin-left: 23px;
}
.info li:nth-child(2){
margin-left: 15px;
}
.info li:nth-child(3){
width: 270px;
height: 20px;
margin-top: 50px;
}
.info li:nth-child(4){
margin-left: 45px;
margin-top: 50px;
}
.info li:nth-child(5){
margin-left: 130px;
margin-top: 50px;
}
.info li:nth-child(6){
margin-left: 50px;
margin-top: 50px;
}
.info li:nth-child(7){
margin-left: 50px;
margin-top: 50px;
}
.info li:nth-child(8){
margin-left: 30px;
margin-top: 50px;
}
.info li:nth-child(8) a{
color: gray;
}
这样就好了
复制多个div就好了,内容都一样~
结算
<!-- 结算 -->
<div class="balance warp">
<ul>
<li>
<input type="checkbox"/>全选
</li>
<li><a href="#">删除选中商品</a></li>
<li><a href="#">清除下柜商品</a></li>
<li>已选择</li>
<li>1</li>
<li>件商品</li>
<li>总价</li>
<li>￥95</li>
<li><a href="#">去结算</a></li>
</ul>
</div>
/*结算*/
.balance{
width: 1000px;
height: 50px;
border: 1px solid gray;
margin-top: 30px;
}
.balance li{
float: left;
margin-top: 15px;
}
.balance li:nth-child(2){
margin-left: 50px;
}
.balance li:nth-child(2) a{
color: gray;
}
.balance li:nth-child(3){
margin-left: 50px;
}
.balance li:nth-child(3) a{
color: gray;
}
.balance li:nth-child(4){
margin-left: 330px;
}
.balance li:nth-child(5){
margin-top: 5px;
font-size: 30px;
color: #c91623;
}
.balance li:nth-child(6){
margin-left: 5px;
}
.balance li:nth-child(7){
margin-left: 5px;
}
.balance li:nth-child(8){
margin-top: 5px;
font-size: 25px;
color: #c91623;
margin-left: 50px;
}
.balance li:nth-child(9){
margin-top: 10px;
margin-left: 20px;
}
.balance li:nth-child(9) a{
font-size: 25px;
color: #fff4e8;
border: 1px solid gray;
background-color: #c91623;
}
这样就基本上做完了~当然还可以微调,反正意思差不多就这样
下一期开始写JavaScript~