目錄

第三方字型樣式

欄位間分割線的樣式實現

搭建網站前的reset操作

滑鼠懸浮出現浮框

- 購物車部分例子

- 重點步驟總結

塊與塊之間的分割線

塊顏色的根據位置不同而不同

懸浮上移+陰影

---

第三方字型樣式

fontawesome - 字型庫

iconfont - 字型庫

在瀏覽器中按f12開啟【開發人員工具】，找到【console(控制檯)】
輸入以下程式碼，再按回車，稍等片刻即可把全部圖示加入購物車
var ll = document.getElementsByClassName('icon-gouwuche1'); for (var i=0; i<ll.length;i++){ ll[i].click(); }
 

欄位間分割線的樣式實現

<div class="topbar-nav">
	<a href="javascript:void(0)">小米商城</a>
	<span>|</span>
	<a href="javascript:void(0)">MIUI</a>
	<span>|</span>
	<a href="javascript:void(0)">IoT</a>
	<span>|</span>
	<a href="javascript:void(0)">雲服務</a>
	<span>|</span>
	<a href="javascript:void(0)">金融</a>
	<span>|</span>
	<a href="javascript:void(0)">有品</a>
	<span>|</span>
	<a href="javascript:void(0)">小愛開放平臺</a>
	<span>|</span>
	<a href="javascript:void(0)">政企服務</a>
        <span>|</span>
	<a href="javascript:void(0)">Select Region</a>
</div>
 

搭建網站前的reset操作

html,body,p,h1,h2,h3,h4,h5,h6,form{
	margin: 0;
	padding: 0;
}

a{
	color: #333;
	/*清除下劃線*/
	text-decoration: none;

}

img{
	/*用於配合i標籤使用*/
	/*清除圖片樣式，多個img同行顯示，方式為居中顯示*/
	border: none;
	vertical-align: middle;
}
ul{
	/*清除列表的樣式*/
	list-style: none;
	margin: 0;
	padding: 0;
}

i{
	/*i標籤作為字型圖片使用，使用em標籤實現斜體*/
	font-style: normal;
	vertical-align: middle;
}

/*對錶單標籤進行reset操作*/
textarea{
	/*不可手動調節文字視窗大小*/
	resize: none;
}
select,input,textarea,button{
	/*清除外框，用於自定義的前置操作*/
	outline: none;
	vertical-align: middle;
}
button{
	/*清除按鈕樣式，用於按鈕樣式自定義的前置操作*/
	-webkit-appearance:none;
	padding: 0;
	margin: 0;
}
 

滑鼠懸浮出現浮框

- 購物車部分例子

<!--購物車結構-->
<div class="topbar-cart">
    <a href="javascript:void(0)">
        <i class="fa fa-shopping-cart"></i>
            購物車
        <span>(0)</span>
    </a>
    <div class="topbar-cart-menu">
        <div class="topbar-cart-txt">
            <span>購物車中還沒有商品，趕緊選購吧！</span>
        </div>
    </div>
</div>

/*wrap下 右側購物車cart*/
.topbar-cart{
	width: 120px;
	float: right;
	font: normal 12px/40px 'Arial';
	background-color: #424242;
	/*輔助 topbar-cart-menu佈局*/
	position: relative;

}

.topbar-cart:hover{
	background-color: #fff;
}

.topbar-cart a{
	display: block;
	line-height: 40px;
	color: #b0b0b0;
}

.topbar-cart:hover a{
	color: #ff6700;

}
.topbar-cart i{
	font-size: 20px;
	margin: 0 5px 0 20px;
}

/*控制位置層*/
.topbar-cart-menu{
	width: 316px;

	/*相對於cart進行佈局*/
	position: absolute;
	top: 40px;
	right: 0;
    
    /*顯示的等級*/
    z-index: 10;
}

/*控制高度（過渡效果）層*/
.topbar-cart-txt{
	/*height: 100px；*/
	background-color:#fff;
	text-align: center;
	line-height: 100px;
	box-shadow: 0 3px 5px -3px rgba(0,0,0,0.7);

	/*沒有高度，作為清浮動操作*/
	/*存在高度，overflow只隱藏超出高度*/
	height: 0;
	overflow: hidden;

	/*設定過渡動畫*/
	transition: .1s;
}

.topbar-cart:hover .topbar-cart-txt{
	height: 100px;
}

- 重點步驟總結

1. 祖盒和懸浮出現部分盒使用定位佈局
2. 祖盒position（佈局）為 relative 輔助 隱藏部分的 absolute 佈局
3. 設定隱藏部分的樣式
4. 清浮動隱藏需要隱藏部分 
       height: 0;
       overflow: hidden;
5. 可以適當設定過渡動畫 transition: .1s;

塊與塊之間的分割線

/*所屬塊的右邊框顯示樣式，並排除最後一個塊顯示*/
.header-item-child-wrap .goods:not(:last-child) img {
    border-right: 1px solid #ddd;
}

塊顏色的根據位置不同而不同

/*位置偽類，偶數位*/
.nav-list-details-li:nth-child(2n) {
	background-color: #eee;
}
/*位置偽類，單數位*/
.nav-list-details-li:nth-child(2n - 1) {
	background-color: #ddd;
}

懸浮上移+陰影

.ad-list a:hover{
    /*上移，變大*/
	transform: translateY(-1px) scale(1.02);
    /*陰影*/
	box-shadow: 0 10px 30px -5px rgba(0,0,0,0.7)
}