<div class="seckill-nav"><ul><li class="active"><em>18:00 </em> <spent>即將開始 距開始 01:25:15</spent></li><!--em標簽用做強調,spen標簽用做不強調--><li><em>20:00</em> <spen>即將開始</spen></li><li><em>22:00</em> <spen>即將開始</spen></li><li><em>00:00</em> <spen>明天開始</spen> </li><li><em>08:00</em> <spen>明天開始</spen></li></ul></div>

1.把“小米閃購”圖片放到——>img里面：

D:\cc\img

2.把圖片顯示出來：

?

<div class="topbar-cart"><a href=""><i class="iconfont">&#xe7b2;</i> 購物車(0)<span></span></a></div><div class="topbar-info clearfix"><a href="">登錄</a><span>|</span><a href="">注冊</a><span>|</span><a href="" class="sep">消息通知</a></div></div></div><div class="header"><!--居中 --><div class="container"><div class="header-logo"><a href="#" class="lr">小米官網</a></div><!-- 頭部下面 的導航 --><div class="header-nav"><!--clearfix 清浮動--><ul class="nav-list clearfix"><li class="nav-category"><a href="">全部商品分類</a></li><li class="nav-item"><a href="">小米手機</a></li><li class="nav-item"><a href="">紅米</a></li><li class="nav-item"><a href="">電視</a></li><li class="nav-item"><a href="">筆記本</a></li><li class="nav-item"><a href="">空調</a></li><li class="nav-item"><a href="">新品</a></li><li class="nav-item"><a href="">路由器</a></li><li class="nav-item"><a href="">智能硬件</a></li><li class="nav-item"><a href="">服務</a></li><li class="nav-item"><a href="">社區</a></li></ul></div><div class="header-search"><from action="" class="search-form"><input type="search" name="keyword" class="search-text" ><input type="submit" value="&#xe632;" class="search-btn iconfont"></from></div> </div></div><div class="seckill"><div class="seckill-head"></div><div class="seckill-nav"></div></div> /*seckill主體和選項卡*/ .seckill {background-color: #f5f5f5; } /*圖片當成背景圖*/ .seckill-head {margin-top: 19px;height: 170px;background: url(../img/seckill-head.jpg) no-repeat 50% 0; }

在瀏覽器中顯示效果：

3.做小米選項卡：

3.1.用ul和li把選項卡內容包裹起來：

編輯(E)——>選擇 最下面的"Emmet"——>選擇" 輸入縮寫包圍個別行"——>輸入ul>li* 回車；

1 shift+Tab鍵（前移）

?

3.2.加樣式是鼠標點擊變紅：

<div class="seckill"><div class="seckill-head"></div><!--container控制所有內容居中--><div class="container"><div class="seckill-nav"><ul><li>18:00 即將開始</li><li>距開始 01:25:15</li><li>20:00 即將開始</li><li>22:00 即將開始</li><li>00:00 明天開始</li><li>08:00 明天開始</li></ul></div><div></div></div></div>

在瀏覽器中顯示效果：?

?3.2.1.

/*seckill主體和選項卡*/ .seckill {background-color: #f5f5f5; } /*圖片當成背景圖*/ .seckill-head {margin-top: 19px;height: 170px;background: url(../img/seckill-head.jpg) no-repeat 50% 0; } .seckill-nav ul {height: 68px;background: #414141; } .seckill-nav li {display: block;float: left;color: #fff;width: 20%;height: 68%;line-height: 68px;text-align: center;/*鼠標移動上去變小手*/cursor: pointer; }

在瀏覽器中顯示效果：?

****bug

.seckill-nav li {display: block;float: left;color: #fff;width: 20%;height: 68%;line-height: 68px;text-align: center;/*鼠標移動上去變小手*/cursor: pointer; } .seckill-nav .active{background-color: #f1393a; }

在瀏覽器中顯示效果：?

.seckill-nav li {display: block;float: left;color: #fff;width: 20%;******height: 68px;****line-height: 68px;text-align: center;/*鼠標移動上去變小手*/cursor: pointer; } .seckill-nav .active{background-color: #f1393a; }

在瀏覽器中顯示效果：?

3.3.上移和文字的樣式：

3.3.1上移：

*seckill主體和選項卡*/ .seckill {background-color: #f5f5f5; } /*圖片當成背景圖*/ .seckill-head {margin-top: 19px;height: 170px;background: url(../img/seckill-head.jpg) no-repeat 50% 0; } /*整體上移*/ .seckill-nav {margin: -68px 0 22px; }

在瀏覽器中顯示效果：?

3.3.2.修改文字樣式：

<ul><!--active鼠標點那里,那里就可以active--><li class="active"><em>18:00</em><span>即將開始距開始01:25:15</span></li><!--em標簽用做強調--><li><em>20:00</em> <span>即將開始</span></li><li><em>22:00</em> <span>即將開始</span></li><li><em>00:00</em> <span>明天開始</span></li><li><em>08:00</em> <span>明天開始</span></li></ul> .seckill-nav li em {display: inline-block;/*去掉斜體*/font-style: normal;font-size: 23px;/*跟字體一樣大小*/line-height: 1;/*垂直居中*/vertical-align: middle; } .seckill-nav .active{background-color: #f1393a; }

在瀏覽器中顯示效果：?

?3.3.3.

.seckill-nav li em {display: inline-block;/*去掉斜體*/font-style: normal;font-size: 23px;/*跟字體一樣大小*/line-height: 1;/*垂直居中*/vertical-align: middle; } .seckill-nav li span {display: inline-block;text-align: left;line-height: 1;vertical-align: middle;font-size: 14px; } .seckill-nav .active{background-color: #f1393a; }

在瀏覽器中顯示效果：?

?

.seckill-nav li em {display: inline-block;/*去掉斜體*/margin-left: 30px;font-style: normal;font-size: 23px;/*跟字體一樣大小*/line-height: 1;/*垂直居中*/vertical-align: middle; } .seckill-nav li span {display: inline-block;margin-left: 15px;text-align: left;line-height: 1;vertical-align: middle;font-size: 14px; }

在瀏覽器中顯示效果：

3.3.4.最終調整：

<ul><!--active鼠標點那里,那里就可以active--><li class="active"><em>18:00</em><span><em>即將開始<br>距開始01:25:15</em></span></li><!--em標簽用做強調--><li><em>20:00</em><span>即將開始</span></li><li><em>22:00</em><span>即將開始</span></li><li><em>00:00</em><span>明天開始</span></li><li><em>08:00</em><span>明天開始</span></li></ul> .seckill-nav .active{background-color: #f1393a; } .seckill-nav ul li span em {display: inline-block;font-size: 14px;margin-left: 0;font-style: normal;/*字體對齊方式*/text-align: left;line-height: 20px; }

在瀏覽器中顯示效果：?

總結

以上是生活随笔為你收集整理的xx闪购—主体选项卡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。