lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css reset */
        body,ul{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        /* 清除浮动工具类 */
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

        /* 导航区域 start */
        .nav-content{
            padding: 20px;
        }
        .nav-content .nav-left{
            float: left;
        }
        .nav-content .nav-right{
            float: right;
        }
        .nav-content .nav-left li{
            display: inline-block;
            font-size: 13px;
            color: #222;
            margin-right: 20px;
        }
        .nav-content .nav-right li{
            display: inline-block;
            font-size: 13px;
            color: #222;
            margin-right: 10px;
        }
        .nav-content .nav-right img{
            width: 23px;
            vertical-align: middle;
        }
        .nav-content .nav-right .green-text span{
            background-color: #40c057;
            color: #fff;
            font-size: 12px;
            padding:1px 8px;
            border-radius: 10px;
        }
        .nav-content .nav-right .radius-box{
            border:1px solid blue;
            border-radius: 50%;
            padding:1px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 导航区域 -->
        <div class="nav-content clearfix">
            <!-- 导航左侧部分 -->
            <div class="nav-left">
                <ul>
                    <li>新闻</li>
                    <li>hao123</li>
                    <li>地图</li>
                    <li>贴吧</li>
                    <li>视频</li>
                    <li>图片</li>
                    <li>网盘</li>
                    <li>文库</li>
                    <li>更多</li>
                </ul>
            </div>
            <!-- 导航右侧部分 -->
            <div class="nav-right">
                <ul>
                    <li>哈尔滨</li>
                    <li>
                        <img src="./img/sun.png" alt="sun">
                    </li>
                    <li>
                        31℃
                    </li>
                    <li class="green-text">
                        <span>优</span>
                    </li>
                    <li>
                        设置
                    </li>
                    <li class="radius-box">
                        <div><img src="./img/user.png" alt="user"></div>
                    </li>
                    <li>
                        昵称
                    </li>
                </ul>
            </div>
        </div>
        <div class="search-content"></div>
    </div>
</body>
</html>