lovecoding
/
W250913


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
							<!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 */
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        /* 工具类 */
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        @font-face {
            font-family: "iconfont";
            /* Project id 5060986 */
            src: url('https://at.alicdn.com/t/c/font_5060986_7zh4h7ev0jm.woff2?t=1762675313405') format('woff2'),
                url('https://at.alicdn.com/t/c/font_5060986_7zh4h7ev0jm.woff?t=1762675313405') format('woff'),
                url('https://at.alicdn.com/t/c/font_5060986_7zh4h7ev0jm.ttf?t=1762675313405') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .icon-AIduihua:before {
            content: "\e653";
        }

        .icon-a-xinjianduihua2x:before {
            content: "\e67f";
        }

        .icon-attachment:before {
            content: "\e6a9";
        }

        .icon-tupian:before {
            content: "\e621";
        }

        .icon-yuyin:before {
            content: "\e8c0";
        }


        /* 头部区域左侧 start */
        .header .header-left {
            float: left;
            padding-left: 24px;
        }

        .header .header-left li {
            float: left;
            margin-top: 19px;
            margin-right: 24px;
            font-size: 13px;
            color: #222;
        }

        .header .header-left img {
            height: 14px;
            margin-top: 3px;
        }

        /* 头部区域左侧 end */
        /* 头部区域右侧 start */
        .header .header-right {
            float: right;
            color: #222;
            font-size: 13px;
        }

        .header .header-right>div {
            float: left;
            margin-right: 24px;
            margin-top: 19px;
        }

        .header-right .weather div {
            float: left;
            margin-right: 8px;
        }

        .header-right .weather div:last-child {
            margin-right: 0;
        }

        .header-right .weather-icon img {
            width: 23px;
            height: 23px;
            margin-top: -3px;
        }

        .header-right .weather-desc {
            background-color: #40c057;
            color: #fff;
            font-size: 11px;
            height: 18px;
            line-height: 18px;
            padding: 0 9px;
            border-radius: 9px;
        }

        .header-right .user div {
            float: left;
        }

        .header-right .user-icon {
            border: 1px solid #4e71f2;
            border-radius: 50%;
            padding: 2px;
            margin-top: -5px;
            margin-right: 8px;
        }

        .header-right .user-icon img {
            width: 24px;
            height: 24px;
            display: block;
            border-radius: 50%;
        }

        /* 头部区域右侧 end */
        /* 中间内容区域 start */
        .center-content {
            width: 800px;
            margin: 0 auto;
            /* background-color: yellow; */
        }

        /* 中间内容区域 end */
        /* 中间内容区域 logo start */
        .center-content .logo {
            text-align: center;
        }

        .center-content .logo img {
            width: 270px;
        }

        /* 中间内容区域 logo end */
        /* 中间内容区域 search start */
        .center-content .search {
            height: 100px;
            background-image: linear-gradient(160deg, #3377fe, #4c6fff, #8370ff, #ba59ff);
            /*padding: 1px;*/
            border: 1px solid transparent;
            border-radius: 20px;
            overflow: hidden;
        }

        .center-content .search .seacrh-content {
            background-color: #fff;
            height: 100px;
            padding: 8px 20px;
            /* border-radius: 20px; */
        }

        .center-content .search-input input {
            border: none;
            outline: none;
            font-size: 16px;
        }

        .center-content .search-btn {
            margin-top: 13px;
        }

        .center-content .search-btn .left-btn {
            float: left;
            border: 0.5px solid #DBDCE0;
            height: 38px;
            color: #4E6EF2;
            font-weight: 500;
            padding: 0 18px 0 15px;
            border-radius: 12px;
            line-height: 38px;
        }

        .center-content .left-btn img {
            height: 14px;
        }

        .center-content .search-btn .right-btn {
            float: right;
        }

        .center-content .right-btn .icon-btn {
            float: left;
            margin-top: 10px;
            margin-right: 5px;
        }

        .center-content .icon-btn .iconfont {
            font-size: 20px;
            font-weight: 500;
            color: #333;
            margin-right: 5px;
        }

        .center-content .right-btn .input-btn {
            float: left;
        }

        .center-content .input-btn input {
            font-size: 17px;
            font-weight: 500;
            color: #fff;
            border-radius: 15px;
            border: none;
            width: 108px;
            height: 44px;
            background-image: linear-gradient(136deg, #286aff, #4e6ef2, #7274f9, #9f66ff);
        }

        /* 中间内容区域 search end */
        /* 其他按钮区域 start */
        .btn{
            margin-top: 20px;
        }
        .btn ul li{
            float: left;
            background-color: #f6f7fe;
            height: 36px;
            line-height: 36px;
            padding: 0 15px;
            border-radius: 12px;
            margin-right: 12px;
            color: #333;
            font-size: 14px;
            font-weight: 500;
            position: relative;
        }
        .btn ul li:first-child span{
            float: left;
        }
        .btn ul li:first-child div{
            float: left;
            background-color: #fff;
            height: 30px;
            line-height: 30px;
            padding:0 10px;
            border-radius: 15px;
            color: #4e6ef2;
            margin-top: 3px;
        }
        .btn ul li.active::after{
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            right: 0;
            top: 0;
        }
        /* 其他按钮区域 end */
    </style>
</head>

<body>
    <!-- 头部区域 -->
    <div class="header clearfix">
        <!-- 头部左侧区域 -->
        <div class="header-left">
            <ul class="clearfix">
                <li>新闻</li>
                <li>hao123</li>
                <li>地图</li>
                <li>贴吧</li>
                <li>视频</li>
                <li>图片</li>
                <li>网盘</li>
                <li>文库</li>
                <!-- base64格式图片常用作于小图 -->
                <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAAAqCAMAAAAqEZ1jAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAhOAAAITgBRZYxYAAAAKJQTFRFAAAAenb/RpP/k2j/XXf7cXX6P5z7i2n8W3j7ZHP7jmn9VID7Qpf8jWn8Xnr6iWr8YHb7i2n8RJb9dWz8WXr8mWj9RpP8W3n8bW/8l2j+QJz9Q5f9ToT8fWv9ZW/8lWj9VID8YnX7Pp79QZr9pWb+RJT8m2f9k2j9SYz8jWn9hmr8UIT8fmv8VX78Xnn7d2z8ZHT7WHr7bm77Xnb7Z3D7YHH7RJOQRAAAACJ0Uk5TABAgICAwQEBAWF5gZXBwgICbn5+fo7+/vsLP39/f3urv73XwOA8AAAKfSURBVHja7dbJcuIwFIXhIzCxMTMNcdwMDoMZY4NxeP9X66srEckYQlPVvcvPBhZ8dVSIAvz03xNV/Luq4Xq9Hgo8nfDqjXq97hS1yXZNhXg2Z3o+f1KnLqx62y17Pp5smp+158EUaW6I52rkxLF3eoNpt1Ne+bR+Fd8U5Oc8Px6P5M0Evgq11ytpy0jgbk6e5cSxd2pb7yKOikpTouWyhbsNMsnpefZpOzsCI7c8brkM74/LqFSC7HkwVTu9lsB14ZJy745LlDdV5+3iQTXC7s9z3pNEggOh9s3woOFqJT2BmzUSLnMQEEeeh2+rkraiOrjZeL+XXEBwyp71Ybg+hWL+iltGt8ftKQI9QMzSlDxz9VofssIMdxitdJEvbo3jxqAGKXtt6N4OkpvgkmiFa50Ch1UU8zab/Ya4Br/IUnnewHCHg+FEh7/ExUIXdq+KG4N7z3hfzXDkaa5FmGpdMENrYWWjaoDrJtJLu4ajFFfbUduryN1ue4brb2KpjSvgvETe53R24U6Ggz+RYJnsCTMujmMJ9qELErkv9y7cyXAGtNCoI2Dqx9ymAl1bcYMLJ2NO5fZ2dmHLxiBGrJlxEAl7M1HkTFUzseeiWHOxYK+CrwLltRX3qTk7/4PbTXDdaBHLxytMdcllaaA56U1RSEyU56M0jotfYBLvynM091ni0GGtPO73nLkR7AaK6yqOKnG1g+wXrnqZz9nrw87bszdjjn/dDGffbgdX9YmT4HykaoLTp/UABGfyypx7a1yFNb0wpl7BddW8geSO5JU5TE63xhmOPb2uok8reN1Nrn4qjQNBlmfdvkB5beaoMgdP4LpFgbNuX3svtSwABoZ7WPOKa0Inxgl7DurMdfFXVV7savjK8WQ1/cz5+Q9e7A/jUZeiPQO0fwAAAABJRU5ErkJggg=="
                        alt=""></li>
                <li>更多</li>
            </ul>
        </div>
        <!-- 头部右侧区域 -->
        <div class="header-right">
            <div class="weather">
                <div class="weather-address">哈尔滨</div>
                <div class="weather-icon">
                    <img src="./img/baidu/weather.png" alt="">
                </div>
                <div class="weather-temp">0℃</div>
                <div class="weather-desc">优</div>
            </div>
            <div class="setting">
                <span>设置</span>
            </div>
            <div class="user">
                <div class="user-icon">
                    <img src="./img/baidu/user.jpeg" alt="">
                </div>
                <div class="user-name">用户</div>
            </div>
        </div>
    </div>
    <!-- 中间内容区域 -->
    <div class="center-content">
        <div class="logo">
            <img src="./img/baidu/logo.png" alt="logo">
        </div>
        <div class="search">
            <div class="seacrh-content">
                <div class="search-input">
                    <input type="text" placeholder="请输入搜索内容">
                </div>
                <div class="search-btn clearfix">
                    <div class="left-btn">
                        <div class="wen-btn">
                            <i class="iconfont icon-AIduihua"></i>
                            <img src="./img/baidu/wen.png" alt="wen">
                        </div>
                    </div>
                    <div class="right-btn clearfix">
                        <div class="icon-btn">
                            <i class="iconfont icon-yuyin"></i>
                            <i class="iconfont icon-attachment"></i>
                            <i class="iconfont icon-tupian"></i>
                        </div>
                        <div class="input-btn">
                            <input type="button" value="百度一下">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn">
            <!-- 其他按钮区域 -->
             <ul>
                <li>
                    <span>复杂问题就找文心助手 👉</span>
                    <div>立即体验</div>
                </li>
                <li>
                    <i class="iconfont icon-tupian"></i>
                    <span>AI生图</span>
                </li>
                <li>
                    <i class="iconfont icon-tupian"></i>
                    <span>AI写作</span>
                </li>
                 <li>
                    <i class="iconfont icon-tupian"></i>
                    <span>测运势</span>
                </li>
                <li class="active">
                    <i class="iconfont icon-tupian"></i>
                    <span>生成视频</span>
                </li>
                <li class="active">
                    <i class="iconfont icon-tupian"></i>
                    <span>更多</span>
                </li>
             </ul>
        </div>
    </div>
</body>

</html>