|
|
@@ -1,94 +1,180 @@
|
|
|
<!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;
|
|
|
+
|
|
|
+ li {
|
|
|
+ list-style: none;
|
|
|
}
|
|
|
|
|
|
/* 工具类 */
|
|
|
- .clearfix::after{
|
|
|
+ .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{
|
|
|
+ .header .header-left {
|
|
|
float: left;
|
|
|
padding-left: 24px;
|
|
|
}
|
|
|
- .header .header-left li{
|
|
|
+
|
|
|
+ .header .header-left li {
|
|
|
float: left;
|
|
|
margin-top: 19px;
|
|
|
margin-right: 24px;
|
|
|
font-size: 13px;
|
|
|
color: #222;
|
|
|
}
|
|
|
- .header .header-left img{
|
|
|
+
|
|
|
+ .header .header-left img {
|
|
|
height: 14px;
|
|
|
margin-top: 3px;
|
|
|
}
|
|
|
+
|
|
|
/* 头部区域左侧 end */
|
|
|
/* 头部区域右侧 start */
|
|
|
- .header .header-right{
|
|
|
+ .header .header-right {
|
|
|
float: right;
|
|
|
color: #222;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
- .header .header-right > div{
|
|
|
+
|
|
|
+ .header .header-right>div {
|
|
|
float: left;
|
|
|
margin-right: 24px;
|
|
|
margin-top: 19px;
|
|
|
}
|
|
|
- .header-right .weather div{
|
|
|
+
|
|
|
+ .header-right .weather div {
|
|
|
float: left;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
- .header-right .weather div:last-child{
|
|
|
+
|
|
|
+ .header-right .weather div:last-child {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
- .header-right .weather-icon img{
|
|
|
+
|
|
|
+ .header-right .weather-icon img {
|
|
|
width: 23px;
|
|
|
height: 23px;
|
|
|
margin-top: -3px;
|
|
|
}
|
|
|
- .header-right .weather-desc{
|
|
|
+
|
|
|
+ .header-right .weather-desc {
|
|
|
background-color: #40c057;
|
|
|
color: #fff;
|
|
|
font-size: 11px;
|
|
|
height: 18px;
|
|
|
line-height: 18px;
|
|
|
- padding:0 9px;
|
|
|
+ padding: 0 9px;
|
|
|
border-radius: 9px;
|
|
|
}
|
|
|
- .header-right .user div{
|
|
|
+
|
|
|
+ .header-right .user div {
|
|
|
float: left;
|
|
|
}
|
|
|
- .header-right .user-icon{
|
|
|
- border:1px solid #4e71f2;
|
|
|
+
|
|
|
+ .header-right .user-icon {
|
|
|
+ border: 1px solid #4e71f2;
|
|
|
border-radius: 50%;
|
|
|
- padding:2px;
|
|
|
+ padding: 2px;
|
|
|
margin-top: -5px;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
- .header-right .user-icon img{
|
|
|
+
|
|
|
+ .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-radius: 20px;
|
|
|
+ /* overflow: hidden; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-content .search .seacrh-content {
|
|
|
+ background-color: #fff;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 中间内容区域 search end */
|
|
|
</style>
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
<!-- 头部区域 -->
|
|
|
<div class="header clearfix">
|
|
|
@@ -104,7 +190,8 @@
|
|
|
<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><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>
|
|
|
@@ -129,5 +216,38 @@
|
|
|
</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">
|
|
|
+ <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">
|
|
|
+ <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"></div>
|
|
|
+ </div>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
