Love丶FFC's Blog

前端:仿写百度首页_头部

2019-08-27 18:36:32
阅读：800   •   评论：12
标签：

首先来看百度首页的样子。

现在开始仿写，百度首页的布局并不复杂。

1.默认样式重置

在正式编写页面之前，我们应该先对页面进行重置，因为HTML中的标签都有各自的默认样式。

重置代码如下：

  1. html,body,div,p,a,b,span,input,ul,li,ol,form,input,button{
  2.     margin: 0px;
  3.     padding: 0px;
  4.     border: 0px;
  5.  
  6. }
  7. a{
  8.     text-decoration: none;
  9.     color: #000000;
  10. }
  11. ul,li,ol{
  12.     list-style-type: none;
  13. }

2.编写头部

编写该头部的方式非常多，但其中最关键的点是各个标签的浮动效果。

HTML代码如下：

  1. <div class="Public-Header">
  2.         <ul>
  3.             <li><a href="#">新闻</a></li>
  4.             <li><a href="#">hao123</a></li>
  5.             <li><a href="#">地图</a></li>
  6.             <li><a href="#">视频</a></li>
  7.             <li><a href="#">贴吧</a></li>
  8.             <li><a href="#">学术</a></li>
  9.             <li><a href="#">登录</a></li>
  10.             <li><a href="#">设置</a></li>
  11.             <li><a href="#">更多产品</a></li>
  12.         </ul>
  13.     </div>
  14.     <div class="Public-Icon">
  15.         <img src="https://www.baidu.com/img/bd_logo1.png">
  16.     </div>

CSS代码如下：

  1. .Public-Header{
  2.     width:100%;
  3.     height:auto;
  4.     position: absolute;
  5.     right:0;
  6.     top: 0;
  7.     margin-top: 15px;
  8. }
  9. .Public-Header ul{
  10.     float: right;
  11.     height: 30px;
  12.     line-height: 30px;
  13.     font-size: 13px;
  14.     font-weight: bolder;
  15.     text-align: center;
  16. }
  17. .Public-Header ul li{
  18.     float: left;
  19.     width:40px;
  20.     margin:0px 10px 0px 5px;
  21.     text-decoration: underline;
  22. }
  23. .Public-Header ul li:last-child{
  24.     width:60px;
  25.     height:30px;
  26.     background: #3388FF;
  27.     font-weight: normal;
  28. }
  29. .Public-Header ul li a:hover{
  30.     color:#0000CC;
  31. }
  32. .Public-Header ul li:last-child a{
  33.     color:#FFFFFF;
  34. }

实现效果如图：

评论板

共有 12 条评论

  1. fruinly

    real cialis online Other times I m out talking to clients and potential clients

    2023-02-26 01:17 回复

  2. engarma

    best place to buy cialis online forum More than 200 drugs were found to list depression or suicidal symptoms as adverse effects, including the cancer focused medications

    2023-04-25 00:10 回复

  3. jordans for cheap

    I just wanted to thank you for the fast service. and also they look great. I received them a day earlier than expected. prefer I will definitely continue to buy from this site. an invaluable I will recommend this site to my friends. Thanks!
    jordans for cheap https://www.realjordansretro.com/

    2023-04-30 14:24 回复

  4. louis vuitton outlet online

    I just wanted to thank you for the fast service. in addition to they look great. I received them a day earlier than expected. like I will definitely continue to buy from this site. blue jays I will recommend this site to my friends. Thanks!
    louis vuitton outlet online https://www.bestlouisvuittonoutlet.com/

    2023-04-30 18:19 回复

  5. cheap louis vuitton outlet

    I just wanted to thank you for the fast service. or they look great. I received them a day earlier than expected. most notably I will definitely continue to buy from this site. anyway I will recommend this site to my friends. Thanks!
    cheap louis vuitton outlet https://www.cheapreallouisvuitton.com/

    2023-04-30 21:27 回复

  6. louis vuitton outlet online

    I just wanted to thank you for the fast service. or even a they look great. I received them a day earlier than expected. for instance I will definitely continue to buy from this site. an invaluable I will recommend this site to my friends. Thanks!
    louis vuitton outlet online https://www.louisvuittonsoutletstore.com/

    2023-05-01 07:29 回复

  7. cheap louis vuitton outlet

    I just wanted to thank you for the fast service. while well as they look great. I received them a day earlier than expected. the same as I will definitely continue to buy from this site. regardless I will recommend this site to my friends. Thanks!
    cheap louis vuitton outlet https://www.cheaplouisvuittonoutletonline.com/

    2023-05-01 22:41 回复

  8. cheap retro jordans

    Read reviews and was a little hesitant since I had already inputted my order. perhaps but thank god, I had no issues. most notably the received item in a timely matter, they are in new condition. situation so happy I made the purchase. Will be definitely be purchasing again.
    cheap retro jordans https://www.cheapauthenticjordanshoes.com/

    2023-05-16 13:01 回复

  9. louis vuitton outlet sale online

    Read reviews and was a little hesitant since I had already inputted my order. as but thank god, I had no issues. enjoy the received item in a timely matter, they are in new condition. in any event so happy I made the purchase. Will be definitely be purchasing again.
    louis vuitton outlet sale online https://www.louisvuittonsoutletonline.com/

    2023-05-16 15:33 回复

  10. Preliaf

    3 with new cases and associated deaths for 2017 in USA being forecasted to account for more than 53, 000 and 43, 000, respectively 1 buy cialis online overnight shipping

    2023-05-28 00:26 回复

  11. Preliaf

    Our case illustrates that in patients with ESRD and difficult to treat IDH, there is value in imaging the renal arteries to evaluate for renal artery stenosis cialis online cheap

    2023-06-08 23:00 回复

  12. KjcbJMzSY

    levitra cout Whichever version of drug you are taking, it is still the same medication

    2023-07-08 01:17 回复

--------查看该分类下最新文章--------
^
新版博客正在完善中！域名：http://www.loveffc:8080，点击跳转，完全移植后将去除端口号。

Copyright © 2018 - 2021 FFC的小站 - 滇 ICP 备 18010780 号 - 1

- Powered by WordPress & AliYun · Theme by FFC -

- Environment by Windows & XAMPP · Designed by WebStorm & VSCode -

已运行:

访问量：490434