html 小米商城導航欄示例

時間 2019-12-01

標籤 html 小米商城導航示例欄目 HTML 简体版

原文原文鏈接

　　1.小米導航欄示例html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>06小米商城導航條示例</title>

    <style>

        /* 全局通用的樣式，去除瀏覽器默認的內邊距和外邊距 */
        * {
            margin: 0; /* 去除瀏覽器默認的margin和padding */
            padding: 0;
        }

        /* 將ul前面的原點去除 */
        ul {
            list-style-type: none; /* 將ul列表前面的小圓點去掉 */
        }

        /* 去除a標籤的下劃線 */
        a {
            text-decoration-line: none;
        }

        /* 設置li左浮動，每一個li標籤的右面有15個像素點 */
        .nav-left > ul > li {
            float: left;
            padding-right: 15px;

        }

        /* 設置a標籤字體顏色爲白色 */
        .nav-left > ul > li > a {
            color: white;
        }

        /* 設置登陸、註冊、購物車的div標籤爲右浮動 */
        .nav-right {
            float: right;
            /*padding-right: 15px;*/
        }

        /* 設置div標籤下的a標籤每一個a標籤的右面有15px的內邊距 */
        .nav-right > a {
            padding-right: 15px;
            color: white;   /* 設置a標籤字體顏色爲白色 */
        }

        /* 設置整個導航欄的背景顏色 */
        .nav {
            background-color: darkslategrey;
        }

        /* 目的爲了撐起來，由於孩子全都是浮動的，都脫離了文檔流，因此要增長一個僞元素的孩子，這個孩子的左右不能有浮動，因此就將標籤撐起來了 */
        .clearfix:after, /* 增長僞元素，在內容的後面增長 */
        .clearfix:before { /* 增長僞元素，在內容的前面增長 */
            clear: both; /* 左右都不能有浮動 */
            content: '';
            display: block; /* 變成塊級標籤 */
        }

        .temp {
            width: 90%; /* 只佔父標籤的百分之90的寬度 */
            margin: 0 auto;
            padding: 12px;
        }


        .other {
            height: 1000px;
            /*margin-top: 20px;*/
            background-color: coral;
            /*margin: 0 auto;*/
        }

    </style>

</head>
<body>


<!-- 導航欄 -->
<div class="nav">
    <div class="temp clearfix">  <!-- 讓nav裏的內容只佔nav的多少多少 -->
        <div class="nav-left">
            <ul>
                <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="">豆漿</a></li>
                <li><a href="">牛奶</a></li>
            </ul>
        </div>
        <div class="nav-right">
            <a href="">登陸</a>
            <a href="">註冊</a>
            <a href="">購物車</a>
        </div>
    </div>
</div>

<!-- 其餘 -->
<div class="alw">
    <div class="other">我是其餘的內容</div>
</div>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。