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~