常用標籤

1.列表標籤
<!-- 有序列表: 組合標籤 雙標籤 塊級 ol li -->
    <ol>
        <li>我是列表項1</li>
        <li>我是列表項2</li>
        <li>我是列表項3</li>
        <li>我是列表項4</li>
        <li>我是列表項5</li>
    </ol>
    <!-- 無序列表: 組合標籤 雙標籤 塊級 ul li -->
 

    <ul>
        <li>我是列表項1</li>
        <li>我是列表項2</li>
        <li>我是列表項3</li>
        <li>我是列表項4</li>
        <li>我是列表項5</li>
    </ul>
    <!-- 自定義列表: 字典列表 雙標籤 塊級 dl dt dd -->
    <dl>
        <dt></dt>
        <dd
 
></dd>
        <dt></dt>
        <dd></dd>
    </dl>
2.圖片標籤
<!-- 圖片標籤 單標籤 比較特殊，可以設定尺寸，有行級標籤的特點。 -->
    <!-- src="" 指定引入的圖片的地址 -->
    <!-- alt="" 圖片內容的描述 必須的 描述的準確-->
    <img src="large/a.jpg" alt="圖片a"/>
    <img src="large/b.jpg" alt="圖片b"
 
/>
3.標題標籤
<!-- 標題標籤是 h1~h6 雙標籤 塊級標籤 -->
    <!-- h1 最好只出現一次 用於網頁的logo部分 -->
    <!-- h2 常用於二級標題 也就是子模組的標題部分 -->
    <!-- h4~h6不常用到 -->
    <h1>我是一級標題</h1>
    <h2>我是二級標題</h2>
    <h3>我是三級標題</h3>
    <h4>我是四級標題</h4>
    <h5>我是五級標題</h5>
    <h6>我是六級標題</h6>
4.段落標籤
<!-- 段落 p 雙標籤 塊級 -->
    <!-- p標籤不可以巢狀div 最好不巢狀其他的塊級標籤 -->
    <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
5.超連結標籤
<!-- 超連結 a 雙標籤 行級 -->
    <!-- href="" 指定標籤跳轉的地址 -->
    <!-- target="_blank | _self" 指定連結跳轉的方式 -->
    <!-- a標籤的四種狀態 -->
    <!-- 預設狀態:link-->
    <!-- 訪問過的狀態:visited -->
    <!-- 懸浮的狀態:hover -->
    <!-- 點選按住沒有鬆開的狀態:active -->
    <a href="http://www.163.com/" target="_blank">點我去百度</a>
    <a class="test" href="###">我是超級連結標籤</a>
    <a href="###">我是超級連結標籤</a>

浮動

<!-- 浮動佈局 float:left | right | none -->
    <!-- 清除浮動 clear:left | right | both -->
    <!-- clear的使用要點1：只能清除同級標籤的浮動影響 -->
    <!-- clear的使用要點2：只能清除既是同級又在它上面的標籤的浮動影響 -->

    <!-- <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div> -->

    <!-- 浮動會造成的問題 -->
    <!-- 1：父級元素沒有設定高度的情況下，會造成高度"塌陷" --> 

<!--    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
        <div class="content"></div>
    </div> -->

定位

1.關鍵字:position
  預設的情況下 是不定位
  文件流:  標籤在瀏覽器裡面按照特性 從上到下 從左到右排列的一個順序 
  脫離文件流: 讓元素在文件流裡面飛起來 不在佔用原來的空間 -->
  .redDiv{
    /*預設值: 不定位*/
    /*position: static;*/
    /*相對定位 相對於自身的位置去移動
        不脫離文件流 還佔用原來的位置
    */
    position: relative;
    /*只有定位的元素才能使用: left top bottom right*/
    /*left: 10px;
    top: 10px;*/
    background-color: red;
}
2.相對定位與絕對定位
.blueDiv{
    background-color: blue;
    /*絕對定位 相對於定位父級去定位
      如果父級只是作為定位父級使用 只需要使用relative即可*/
    /*position: relative;*/
}
.greenDiv{
    /*絕對定位 相對於帶有position屬性的父級定位
    如果父級沒有position屬性,就去找父級 直到html 
    如果html也沒有position就相對於視窗定位
     絕對定位脫離文件流*/
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 50px;
    height: 50px;
    background-color: green;
    /*對於定位的元素才可以使用 z-index
    z-index值越大,位置越靠前
    z-index可以是負值 負值的情況下比正常元素靠後
    z-index > 浮動 > 正常的元素*/
    z-index: 1;
}
3.固定定位
.ad{
    width: 100px;
    height: 380px;
    background-color: gray;
    color: white;
    font-size: 20px;
    /*固定定位 相對於視窗的位置始終不變
    left 0; 設定元素在距離視窗左邊為0的地方
    bottom 0; 設定元素在距離視窗下邊為0的地方
    會脫離文件流*/
    position: fixed;
    right: 20px;
    top: 50%;
    margin-top: -190px;
}