html基礎知識點

最後更新：2017-05-21 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：span 閱讀知識點 list height html ext lin center

語義化：根據內容的結構化選擇合適的標籤，便於開發人員閱讀和寫出優雅的代碼的同時讓瀏覽器的爬蟲和機器很好的解析。
標準文檔流：在沒有css的幹預下，區塊層級元素獨佔一行可以設定寬高，行內元素並排顯示寬高。
浮動：子級浮動會導致父級塌陷高度，行內元素浮動後改變了dispaly屬性，可以設定寬高，元素浮動不會穿過padding地區，浮動脫離文檔流影響別的元素。
製作一個導航
代碼實現：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{margin: 0px;
        }
        .c1{display: block;
            float: left;
            width: 22px;
            height: 20px;
            background: url("sucai.png") no-repeat;

        }
        .c2 {
            display: block;
            float: left;
            width: 22px;
            height: 20px;
            background: url("sucai.png") no-repeat;
            background-position: 0px -20px;
        }
        .c3 {
            display: block;
            float: left;
            width: 22px;
            height: 19px;
            background: url("sucai.png") no-repeat;
            background-position: 0px -45px;
        }
        .c4{
            display: block;
            float: left;
            width: 22px;
            height: 17px;
            background: url("sucai.png") no-repeat;
            background-position: 0px -63px;
        }
        .c5{
            display: block;
            float: left;
            width: 22px;
            height: 20px;
            background: url("sucai.png") no-repeat;
            background-position: 0px -81px;
        }
        .c6{
            display: block;
            float: left;
            width: 22px;
            height: 20px;
            background: url("sucai.png") no-repeat;
            background-position: 0px -101px;
        }
        ul{margin: 0px;
            padding: 0px;
        }
        li{
            float: left;
            list-style: none;
            text-align: center;
            margin-left:120px;
        }
        li>a{
            text-decoration: none;
            color:yellow;
            font-size: 8px;
        }
        li:hover a{
            background: linear-gradient(green,red);
        }
        .c1:hover{display: block;
            float: left;
            width: 22px;
            height: 20px;
            background: url("sucai.png") no-repeat;
            background-position: -21px -0px;
        }
        .c2:hover {
            display: block;
            float: left;
            width: 22px;
            height: 20px;
            background: url("sucai.png") no-repeat;
            background-position: -21px -20px;
        }
        .c3:hover{
            display: block;
            float: left;
            width: 22px;
            height: 19px;
            background: url("sucai.png") no-repeat;
            background-position: -22px -44px;
        }
        .c4:hover{
            display: block;
            float: left;
            width: 22px;
            height: 17px;
            background: url("sucai.png") no-repeat;
            background-position:-21px -63px;
        }
        .c5:hover{
            display: block;
            float: left;
            width: 22px;
            height: 20px;
            background: url("sucai.png") no-repeat;
            background-position: -22px -81px;
        }
        .c6:hover{
            display: block;
            float: left;
            width: 22px;
            height: 20px;
            background: url("sucai.png") no-repeat;
            background-position: -21px -101px;
        }

    </style>
</head>
<body>
<nav>
    <ul>
        <li>
            <span class="c1"> </span>
            <a href="#">茄子</a>
        </li>
        <li>
            <span class="c2"> </span>
            <a href="#">香蕉</a>
        </li>
        <li>
            <span class="c3"> </span>
            <a href="#">草莓</a>
        </li>
        <li>
            <span class="c4"> </span>
            <a href="#">馬鈴薯</a>
        </li>
        <li>
            <span class="c5"> </span>
            <a href="#">蘋果</a>
        </li>
        <li>
            <span class="c6"> </span>
            <a href="#">橘子</a>
        </li>

    </ul>
</nav>
</body>
</htm

html基礎知識點

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

html基礎知識點

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support