简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >简单仿百度搜索首页

简单仿百度搜索首页

肖傲的博客
肖傲的博客原创
2020年06月28日 19:54:311707浏览

html代码：

  1. < !DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- 引入css样式 -->
  7.     <link rel="stylesheet" href="css/index.css" />
  8.     <!-- 引入图标 -->
  9.     <link rel="stylesheet" href="css/iconfont.css">
  10.     <title>仿百度</title>
  11.   </head>
  12.   <body>
  13.     <!-- 页眉 -->
  14.     <header>
  15.         <ul class="header-left">
  16.           <li><a href="#" target="_blank">新闻</a></li>
  17.           <li><a href="#" target="_blank">hao123</a></li>
  18.           <li><a href="#" target="_blank">地图</a></li>
  19.           <li><a href="#" target="_blank">视频</a></li>
  20.           <li><a href="#" target="_blank">贴吧</a></li>
  21.           <li><a href="#" target="_blank">学术</a></li>
  22.           <li><a href="#" target="_blank">更多</a></li>
  23.         </ul>
  24.         <div class="header-right">
  25.           <a href="">抗击疫情</a>
  26.           <span>设置</span>
  27.           <a href="">登录</a>
  28.         </div>
  29.     </header>
  30.     <!-- 中间 -->
  31.     <div class="logo">
  32.           <a href=""><img src="logo1.png" alt=""></a>
  33.     </div>
  34.     <div class="search">
  35.       <span class="iconfont icon-xiangji1 zx" ></span>
  36.         <input type="text" name="" />
  37.         <a href="">百度一下</a>
  38.     </div>
  39.     <!-- 榜单区 -->
  40.     <div class="hot-head">
  41.           <a href="" class="hot-title">百度热搜榜</a>
  42.           <a href="" class="hot-change">
  43.             <span class="iconfont icon-zhuanhuan- zh"></span>
  44.             <span>换一换</span>
  45.           </a>
  46.     </div>
  47.     <div class="hot-list">
  48.       <div class="hot-left">
  49.         <ul>
  50.           <li>
  51.             <span class="iconfont icon-1_square_solid number1"></span>
  52.             <a href="">90后姑娘熬夜战疫胖了十几斤</a>
  53.             <span class="iconfont icon-re1 re1" ></span>
  54.             </a>
  55.           </li>
  56.           <li>
  57.             <span class="iconfont icon-2_square_solid number2"></span>
  58.             <a href="#">大碗宽面的姐姐们评论张萌</a>
  59.             <span class="iconfont icon-xin1 xin1"></span>
  60.           </li>
  61.           <li>
  62.             <span class="iconfont icon-3_square_solid number3"></span>
  63.             <a href="#">教育部给本科教学打分</a>
  64.           </li>
  65.         </ul>
  66.       </div>
  67.       <div class="hot-right">
  68.         <ul>
  69.           <li>
  70.             <span class="iconfont icon-4_square_solid number4"></span>
  71.             <a href="">全国人大代表申纪兰逝世</a>
  72.             </a>
  73.           </li>
  74.           <li>
  75.             <span class="iconfont icon-5_square_solid number4"></span>
  76.             <a href="#">北京新增14例确诊病例</a>
  77.           </li>
  78.           <li>
  79.             <span class="iconfont icon-6_square_solid number4"></span>
  80.             <a href="#">快乐大本营选常驻新人</a>
  81.           </li>
  82.         </ul>
  83.       </div>
  84.     </div>
  85.     <!-- 页脚 -->
  86.     <footer>
  87.       <div class="footer-left">
  88.           <a href="" target="_blank">设为首页</a>
  89.           <a href="" target="_blank">关于百度</a>
  90.           <a href="" target="_blank">About Baidu</a>
  91.           <a href="" target="_blank">百度营销</a>
  92.           <a href="" target="_blank">使用百度前必读</a>
  93.           <a href="" target="_blank">意见反馈</a>
  94.           <a href="" target="_blank">帮助中心</a> 
  95.       </div>
  96.       <div class="footer-right">
  97.         <span>©2020 Baidu&nbsp;&nbsp;&nbsp;&nbsp;(京)-经营性-2017-0020</span>
  98.         <a href="">京公网安备11000002000001号</a>
  99.         <span>京ICP证030173号</span>
  100.       </div>
  101.     </footer>
  102.   </body>
  103. </html>

css代码：

  1. * {
  2.   /* 初始化样式 */
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. /* 去a标签除下划线 */
  8. a {
  9.   text-decoration: none;
  10.   font-size: 13px;
  11.   color: #222;
  12. }
  13. li {
  14.   list-style: none;
  15. }
  17. /* 设置为弹性容器，并垂直排列 */
  18. html,
  19. body {
  20.   display: flex;
  21.   flex-direction: column;
  22.   height: 100%;
  23. }
  24. /* 头部区域 */
  25. header {
  26.   display: flex;
  27.   min-width: 1265px;
  28.   height: 60px;
  29.   align-items: center;
  30.   /* 水平方向靠两边排列 */
  31.   justify-content: space-between;
  32. }
  33. /* 左边部分 */
  34. header > .header-left {
  35.   display: flex;
  36.   /* 居中对齐 */
  37.   align-items: center;
  38.   height: 60px;
  39.   /* 左外边距20px */
  40.   margin-left: 20px;
  41. }
  42. header > .header-left > li > a {
  43.   padding: 0 15px;
  44. }
  45. header > .header-left > li > a:hover {
  46.   color: #4e71f2;
  47. }
  49. /* 右边部分 */
  50. header > .header-right {
  51.   display: flex;
  52.   /* 居中对齐 */
  53.   align-items: center;
  54.   height: 60px;
  55.   /* 左外边距20px */
  56.   margin-right: 23px;
  57. }
  58. header > .header-right > a,
  59. span {
  60.   padding: 3px 14px;
  61.   font-size: 13px;
  62. }
  64. header > .header-right > a:first-of-type {
  65.   color: #f63051;
  66. }
  67. header > .header-right > a:first-of-type:hover {
  68.   color: #4e71f2;
  69. }
  70. header > .header-right > a:last-of-type {
  71.   background-color: #4e71f2;
  72.   border-radius: 6px;
  73.   height: 25px;
  74.   color: #eef2fe;
  75.   margin: 0 10px;
  76. }
  78. header > .header-right > span:hover {
  79.   color: #4e71f2;
  80. }
  82. /* logo部分 */
  84. .logo {
  85.   display: flex;
  86.   align-content: center;
  87.   margin: 0 auto;
  88. }
  89. .logo > a > img {
  90.   height: 129px;
  91.   width: 270px;
  92. }
  93. /* 搜索区 */
  94. .search {
  95.   display: flex;
  96.   justify-content: center;
  97.   line-height: 44px;
  98.   position: relative;
  99. }
  100. .search > input {
  101.   width: 546px;
  102.   height: 44px;
  103.   border: 2px solid #a7aab5;
  104.   border-right: none;
  105.   border-radius: 10px 0 0 10px;
  106. }
  107. /* 定位后通过反向高度和内边距撑开到想要的位置 */
  108. .search > span {
  109.   position: absolute;
  110.   /* border: 1px solid red; */
  111.   padding-left: 400px;
  112.   top: -25%;
  113. }
  114. /* 设置照相机图标大小颜色 */
  115. .search > .zx {
  116.   font-size: 25px;
  117.   color: #a7aab5;
  118. }
  119. .search > a {
  120.   height: 44px;
  121.   width: 108px;
  122.   text-align: center;
  123.   background-color: #4e6ef2;
  124.   color: #eef2fe;
  125.   font-size: 17px;
  126.   border-radius: 0 15px 15px 0;
  127. }
  128. /* 鼠标悬停样式 */
  129. .search > a:hover {
  130.   background-color: #4662d9;
  131. }
  133. .search > .zx:hover {
  134.   color: #4e6ef2;
  135. }
  137. .search > input:hover {
  138.   border: 2px solid #626675;
  139.   border-right: none;
  140. }
  142. /* 热搜区 */
  144. .hot-head {
  145.   width: 654px;
  146.   display: flex;
  147.   /* 主轴为水平靠两端边对齐排列 */
  148.   justify-content: space-between;
  149.   margin: 25px auto;
  150. }
  151. .hot-head > a:first-of-type {
  152.   font-size: 14px;
  153. }
  154. .hot-head > a > span:last-of-type {
  155.   font-size: 13px;
  156.   color: #9195a3;
  157.   /* 字体变细 */
  158.   font: 400;
  159. }
  160. .hot-head > a > .zh {
  161.   font-size: 16px;
  162.   color: #9195a3;
  163.   margin-right: -28px;
  164. }
  166. /* 列表区 */
  167. .hot-list {
  168.   display: flex;
  169.   width: 654px;
  170.   height: 100%;
  171.   margin: 5px auto;
  172. }
  173. /* 右边 */
  174. .hot-list > .hot-left {
  175.   display: flex;
  176.   flex-grow: 1;
  177.   margin-right: 50px;
  178. }
  179. .hot-list > .hot-left > ul > li {
  180.   padding-top: 10px;
  181. }
  182. .hot-list > .hot-left > ul > li > a {
  183.   font-size: 14px;
  184.   line-height: 20px;
  185.   text-align: center;
  186. }
  187. /* 左边 */
  188. .hot-list > .hot-right {
  189.   display: flex;
  190.   flex-grow: 1;
  191. }
  192. .hot-list > .hot-right > ul > li {
  193.   padding-top: 10px;
  194. }
  195. .hot-list > .hot-right > ul > li > a {
  196.   font-size: 14px;
  197.   line-height: 20px;
  198.   text-align: center;
  199. }
  200. /* 鼠标悬停样式 */
  201. .hot-list > .hot-left > ul > li > a:hover {
  202.   color: #4e6ef2;
  203. }
  204. .hot-list > .hot-right > ul > li > a:hover {
  205.   color: #4e6ef2;
  206. }
  207. /* 图标样式 */
  208. .hot-list > .hot-left > ul > li > .number1 {
  209.   color: #fcd533;
  210. }
  211. .hot-list > .hot-left > ul > li > .re1 {
  212.   color: #faab06;
  213. }
  214. .hot-list > .hot-left > ul > li > .number2 {
  215.   color: #b9d5f3;
  216. }
  217. .hot-list > .hot-left > ul > li > .xin1 {
  218.   color: #ff4589;
  219. }
  220. .hot-list > .hot-left > ul > li > .number3 {
  221.   color: #ead1bb;
  222. }
  223. .hot-list > .hot-right > ul > li > .number4 {
  224.   color: #9195a3;
  225. }
  226. /* 页脚区 */
  227. footer {
  228.   display: flex;
  229.   min-width: 1265px;
  230.   height: 40px;
  231.   align-items: center;
  232.   justify-content: space-between;
  233.   background-color: #fafafa;
  234. }
  235. /* 页脚区 */
  236. footer > .footer-left {
  237.   margin-left: 14px;
  238. }
  239. footer > .footer-left > a {
  240.   font-size: 12px;
  241.   color: #9e95ad;
  242.   padding: 13px;
  243. }
  244. footer > .footer-right {
  245.   margin-right: 14px;
  246. }
  247. footer > .footer-right > a,
  248. span {
  249.   font-size: 12px;
  250.   color: #9e95ad;
  251.   padding: 13px;
  252. }
  253. /* 鼠标悬停样式 */
  254. footer > .footer-left > a:hover {
  255.   color: #000;
  256. }
  257. footer > .footer-right > a:hover {
  258.   color: #000;
  259. }

总结：flex布局可以快速让页面向两边靠边对齐。弹性布局中定位使用不太掌握。目前只能写简单页面，复杂的还要多学习下。多后面要多练习写几个其他网页，争取让自己多熟练一点。页面小小，代码不少。要想掌握，还需练好。

上一条：showdoc下一条：FlexBox 弹性盒
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多