lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!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;
        }
        /* 搜索区域 start */
        .search-content .logo-content{
            text-align: center;
        }
        .search-content .logo-content img{
            width: 270px;
        }
        .search-content .search-iput{
            width: 650px;
            /* background-color: blue; */
            margin: 0 auto;
        }
        .search-content .search-iput .sic-left{
            float: left;
            width: 493px;
            /* background-color: yellow; */
            border-top:1px solid #c4c7ce;
            border-left:1px solid #c4c7ce;
            border-bottom:1px solid #c4c7ce;
            text-align: right;
            padding:10px 20px;
            border-radius: 10px 0 0 10px;
        }
        .search-content .sic-left img{
            width: 24px;
            height: 20px;
        }
        .search-content .search-iput .sic-right{
            float: right;
            /* background-color: red; */
            background-color: #4e6ef2;
            height: 49px;
            width: 116px;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
            font-weight: 400;
            color: #fff;
            text-align: center;
            line-height: 49px;
        }
    </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 class="logo-content">
                <img src="./img/baidulogo.png" alt="logo">
            </div>
            <div class="search-iput">
                <div class="search-input-content clearfix">
                    <div class="sic-left">
                        <img src="./img/ht.png" alt="img">
                        <img src="./img/xj.png" alt="img">
                    </div>
                    <div class="sic-right">
                        <span>百度一下</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>