|
|
@@ -0,0 +1,133 @@
|
|
|
+<!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>
|
