Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 国内精品线在线观看,韩国一级毛片,欧美一区二区三区在线 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          vscode 快速生成 html 代碼技巧
          
        
           
          
	
	
          
		
                        
          速生成 Html5 骨架
          在 Html 文件中輸入 html:5 按下回車鍵，可快速生成 HTML5 頁面模板：
          <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
          html:5
          父子關(guān)系快速構(gòu)建
          在 html 文件中輸入 div#id>ul.list>li.item*5 按下回車鍵，可快速生成父子關(guān)系的結(jié)構(gòu)：
          <div id="id">
  <ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>
          父子關(guān)系構(gòu)建
          多個相同標(biāo)簽
          重復(fù)元素: 使用 * 加上數(shù)字來創(chuàng)建多個相同的標(biāo)簽。例如，p*3 后按 Tab 會產(chǎn)生三個 <p> 段落標(biāo)簽。
          <p></p>
<p></p>
<p></p>
          類與 ID 的添加
          • 類: 在標(biāo)簽名后加 . 再加上類名。如 div.container 生成帶有類 container 的 <div> 。
          <div class="container"></div>
          • ID: 使用 # 加上 ID 名。如 div#main 生成 ID 為 main 的 <div> 。
          <div id="main"></div>
          屬性快速插入
          • 屬性賦值: 在標(biāo)簽后用方括號 [attr=value] 插入屬性。例如，a[href=https://example.com]。
          <a href="https://example.com"></a>
          組合使用
          • 復(fù)合示例: 結(jié)合上述技巧，可以創(chuàng)建復(fù)雜結(jié)構(gòu)。比如，nav>ul>li.item$*4>a[href=#]{Item $} 會生成一個導(dǎo)航欄，包含 4 個列表項，每個列表項都是一個鏈接，鏈接文本分別為 "Item 1" 到 "Item 4"，且每個鏈接的 href 屬性指向不同的 ID。
          <nav>
  <ul>
    <li class="item1"><a href="#">item 1</a></li>
    <li class="item2"><a href="#">item 2</a></li>
    <li class="item3"><a href="#">item 3</a></li>
    <li class="item4"><a href="#">item 4</a></li>
  </ul>
</nav>
          自定義 snippets（代碼片段）
          • 高級結(jié)構(gòu): 如果有特定的復(fù)雜結(jié)構(gòu)經(jīng)常使用，可以創(chuàng)建自定義的 Emmet snippets。轉(zhuǎn)到 "文件" > "首選項" > "用戶代碼片段"，選擇或創(chuàng)建 HTML 片段文件，定義自己的縮寫和展開結(jié)構(gòu)。
          Emmet 命令
          • Emmet: Wrap with Abbreviation: 選中現(xiàn)有代碼后，使用此命令（通過命令面板 Ctrl+Shift+P / Cmd+Shift+P 調(diào)出并搜索 “Wrap with Abbreviation” ），可以快速將選中內(nèi)容包裹在指定標(biāo)簽內(nèi)。
          們先分析一下整個網(wǎng)頁的結(jié)構(gòu)，整體內(nèi)容采用的是一個兩列布局，導(dǎo)航無限延長的背景，并且添加了分割符號
          素材：
          第一步： 去掉默認(rèn)的HTML間距。
          *{padding:0;margin:0;}
          Ps(我們可以在后期進(jìn)行修改,根據(jù)網(wǎng)頁中使用的HTML元素的個數(shù)如body,h1,div等)
          第二步：按效果圖頭部灰色背景但是無限延長
          HTML代碼：
          <div class="top">
           <div id="top"> 
           <p>讀書屋歡迎您！</p>
           </div>
          </div>
          兩個DIV嵌套，<div class="top">這個需要100%添加背景，而內(nèi)側(cè)<div id="top"> 實(shí)現(xiàn)居中布局就可以了
          .top{width:100%;background:#f5f5f5;height:35px;}
          解釋：寬度100%,添加背景顏色，設(shè)定高度，這樣在縮放網(wǎng)頁，始終可以看到灰色的背景
          #top {width:970px;margin:0 auto;}
          解釋：網(wǎng)頁寬度970像素，使id=top的div元素進(jìn)行居中margin:0 auto;
          #top p{font-size:13px;line-height:35px;}
          解釋：改變文字大小，就一行宣傳文字，通過行高（和高度一樣時間）實(shí)現(xiàn)垂直居中l(wèi)ine-height:35px;
          第三步：logo的實(shí)現(xiàn)，采用典型的以圖換字的方式，有利于SEO
          HTML代碼：
          <div id="header">
           <h1>
           <a href="#">css教程</a>
           </h1>
          </div>
          CSS編碼：
          #header h1 a{
           background:url(images/logo.png) no-repeat 0 50%;
           display:block;
           width:215px;height:60px;
           text-indent:-9999px;
           }
          大有學(xué)問#
          nav模塊布局思路
          分為上中下以及側(cè)邊欄四個模塊：nav-top、nav-center、nav-bottom、aside。
          nav-top模塊代碼
          index.css文件中添加CSS樣式
          .nav-top {
    height: 48px;
    border-bottom: 2px solid #b1191a;
}
.nav-top li {
    float: left;
    height: 48px;
    
    text-align: center;
    line-height: 48px;
    margin-left: 5px;
}
.nav-top li:first-of-type {
    width: 210px;
    background-color: #b11a1a;
    margin-left: 0;
}
.nav-top li a {
    font-size: 16px;
    color: #333;
    padding: 0 25px;
}
.nav-top li:first-of-type a {
    color: #fff;
}
.nav-top li:hover {
    background-color: #b11a1a;
}
.nav-top li:hover a,
.nav-center ul:first-child li a{
    color: #fff; 
}
          在index.html文件中添加布局代碼
          <nav>
<div class="nav-top">
  <ul class="bW">
    <li><a href="#">全部商品分類</a></li>
    <li><a href="#">服裝城</a></li>
    <li><a href="#">美妝館</a></li>
    <li><a href="#">傳智超市</a></li>
    <li><a href="#">全球購</a></li>
    <li><a href="#">閃購</a></li>
    <li><a href="#">團(tuán)購</a></li>
    <li><a href="#">拍賣</a></li>
    <li><a href="#">有趣</a></li>
  </ul>
</div>
</nav>
          nav-center模塊代碼
          nav-center模塊、nav-bottom模塊、aside模塊均存在同一個<div class=“bW”></div>中。
          index.css文件
          .nav-center ul:first-child {
    width: 210px;
    background-color: #c81822;
}
.nav-center ul:first-child li {
    height: 31px;
    padding: 0 10px;
    line-height: 31px;
    position: relative;
}
.nav-center ul:first-child li a {
    font-size: 14px;
}
.nav-center ul:first-child li a::after {
    font-family: 'icomoon';
    content: '\e902';
    color: #fff;
    position: absolute;
    right: 8px;
}
.nav-center ul:first-child li:hover {
    background-color: #f7f7f7;
}
.nav-center ul:first-child li:hover a,
ul:first-child li:hover a::after
 {
    color: #c81623;
}
.nav-center img {
    height: 455px;
    margin: 10px 10px 0 10px;
    vertical-align: middle;
}

div.fR {
    width: 250px;
    border-bottom: none;
    margin: 10px 0 0 -1px;
}
div.fR>div:first-child {
    height: 32px;
    border: 1px solid #e5e5e5;
    border-bottom: 1px dotted #eaeaea;
    line-height: 32px;
    padding: 0 15px;
}
div.fR>div:first-child h3 {
    display: inline-block;
    font-weight: 400;
    font-size: 14px;
    color: #333;
}
div.fR>div:first-child a::after {
    font-family: 'icomoon';
    content: '\e902';
    padding-left: 10px;
}
div.fR ul:nth-child(2) {
    padding: 5px 15px;
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
}
div.fR ul:nth-child(2) li {
    height: 24px;
    line-height: 24px;
}
div.fR ul:nth-child(2) span {
    font-weight: 600;
    margin-right: 5px;
}

div.fR ul:nth-child(3) {
    height: 210px;
    border: 1px solid #eaeaea;
    border-bottom: none;
    margin-bottom: 5px;
}
div.fR ul:nth-child(3) li {
    width: 41px;
    padding: 15px 10px 2px;
    text-align: center;
    float: left;
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}
div.fR ul:nth-child(3) li:nth-of-type(4),
div.fR ul:nth-child(3) li:nth-of-type(8),
div.fR ul:nth-child(3) li:nth-of-type(12) {
    margin-right: -2px;
    border-right: none;
}
div.fR ul:nth-child(3) div:first-of-type {
    width: 25px;
    height: 26px;
    margin: 0 auto;
    background-image: url(../images/sprite.png);
    margin-bottom: 10px;
}
div.fR ul:nth-child(3)>li:nth-of-type(1) div {
    background-position: -19px -16px;
}
div.fR ul:nth-child(3)>li:nth-of-type(2) div {
    background-position: -82px -17px;
}
div.fR ul:nth-child(3)>li:nth-of-type(3) div {
    background-position: -144px -17px;
}
div.fR ul:nth-child(3)>li:nth-of-type(4) div {
    background-position: -208px -16px;
}
div.fR ul:nth-child(3)>li:nth-of-type(5) div {
    background-position: -19px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(6) div {
    background-position: -82px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(7) div {
    background-position: -145px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(8) div {
    background-position: -209px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(9) div {
    background-position: -19px -158px;
}
div.fR ul:nth-child(3)>li:nth-of-type(10) div {
    background-position: -81px -158px;
}
div.fR ul:nth-child(3)>li:nth-of-type(11) div {
    background-position: -145px -158px;
}
div.fR ul:nth-child(3)>li:nth-of-type(12) div {
    background-position: -209px -158px;
}

div.fR>div:last-child {
    width: 250px;
    height: 75px;
    background-image: url(../images/sprite.png);
    background-position: 0 -219px;
}
          index.html
          <div class="bW">
<div class="nav-center clearF">
 <ul class="fL clearF">
  <li><a href="#">家用電器</a></li>
  <li><a href="#">手機(jī)、數(shù)碼、通信</a></li>
  <li><a href="#">電腦、辦公</a></li>
  <li><a href="#">家居、家具、家裝、廚具</a></li>
  <li><a href="#">男裝、女裝、童裝、內(nèi)衣</a></li>
  <li><a href="#">個護(hù)化妝、清潔用品、寵物</a></li>
  <li><a href="#">鞋靴、箱包、珠寶、奢侈品</a></li>
  <li><a href="#">運(yùn)動戶外、鐘表</a></li>
  <li><a href="#">汽車、汽車用品</a></li>
  <li><a href="#">母嬰、玩具樂器</a></li>
  <li><a href="#">食品、酒類、生鮮、特產(chǎn)</a></li>
  <li><a href="#">醫(yī)藥保健</a></li>
  <li><a href="#">圖書、音像、電子書</a></li>
  <li><a href="#">彩票、旅行、充值、票務(wù)</a></li>
  <li><a href="#">理財、眾籌、白條、保險</a></li>
 </ul>
 <img src="../images/gG.png" alt="">
 <div class="fR">
  <div>
   <h3>品優(yōu)購快報</h3>
    <a href="#" class="fR">更多</a>
  </div>
  <ul>
   <li><a href="#"><span>[特惠]</span>備戰(zhàn)開學(xué)季 全民半價購數(shù)碼</a></li>
   <li><a href="#"><span>[公告]</span>品優(yōu)穩(wěn)占家電網(wǎng)購六成份額</a></li>
   <li><a href="#"><span>[特惠]</span>百元中秋全品類禮券限量領(lǐng)</a></li>
   <li><a href="#"><span>[公告]</span>上品優(yōu)生鮮 享陽澄湖大閘蟹</a></li>
   <li><a href="#"><span>[特惠]</span>每日享折扣品優(yōu)品質(zhì)游</a></li>
  </ul>
  <ul>
   <li>
    <a href="#">
     <div></div>
     <p>話費(fèi)</p>
     </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>機(jī)票</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>電影票</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>游戲</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>彩票</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>加油卡</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>酒店</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>火車票</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>眾籌</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>理財</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>禮品卡</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>白條</p>
    </a>
   </li>
  </ul>
 <div></div>
</div>
</div>
          nav-bottom模塊代碼
          index.css文件
          .nav-bottom {
    margin: 11px 0 34px;
    height: 163px;
    position: relative;
}
.nav-bottom>div {
    width: 207px;
    height: 163px;
    background-color: #5c5351;
}
.nav-bottom>div::before {
    font-family: 'icomoon';
    content: '\e903';
    color: #fff;
    font-size: 62px;
    position: absolute;
    top: 32px;
    left: 68px;
}
.nav-bottom>div::after {
    content: '今日推薦';
    color: #fff;
    font-size: 18px;
    position: absolute;
    bottom: 35px;
    left: 63px;
}
.nav-bottom ul {
    padding: 9px 2px;
    background-color: #ebebeb;
}
.nav-bottom li {
    /* width: 207px; */
    height: 119px;
    float: left;
    padding: 13px 25px;
    border-right: 1px solid #dddddd;
}
.nav-bottom li:last-of-type {
    border-right: none;
}
.nav-bottom li h4 {
    color: #333;
}
.nav-bottom li p:first-of-type,
.nav-bottom li p:nth-of-type(3) {
    font-size: 14px;
    color: #fff;
    
}
.nav-bottom li p:first-of-type {
    background-color: #00a0e8;
    margin: 10px 25px 3px 0;
    padding: 0 3px;
    font-weight: 600;
}
.nav-bottom li:nth-child(2) p:nth-child(2) {
    background-color: #5fb200;
}
.nav-bottom li p:nth-of-type(3) {
    width: 60px;
    height: 18px;
    line-height: 18px;
    background-color: #5fb200;
    border-radius: 30px;
    text-align: center;
    margin-top: 22px;
}
.nav-bottom li:nth-child(3) p:nth-child(2),
.nav-bottom li:nth-child(3) p:nth-child(4) {
    background-color: red;
}
.nav-bottom li:nth-child(4) p:nth-child(2),
.nav-bottom li:nth-child(4) p:nth-child(4) {
    background-color: #0085fb;
}
          index.html文件
          <div class="bW">
<div class="nav-bottom clearF">
 <div class="fL"></div>
 <ul class="fR">
 <li>
 <div class="fL">
 <h4>優(yōu)質(zhì)好貨</h4>
 <p>滿300減100</p>
 <p>滿500減200</p>
 </div>
 <img src="../images/cFj.png" alt="">
 </li>
 <li>
 <div class="fL">
 <h4>品牌尾貨</h4>
 <p>滿300減100</p>
 <p>團(tuán)購低至9.9</p>
 <p>團(tuán)購</p>
 </div>
 <img src="../images/mJ.png" alt="">
 </li>
 <li>
 <div class="fL">
 <h4>時尚穿搭</h4>
 <p>低至3.6折</p>
 <p>暑期出游季</p>
 <p>閃購</p>
 </div>
 <img src="../images/shirt.png" alt="">
 </li>
 <li>
 <div class="fL">
 <h4>0點(diǎn)上新</h4>
 <p>全場包郵</p>
 <p>低至1折</p>
 <p>閃購</p>
 </div>
 <img src="../images/watch.png" alt="">
 </li>
 </ul>
 </div>
</div>
          側(cè)邊欄aside模塊
          index.css文件
          nav>div.bW:nth-child(2) {
    position: relative;
}
aside {
    width: 66px;
    position: absolute;
    top: 165px;
    left: -85px;
}
aside li {
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-bottom: 1px solid #eee;
}
aside li:last-child {
    border-bottom: none;
}
aside li:hover,
aside li:hover a {
    background-color: #c81623;
    color: #fff;
}
          index.html文件
          <aside>
 <ul>
  <li><a href="#">家用電器</a></li>
  <li><a href="#">手機(jī)通訊</a></li>
  <li><a href="#">電腦辦公</a></li>
  <li><a href="#">家居家具</a></li>
  <li><a href="#">生活用品</a></li>
  <li><a href="#">運(yùn)動戶外</a></li>
  <li><a href="#">汽車用品</a></li>
  <li><a href="#">食品酒類</a></li>
  <li><a href="#">醫(yī)藥保健</a></li>
  <li><a href="#">圖書音像</a></li>
  <li><a href="#">金融彩票</a></li>
 </ul>
</aside>
          aside——側(cè)邊欄模塊
          下部分內(nèi)容下篇文章更。拜拜~
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
精品一区二区三区中文字幕|
国产成人久久精品一区二区三区|
国产精品xxxx国产喷水亚洲国产精品无码久久一区
|
国模吧一区二区三区|
日韩AV片无码一区二区不卡|
精品国产日产一区二区三区|
一区二区三区视频观看|
亚洲日韩精品国产一区二区三区|
久久精品免费一区二区三区|
国产另类ts人妖一区二区三区|
国产在线观看一区二区三区四区|
久久青青草原一区二区|
bt7086福利一区国产|
亚洲一区二区三区四区在线观看|
亚洲色精品vr一区二区三区|
久久久久国产一区二区三区|
一区二区三区在线播放|
国产在线精品观看一区|
精品无码中出一区二区|
欧洲精品码一区二区三区免费看|
国产精品视频免费一区二区三区|
成人在线观看一区|
九九无码人妻一区二区三区|
精品人妻无码一区二区三区蜜桃一
|
亚洲AV无码一区二区乱子仑|
亚洲一区中文字幕|
亚洲综合一区二区三区四区五区|
中文字幕一区视频|
无码国产精品一区二区免费式直播|
香蕉久久一区二区不卡无毒影院
|
99偷拍视频精品一区二区|
色窝窝免费一区二区三区|
精品久久久久久无码中文字幕一区|
国产精品亚洲一区二区麻豆|
亚洲国产AV一区二区三区四区|
国产高清视频一区二区|
V一区无码内射国产|
国产一区二区免费视频|
91福利一区二区|
国模极品一区二区三区|
国产AⅤ精品一区二区三区久久|