HTML例項-02-京東頂部導航條

阿新 • • 發佈：2020-07-24

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

<!--設定網頁標題-->
    <title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物！</title>
<!--設定標題上的圖片-->
    <link rel="shortcut icon" href="./img/favicon.png">
<!--    引進css樣式-->
    <link rel="stylesheet" href="style.css">
 
<!--    引進圖示字元體-->
　　<link rel="stylesheet" href="fa/css/all.css">
</head>

<body>

<!--    外部容器，藍色框-->
<div class="top-bar-wrapperr">
<!--    內部容器，紅色框-->
    <div class="top-bar clearfix">
<!--    左容器，綠色框-->　　
        <div class="left-tar">
            <div class="location">
 
<!--    利用i加圖示字元-->
                <i class="fas fa-map-marker-alt"></i>
                <a href="">浙江</a>
            </div>
        </div>
<!--    右容器，紫色框-->
        <ul class="list-tar clearfix">
            <li class="list-tar-li">
                <a href="">你好，請登入</a>
 
                <a href="" class="highlight">免費註冊</a>
            </li>
            <li class="line"></li>
            <li class="list-tar-li"><a href="">我的訂單</a></li>
            <li class="line"></li>
            <li class="list-tar-li">
                <a href="">我的京東</a>
                <i class="fas fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li class="list-tar-li"><a href="">京東會員</a></li>
            <li class="line"></li>
            <li class="list-tar-li">
                <a href=""class="highlight">企業採購</a>
                <i class="fas fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li class="list-tar-li">
                <span>客戶服務</span>
                <i class="fas fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li class="list-tar-li">
                <span>網站導航</span>
                <i class="fas fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li class="list-tar-li"><span>手機京東</span></li>
        </ul>
    </div>
</div>
</body>
</html>

style.css
* {
    margin:0;
    padding:0;
}
body{
    font:12px/1.5 Microsoft YaHei;
    color:#999;
}
/*藍色框的設定樣式*/
.top-bar-wrapperr{
    width:100%;
    background-color: #e3e4e5;
    height:30px;
    border-bottom:1px #ddd;
    /*設定行高，使文字垂直居中*/
    line-height: 30px;
}
/*紅色框的樣式*/
.top-bar{
    width:1190px;
    height:100%;
    /*內部容器水平居中*/
    margin:0 auto;
}
.left-tar{
    float:left;
}
.list-tar{
    float: right;
}
.list-tar li{
    float:left;
}
.list-tar-li{
    float:left;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
.clearfix::before,.clearfix::after{
    content: '';
    display: table;
}
.left-tar a,.list-tar-li a,.list-tar-li li{
    color:#999;
}
.fa-map-marker-alt{
    color:red;
}
/*解決高度塌陷*/
.top-bar a:hover,.top-bar a.highlight {
    color:red;
}
/*設定分割線*/
.line{
    width:1px;
    height:10px;
    background: #999;
    margin:10px 12px;
}