search

博客列表 >百度网站首页PC端

百度网站首页PC端

霏梦
霏梦原创
2020年06月27日 11:58:294094浏览

— 作者：霏梦

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>
  • 效果图
    百度
  • 总结：
  • 在实际过程中，还是会出现位置调出来后不对。
  • 望对这个案例帮忙讲解一下思路，问题出在哪了。
  • 多谢！
上一条：背景控制常用属性和精灵图的原理与实现及阿里图标的完整引用流程下一条：11 阶段性实战学习：网站首页框架
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多