如何使用CSS樣式類

發(fā)布時間：2020-07-15 15:16:57 來源：億速云閱讀：150 作者：Leah 欄目：web開發(fā)

如何使用CSS樣式類？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

導航欄

擁有易用的導航條對于任何網(wǎng)站都很重要。
通過 CSS，您能夠把乏味的 HTML 菜單轉(zhuǎn)換為漂亮的導航欄。
導航欄需要標準的 HTML 作為基礎(chǔ)。
在我們的例子中，將用標準的 HTML 列表來構(gòu)建導航欄。
導航欄基本上是一個鏈接列表，因此使用 <ul> 和 <li> 元素是非常合適的

制作水平導航欄

有兩種創(chuàng)建水平導航欄的方法。使用行內(nèi)或浮動列表項。
兩種方法都不錯，但是如果您希望鏈接擁有相同的尺寸，就必須使用浮動方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>導航欄</title>
    <style>
        div{
            width: 80%;
            margin: 0 auto;
            padding: 0;
        }
        ul{
            list-style-type: none;
        }
        li{
            display: inline-block;
            width: 24%;
            padding-top: 10px;
            padding-bottom: 10px;
            margin: 0 auto;
            text-align: center;
            background: #c0ffff;
        }

    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="#">CSS/HTML</a></li>
        <li><a href="#">JavaScript</a> </li>
        <li><a href="#"> Python</a> </li>
        <li><a href="#"> C#</a> </li>

    </ul>
</div>
</body>
</html>

如何使用CSS樣式類

制作網(wǎng)頁分頁顯示

網(wǎng)頁內(nèi)容往往不止一頁，這時就需要頁面跳轉(zhuǎn)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分頁</title>
    <style>
        ul{
            list-style-type: none;
        }
        li{
            display: inline-block;
            width: 12%;
            padding-top: 10px;
            padding-bottom: 10px;
            margin: 0 auto;
            text-align: center;
            background: #c0ffff;
        }
        li:hover{
            background: salmon;
        }

    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="#">上一頁</a> </li>
        <li><a href="#">1</a> </li>
        <li><a href="#">2</a> </li>
        <li><a href="#">...</a> </li>
        <li><a href="#">12</a> </li>
        <li><a href="#">13</a> </li>
        <li><a href="#">下一頁</a> </li>


    </ul>

</div>
</body>
</html>

如何使用CSS樣式類

層級選擇器

選擇器用于選取帶有指定屬性和值的元素。

[attribute=value]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>層級選擇</title>
    <style>
        ol pre {
            background: #888888;
        }
        input[type='submit']{
            background: salmon;
        }
    </style>
</head>
<body>

    <pre>
1題，佇倚危樓風細細，望極春愁，黯黯生天際....，出自（ ）
    </pre>
    <ol type="A">
        <li>蝶戀花</li>
        <li>高麗史</li>
    </ol>
    <form>
    ‘衣帶漸寬終不悔，為伊消得人憔悴’的作者是：<input type="text">
        <br>
    請?zhí)峤荒愕臈l形碼：<input type="password">
        <br>
    <input type="submit" value="提交">
    </form>

</body>
</html>

如何使用CSS樣式類

看完上述內(nèi)容，你們掌握如何使用CSS樣式類的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

如何使用CSS樣式類

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽