Web全栈~16.购物车案例(页面样式完结)

一时失言乱红尘 2022-11-19 11:25 135阅读 0赞

# Web全栈~16.购物车案例(页面样式完结) #

## [上一期][Link 1] ##

### 前言 ###

关于购物车的案例在前两期主要是针对浮动和定位的一些练习，因此是画了导航栏和logo,搜索框。那么这一期就把购物车的页面给做完来。页面做完后就开始使用JavaScript添加动态样式了。

### [购物车第一期(导航栏)][Link 2] ###

![在这里插入图片描述][20210115165220659.png]

### [购物车第二期(Logo和搜索框)][Link 1] ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]

### 这一期把页面画完,下一期开始写JavaScript~ ###

## 标题 ##

一般购物车都会有一系列标题,还有配送位置。所以制作购物车内容之前先画标题

### 配送至 ###

将全部商品设置左浮动,配送至设置右浮动,并且设置好位置

<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;
    }

##### 当前样式 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 1]

## 菜单 ##

画完标题后该开始画菜单了~

### 初始布局 ###

菜单导航还是用列表来做,先画好骨架,然后再给每个选项挨个调整

.menu{ 
    	width: 1000px;
    	height: 50px;
    	background-color: #F1F1F1;
    	margin-top: 165px;
    }
    /*将li进行浮动*/
    .menu li{ 
    	/*左浮动*/
    	float: left;
    	/*设置行高*/
    	line-height: 50px;
    	/*字体大小*/
    	font-size: 12px;
    }

##### 当前样式 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 2]

我们看到,虽然设置了浮动,但是字体依然靠在一起,不够美观。这个时候我们就需要用到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;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 3]

## 商品详情展示 ##

<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;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 4]

### 设置浮动 ###

/*设置浮动*/
    .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;
    }

##### 这样就好了 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 5]

## 复制多个div就好了,内容都一样~ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 6]

## 结算 ##

<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;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 7]

### 这样就基本上做完了~当然还可以微调,反正意思差不多就这样 ###

下一期开始写JavaScript~

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112690998
[Link 2]: https://blog.csdn.net/qq_41424688/article/details/112660430
[20210115165220659.png]: /images/20221119/1d8b2ba4ea0349019221ef2b43a2e74f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]: /images/20221119/b86a8872c5c64d8bbe3655b3290cfb84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 1]: /images/20221119/9f976a803ff441a9b101a070a4cc9478.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 2]: /images/20221119/7912e0d2aee4410eab3a310f2cffa638.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 3]: /images/20221119/15ef7b389313438caf7a3d7b4da6f28d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 4]: /images/20221119/816c60fe83544372a08dec034cf2b80d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 5]: /images/20221119/ec568c6c5c394255b95e53a4f9beba80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 6]: /images/20221119/c145a076c5a3472da053277c2adcdfde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 7]: /images/20221119/3bb172905caf447388f50dd5178e0f0c.png