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

时间:2021-1-18 作者:admin

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

上一期

前言

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

购物车第一期(导航栏)

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

购物车第二期(Logo和搜索框)


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

这一期把页面画完,下一期开始写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;
}
当前样式

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

菜单

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

初始布局

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

<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;
}
当前样式

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

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

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

商品详情展示

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

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

设置浮动

/*设置浮动*/
.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;
}
这样就好了

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

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

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

结算

		<!--	  结算		-->
<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;
}

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

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

       下一期开始写JavaScript~

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。