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 60分钟日韩床大片免费观看,在线观看日本视频免费,24式性无遮挡免费视频 

      

        

          



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

          


          
	

          

 

          
  
          
    
          
      
          
        
          html+css寫出響應(yīng)式側(cè)邊導(dǎo)航欄
          
        
           
          
	
	
          
		
                        
          果圖
          html部分：先寫用div畫好六個(gè)導(dǎo)航的卡片，再利用css添加響應(yīng)效果
          <div class='card-holder'>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-01'>
                <span class='card-content'>item #1</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-02'>
                <span class='card-content'>long menu item #2</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-03'>
                <span class='card-content'>menu item #3</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-04'>
                <span class='card-content'>item #4</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-05'>
                <span class='card-content'>menu item #5</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-06'>
                <span class='card-content'>long menu item #1</span>
            </div>
        </a>
    </div>
</div>
          css部分：通過hover選擇器和transition屬性實(shí)現(xiàn)導(dǎo)航響應(yīng)式操作，即可實(shí)現(xiàn)如圖效果
          a:link,
a:hover,
a:visited,
a:active {
  color: #fff;
  text-decoration: none;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}
.card-holder {  
  position: fixed;
  width: 0px;
  overflow: visible;
}
.card-wrapper {
  display: inline-block;
  float: right;
  clear: both;
}
.card {
  position: relative;
  left: 32px;
  padding: 16px 32px 16px 64px;
  margin: 8px;  
  background: #fff;
  transition: all 0.3s ease-in-out 0.1s;
}
//添加導(dǎo)航的響應(yīng)式效果
.card:hover {
  position: relative;
  left: 100%;
  margin-left: -32px;
  transition: all 0.3s ease-in-out;
}
.card-content {
  display: inline-block;
  color: #fff;
  font-family: 'Droid Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}
.bg-01 { background: #539770; }
.bg-02 { background: #4B7D74; }
.bg-03 { background: #8DC2BC; }
.bg-04 { background: #EDD6B4; }
.bg-05 { background: #BE7467; }
.bg-06 { background: #E2AE63; }
          然后就能實(shí)現(xiàn)我們這個(gè)實(shí)用又美觀的側(cè)邊導(dǎo)航欄啦
          情提示：以下代碼是我們邀請(qǐng)的前端架構(gòu)師基于天貓門戶編寫的css相關(guān)代碼，現(xiàn)在免費(fèi)分享給大家，獲取的方式為：
          關(guān)注此頭條號(hào)“互聯(lián)網(wǎng)IT信息”——>私信發(fā)送 “天貓css” ，（注意：css全是小寫）即可得到源代碼的獲取方式。
          1. 此篇文章講解目錄：
          • 案例和由此案例重點(diǎn)講解的知識(shí)點(diǎn)介紹
          • 案例代碼實(shí)現(xiàn)
          • css三大特性知識(shí)點(diǎn)詳解
          2. 案例和相關(guān)知識(shí)點(diǎn)介紹
          此案例是頁面，效果如下：
          此頁面的技術(shù)實(shí)現(xiàn)解析：
          使用標(biāo)簽選擇器定義通用樣式，通過css層疊性和繼承性來讓通用標(biāo)簽的樣式被繼承到類選擇器上
          此案例中主要用到了，基于此，我們會(huì)系統(tǒng)的將如下知識(shí)點(diǎn)全部講解：
          css三大特性：層疊性、繼承性、優(yōu)先級(jí)
          3. 此案例的代碼實(shí)現(xiàn)
          第一步：使用塊級(jí)標(biāo)簽和無序列表編寫導(dǎo)航側(cè)邊欄的html
          第二步：通過標(biāo)簽選擇器定義ul li a的通用樣式
          第三步：定義外層div樣式
          第四步：通過類選擇器定義無序列表樣式，其中l(wèi)i和a標(biāo)簽的基本樣式繼承自第二步的標(biāo)簽選擇器
          4. 此案例的知識(shí)點(diǎn)詳解
          CSS三大特性：
          層疊性、繼承性、優(yōu)先級(jí)
          1）層疊性：
          1. 給一個(gè)標(biāo)簽設(shè)置的樣式發(fā)生沖突的時(shí)候即樣式的覆蓋
          2. 瀏覽器的渲染機(jī)制是從上到下的，當(dāng)有沖突的時(shí)候就采用最后的那個(gè)樣式
          例如：
          h2.grape {color: purple;}
          h2 {color: siver;}
          層疊性代碼實(shí)例：
          <!DOCTYPEhtml>
          <htmllang="en">
          <head>
          <metacharset="UTF-8">
          <title>Document</title>
          <styletype="text/css">
          .two{
          color: green;
          }
          .one{
          color: red;
          font-size: 30px;
          }
          .tree{
          color: yellow;
          font-size: 40px;
          }
          </style>
          </head>
          <body>
          <pclass="one two tree">
          一段文字
          </p>
          </body>
          </html>
          2）繼承性：繼承就是子標(biāo)簽繼承了上級(jí)標(biāo)簽的CSS樣式的屬性
          1，發(fā)生的前提是：標(biāo)簽之間屬于一種嵌套關(guān)系
          2，文字顏色可以之間繼承
          3，字體大小可以繼承
          4，字體可以繼承
          5，行高也可以實(shí)現(xiàn)繼承
          6， 與文字有關(guān)的屬性都可以，實(shí)現(xiàn)繼承
          特殊注意：
          a標(biāo)簽超鏈接不能實(shí)現(xiàn)字體顏色的繼承，字體大小可以繼承
          h1不可以繼承文字的大小，繼承過來還會(huì)做一個(gè)計(jì)算
          繼承性代碼實(shí)例：
          <!DOCTYPEhtml>
          <html>
          <head>
          <metacharset="UTF-8">
          <title></title>
          <style>
          div{
          color: red;
          font-size: 30px;
          }
          </style>
          </head>
          <body>
          <div>
          <ahref="">a</a>
          </div>
          </body>
          </html>
          3) 優(yōu)先級(jí)
          具體解釋如下：
          內(nèi)聯(lián)樣式最大，內(nèi)聯(lián)樣式的優(yōu)先級(jí)最高。
          ID選擇器的優(yōu)先級(jí)，僅次于內(nèi)聯(lián)樣式。
          類選擇器優(yōu)先級(jí)低于ID選擇器
          標(biāo)簽選擇器低于類選擇器。
          補(bǔ)充：
          權(quán)重相同時(shí)，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優(yōu)先級(jí)，或者說排在最后的樣式優(yōu)先級(jí)最大。
          所有都相同時(shí)，聲明靠后的優(yōu)先級(jí)大。
          CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級(jí)。也就是說不管權(quán)重如何以及樣式位置的遠(yuǎn)近，!important都具有最大優(yōu)先級(jí)。
          綜述：
          -行內(nèi)樣式 > 頁內(nèi)樣式 > 外部引用樣式 > 瀏覽器默認(rèn)樣式
          important > 內(nèi)聯(lián) > ID > 偽類|類 | 屬性選擇 > 標(biāo)簽 > 偽對(duì)象 > 通配符 > 繼承
          css優(yōu)先級(jí)代碼實(shí)例：
          <!DOCTYPE>
          <html>
          <head>
          <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
          <title>無標(biāo)題文檔</title>
          <style>
          *{ font-size:56px;}
          p{ font-size:32px; color:#60C;}
          .d{ color:#F0F;}
          #hei{ color:#96F;}
          </style>
          </head>
          <body>
          <h1>我是標(biāo)題</h1>
          <p>我是段落</p>
          <p>我是段落2</p>
          <pclass="d"id="hei"style="color:#FF0;">我是段落3</p>
          <ahref="#">我是超鏈接</a>
          <span>我是備胎標(biāo)簽</span>
          </body>
          </html>
          大家好接下來我們會(huì)邀請(qǐng)前端架構(gòu)師以連載的方式，并且結(jié)合阿里天貓商城的門戶，系統(tǒng)講解Css的專業(yè)知識(shí)，歡迎大家關(guān)注頭條號(hào)“互聯(lián)網(wǎng)IT信息”。
          果想開發(fā)一個(gè)網(wǎng)站，除了要精通后端開發(fā)語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語言，它包含有眾多的標(biāo)簽，我們可以通過這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個(gè)統(tǒng)一的文檔中，這就形成了我們可以看得見的網(wǎng)頁。那么，HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>
          一、文檔類型聲明。
          html5文檔類型聲明：<!doctype html>
          html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          二、html主標(biāo)簽。
          這個(gè)標(biāo)簽是html最外層的標(biāo)簽，所有其它的HTML標(biāo)簽都要放在這個(gè)標(biāo)簽的內(nèi)部。
          <html>
          <head></head>
          <body></body>
          </html>
          三、雙標(biāo)簽和單標(biāo)簽。
          在HTML標(biāo)簽中，有的標(biāo)簽是成雙成對(duì)的，如：<html></html>（如下圖）；而有的標(biāo)簽是單個(gè)的，如：<hr>橫線標(biāo)簽。
           
          四、head頭部標(biāo)簽。
          head頭部有以下幾種常用標(biāo)簽：
          meta：主要提供有關(guān)頁面的元信息。
          link：用來定義文檔與外部資源的關(guān)系，最常用的是調(diào)用CSS樣式文件。
          title：頁面標(biāo)題的標(biāo)簽。
          script：用來調(diào)用JS文件或JS代碼。當(dāng)然，script標(biāo)簽也可以在body主體中使用。
           
          五、body主體標(biāo)簽。
          1、塊級(jí)標(biāo)簽。
          塊級(jí)標(biāo)簽的特性是：獨(dú)自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒有設(shè)置寬與高時(shí)，默認(rèn)繼承父標(biāo)簽。例如：

          <div>div1</div>
          <div>div2</div>
          <style>
          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
          </style>

          前端頁面顯示的效果如下圖：
           
          常用的塊級(jí)標(biāo)簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
          2、內(nèi)聯(lián)標(biāo)簽。
          內(nèi)聯(lián)標(biāo)簽與塊級(jí)標(biāo)簽不同，它不能獨(dú)自占有一行，會(huì)與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示；內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

          <style>
          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
          </style>
          <span>span1</span>
          <span>span2</span>

          CSS樣式代碼跟塊級(jí)標(biāo)簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：
           
          常用的內(nèi)聯(lián)標(biāo)簽有：span、a、b、strong、i、em 。
          3、內(nèi)聯(lián)塊級(jí)標(biāo)簽。
          內(nèi)聯(lián)塊級(jí)標(biāo)簽，既有一些內(nèi)聯(lián)標(biāo)簽的特性，也有一些塊級(jí)標(biāo)簽的特點(diǎn)：它不能獨(dú)自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

          <style>
          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
          </style>
          <img src="w5.jpg" alt="">
          <img src="w5.jpg" alt="">

          CSS樣式代碼跟塊級(jí)標(biāo)簽的那個(gè)例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個(gè)圖片不能獨(dú)自占有一行，而是在同一行。如下圖：
           
          常用的內(nèi)聯(lián)塊級(jí)標(biāo)簽有：img、input、textarea。
          4、區(qū)域標(biāo)簽。
          所謂區(qū)域標(biāo)簽，就是主要用來劃分布局頁面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。
          常用的區(qū)域標(biāo)簽有：header（頭部）、footer（底部）、nav（導(dǎo)航）、aside（側(cè)邊欄）、section（主體）、article（獨(dú)立內(nèi)容）。
          5、表單標(biāo)簽。
          這個(gè)表單標(biāo)簽我們也是會(huì)經(jīng)常用到的，如：登錄網(wǎng)站的時(shí)候、提交數(shù)據(jù)的時(shí)候。如下圖的評(píng)論表單：
           
          ?表單常用的標(biāo)簽有：form、input、select、option、textarea 。
          以上就是我們開發(fā)網(wǎng)頁時(shí)，會(huì)常用到的HTML標(biāo)簽。當(dāng)然，HTML標(biāo)簽遠(yuǎn)不止這些，尤其是html5出來后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開發(fā)中很少用到，所以，這里就沒有做相應(yīng)的介紹。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
无码一区18禁3D|
无码人妻精品一区二区三区久久
|
一区二区三区在线播放|
中文字幕视频一区|
久久国产午夜精品一区二区三区
|
精品一区二区91|
美女视频一区二区|
国产日韩精品视频一区二区三区|
99精品高清视频一区二区|
国偷自产视频一区二区久|
亚洲国产精品一区二区三区在线观看|
人妻少妇AV无码一区二区|
亚洲av成人一区二区三区在线观看|
国产成人一区二区三区|
日韩一区二区视频在线观看|
日韩免费无码一区二区三区|
国产丝袜无码一区二区三区视频|
国产伦精品一区二区三区在线观看|
亚洲丰满熟女一区二区v|
亚洲午夜电影一区二区三区|
人妻体内射精一区二区三区|
久久人妻内射无码一区三区|
亚洲第一区香蕉_国产a|
一区二区在线观看视频|
中文字幕一区二区三区在线观看
|
国产高清一区二区三区视频|
国精产品999一区二区三区有限|
国产吧一区在线视频|
国产一区在线mmai|
无码av中文一区二区三区桃花岛
|
精品一区二区三区影院在线午夜|
另类ts人妖一区二区三区|
精品国产一区二区二三区在线观看|
伊人色综合网一区二区三区|
亚洲国产欧美日韩精品一区二区三区
|
丰满爆乳一区二区三区|
亚洲伦理一区二区|
亚洲av无码一区二区三区在线播放|
欧美日韩综合一区二区三区|
国产一区韩国女主播|
精品国产毛片一区二区无码|