Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 简单仿百度搜索首页
Blogger Information
Blog 16
fans 2
comment 0
visits 20039
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
简单仿百度搜索首页
肖傲的博客
Original
1710 people have browsed it

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：仿得不错， 其实百度并不好做的， 科技含量很高， 现在只是仿的静态页面而已
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post