lovecoding
/
W250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!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;
        }

        /* 头部区域左侧 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 */
    </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>
</body>
</html>