Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 百度网站首页PC端
Blogger Information
Blog 31
fans 2
comment 0
visits 27599
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
百度网站首页PC端
霏梦
Original
4086 people have browsed it

— 作者：霏梦

pc端网站首页

  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.     <link rel="stylesheet" href="./css/font-icon.css" type="text/css" />
  7.     <title>百度一下，你就知道</title>
  8.     <style>
  9.       /* 初始化 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       a {
  16.         text-align: center;
  17.         text-decoration: none;
  18.       }
  19.       li,
  20.       dd {
  21.         list-style: none;
  22.       }
  24.       html,body {
  25.         display: flex;
  26.         flex-flow: column nowrap;
  27.         min-width: 1250px;
  28.         height: 100%;
  30.       }
  31.       .head {
  32.         display: flex;
  33.         min-width: 1250px;
  34.         height: 60px;
  35.         padding: 10px;
  36.         /* border: 1px solid red; */
  37.         align-items: center;
  38.         justify-content: space-between;
  39.         font-family: Arial, "Microsoft YaHei", sans-serif;
  40.         /* background-color: mediumslateblue; */
  42.       }
  43.       .head-left {
  44.         display: flex;
  45.         align-items: center;
  46.         /* margin: ; */
  47.         padding: 10px 1px;
  48.         height:60px;
  50.       }
  51.       .head-left > a {
  52.         font-size: 13px;
  53.         font-family: Arial, "Microsoft YaHei", sans-serif;
  54.         padding: 5px 15px;
  55.         height: 23px;
  56.         text-align: center;
  57.         /* border: 1px solid red; */
  60.       }
  61.       .head-left > a:hover {
  62.         color: blue;
  63.       }
  64.       .head-left > a:visited {
  65.         color: #222222;
  66.       }
  67.       .head-right {
  68.         display: flex;
  69.         align-items: center;
  70.         margin-right: 30px;
  71.       }
  72.       .head-right > a {
  73.         font-size: 13px;
  74.         /* font-family: Arial, "Microsoft YaHei", sans-serif; */
  75.         padding: 3px 10px;
  76.       }
  77.       .head-right > a:first-of-type {
  78.         color: #f63051;
  79.       }
  80.       .head-right > a:first-of-type:hover {
  81.         color: #f63051;
  82.       }
  83.       .head-right > a:first-of-type:visited {
  84.         color: #f63051;
  85.       }
  86.       .head-right > span {
  87.         font-size: 13px;
  88.         padding: 0 20px;
  89.         color: #222222;
  90.       }
  91.       .head-right > span:hover {
  92.         color: blue;
  93.       }
  94.       .head-right > span:visited {
  95.         color: #222222;
  96.       }
  98.       .head-right > a:last-of-type {
  99.         border-radius: 6px;
  100.         background-color: #4e71f2;
  101.         color: #ffffff;
  102.         cursor: pointer;
  103.         height: 25px;
  104.       }
  105.       .logo {
  106.         display: flex;
  107.         align-content: center;
  108.         margin: 0 auto;
  109.       }
  110.       .logo > a >img {
  111.         height: 127px;
  112.         width: 270px;
  113.         /* align-items: center; */
  114.       }
  116.       .search {
  117.         display: flex;
  118.         justify-content: center;
  119.         line-height: 45px;
  120.       }
  121.       .search > input:first-of-type {
  122.         width: 546px;
  123.         height: 44px;
  124.         font-size: 16px;
  125.         border: 2px solid #c4c7ce;
  126.         border-radius: 10px 0 0 10px;
  127.         box-shadow: none;
  128.         background: #fff;
  129.         color: #222;
  130.       }
  131.       .search > input:last-of-type {
  132.         background-color: #4e6ef2;
  133.         width: 108px;
  134.         border-radius: 0 10px 10px 0;
  135.         font-size: 17px;
  136.         color: #fff;
  137.         height: 44px;
  138.         line-height: 45px;
  139.         box-shadow: none;
  140.         font-weight: 400;
  141.         border: none;
  142.         outline: none;
  143.       }
  144.       .hot-change {
  145.         display: flex;
  146.         width: 654px;
  147.         justify-content: space-between;
  149.         margin: 20px auto;
  151.         /* background-color: #4e71f2; */
  152.       }
  153.       .hot-change > a:first-of-type {
  154.         color: #222;
  155.         font-size: 14px;
  156.         font-family: Arial, "Microsoft YaHei", sans-serif;
  157.       }
  158.       .hot-change > a:last-of-type {
  159.         color: #9195a3;
  160.         font-size: 13px;
  161.       }
  163.       .hotlist {
  164.         display: flex;
  165.         width: 654px;
  166.         /* height: 320px; */
  167.         height: 100%;
  168.         /* padding: 5px 0px; */
  169.         margin: 5px auto;
  170.         flex-flow: row nowrap;
  171.         /* align-content: space-between; */
  172.       }
  174.       .hotlist > .row {
  175.         display: flex;
  176.         flex-grow: 1;
  177.         /* height: 100px; */
  179.         /* justify-content: space-between; */
  180.       }
  181.       .hotlist > .row > ul > li > a {
  182.         /* padding: 10px 0 10px 0; */
  183.         /* height: 40px; */
  184.         /* margin:30px 0 30px 0; */
  185.         color: #222;
  187.       }
  188.       .row>ul>li>a:hover{
  189.         color: blue;
  190.       }
  191.       .row > ul > li > span:first-of-type {
  192.         /* padding-top: 10px 10px 10px 10px; */
  193.         /* margin:10px 10px 10px 10px; */
  195.         /* color: aqua; */
  196.       }
  197.       .qrcode{
  198.         display: flex;
  199.         justify-content: flex-end;
  200.         height: 30px;
  201.       }
  202.       .qrcode > a >span{
  203.         margin-right: 20px;
  204.         /* height: 30px; */
  205.         width: 30px;
  206.         color: darkgray;
  207.         font-size: 20px;
  209.       }
  210.       .footer {
  211.         display: flex;
  212.         text-align: center;
  213.         justify-content: space-between;
  214.         align-items: center;
  215.         height: 40px;
  216.         margin: 0 10px;
  217.         background-color: #fafafa;
  218.         font-family: Arial, "Microsoft YaHei", sans-serif;
  220.       }
  222.       .footer-left > a {
  223.         color: #9195a3;
  224.         font-size: 12px;
  225.         padding: 10px 10px;
  226.       }
  227.       .footer-right > span {
  228.         font-size: 12px;
  229.         color: #9195a3;
  230.         margin: 0 10px;
  231.       }
  232.       .footer-right > a {
  233.         font-size: 12px;
  234.         color: #9195a3;
  235.       }
  236.     </style>
  237.   </head>
  238.   <body>
  239.     <div class="head">
  240.       <div class="head-left">
  241.         <a href="" target="_blank">新闻</a>
  242.         <a href="" target="_blank">hao123</a>
  243.         <a href="" target="_blank">地图</a>
  244.         <a href="" target="_blank">视频</a>
  245.         <a href="" target="_blank">贴吧</a>
  246.         <a href="" target="_blank">学术</a>
  247.         <a href="" target="_blank">更多</a>
  248.       </div>
  249.       <div class="head-right">
  250.         <a href="">抗击疫情</a>
  251.         <span>设置</span>
  253.         <a href="" style="text-align: center;">登录</a>
  254.       </div>
  255.     </div>
  256.     <div class="logo">
  257.       <a href=""
  258.         ><img
  259.           src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
  260.           alt=""
  261.       /></a>
  262.     </div>
  263.     <div class="search">
  264.       <input type="text" name="" maxlength="255" autocomplete="off" />
  265.       <input type="submit" name="" class="s_btn" value="百度一下" />
  266.     </div>
  267.     <div class="hot-change">
  268.       <a href="" class="hot-title">百度热榜</a>
  269.       <a href="" class="change"
  270.         ><span class="iconfont"></span>
  271.         <span>换一换</span>
  272.       </a>
  273.     </div>
  274.     <div class="hotlist">
  275.       <div class="row">
  276.         <ul>
  277.           <li>
  278.             <span class="iconfont" style="color:darksalmon;"></span>
  279.             <a href=""></a>北京现有39个中风险地区</a>
  280.             <span class="iconfont" style="color: coral; padding: 30px;"></span>
  281.           </li>
  282.           <li>
  283.             <span class="iconfont" style="color: lightblue;"></span>
  284.             <a href="">英国民众无视疫情涌向南部海边</a>
  286.           </li>
  287.           <li>
  288.             <span class="iconfont" style="color: mediumslateblue;"></span>
  289.             <a href="">北京老郑州烩面馆又有两员工确诊</a>
  291.           </li>
  292.         </ul>
  293.       </div>
  294.       <div class="row">
  295.         <ul>
  296.           <li>
  297.             <span class="iconfont"></span>
  298.             <a href="">易烊千玺谈回锅肉</a>
  299.           </li>
  300.           <li>
  301.             <span class="iconfont"></span>
  302.             <a href="">北京7社区解除应急封闭管理</a>
  303.           </li>
  304.           <li>
  305.             <span class="iconfont"></span>
  306.             <a href="">乘风破浪的姐姐淘汰名单</a>
  307.           </li>
  308.         </ul>
  309.       </div>
  310.     </div>
  311.     <div class="qrcode">
  312.      <a href="">
  313.       <span class="iconfont"></span>
  314.      </a>
  315.     </div>
  316.     <div class="footer">
  317.       <div class="footer-left">
  318.         <a href="">设为首页</a>
  319.         <a href="">关于百度</a>
  320.         <a href="">About Baidu</a>
  321.         <a href="">百度营销</a>
  322.         <a href="">使用百度前必读</a>
  323.         <a href="">意见反馈</a>
  324.         <a href="">帮助中心</a>
  325.       </div>
  326.       <div class="footer-right">
  327.         <span>©2020 Baidu (京)-经营性-2017-0020</span>
  328.         <a href="">京公网安备11000002000001号</a>
  329.         <span>京ICP证030173号</span>
  330.       </div>
  331.     </div>
  332.   </body>
  333. </html>
  • 效果图
    百度
  • 总结：
  • 在实际过程中，还是会出现位置调出来后不对。
  • 望对这个案例帮忙讲解一下思路，问题出在哪了。
  • 多谢！
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