模仿百度网页制作

最新推荐文章于 2024-08-30 15:33:13 发布

不长到一米九八不改名

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量206

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_65471345/article/details/124891786

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，你就知道</title>
    <style>
        *{padding:0;
          margin:0;}
        .daohangzuo{ height: 60px;
                font:13px Arial sans-serif;
                 padding : 0px 0px 0px 24px}
        .daohangzuo span a {color: #222222;
                            text-decoration: none;
                            display: inline-block;
                            margin:22px 20px 0px 0px;}
        .daohangzuo span a:hover{color: blue;}
        .logo {text-align: center;}
        .logo img{height: 129px;
                   margin-top: 23px;}
        .sousuo{text-align: center;
                 margin:auto 0;}
        .sousuo input{height: 18px;
                      width: 443px;
                    padding: 10px 87px 12px 16px;
                    margin-top: 10px;
                    border: 2px solid #222222;}
        .resou{text-align:left;
               width: 700px;
                margin: 45px auto 0px ;}
        .resou h4{font-family:cIconfont!important;
                   font-size: 15px;
                  margin-bottom: 5px;
                margin-left: 18px;} 
        .resou h4 a{text-decoration: none;
                   color: #222222;}
        .resou h4 a:hover{color:#4E6EF2;}
        .biaoge{font:16px Arial sans-serif;
                margin-top: 10px;}
        .biaoge .ul{list-style:none;}     
        ul li{height:32px ;
                   width: 340px;
                   display: inline-block;
                  margin-top: 5px;
                   font:16px Arial sans-serif;}
        .top,.one,.two,.three,.four,.five{margin: 0px 8px 0px 0px;
                                           font-size: 18px;
                                          margin-left:20px;}
        .sousuo input{border: 2px solid #c4c7ce;
                        border-radius: 10px 0 0 10px;}
        .sousuo input:focus {border:2px solid #4E6EF2;
                             outline: none;}
        .re{ color:#fff;
             font-size: 12px;
             width:16px;
             height: 16px;
             text-align: center;
            background-color: #FF6600;
            display: inline-block;
            border-radius: 25%; }
        .lianjie{text-decoration: none;
                color:#222222;}
        .lianjie:hover{color:#4E6EF2;
                 text-decoration:underline;}
        .tijiao{display: inline-block;
               text-align: center;
               width: 108px;
                height: 36.5px;
                padding-top:7.5px;
                padding-left: 0px;
                background-color: #4E6EF2;
                color:#fff;
                border-radius: 0 10px 10px 0;
              font-size: 17px;}
        .baiduyixia{text-decoration: none;}
        .tijiao:hover{background-color:blue;}
        .daohangyou,.denglu { float:right;
                color: #222222;
               text-decoration: none;
               display: inline-block;
               margin:22px 30px 0px 0px;}
        .denglu{height: 20px;
                width: 48px;
                padding: auto;
                padding-top: 2px;
                padding-bottom: 2px;
                text-align: center;
             background-color: #4E6EF2;
                color: #fff;
              margin-top: 17px;
              border-radius:5px;
              font-size: 13px;}
          .denglu a { display: inline-block;}
          .huan{float: right;
                font-weight: normal;
               color: #626675;
              font-size: 14px;
               margin-right: 25px;
               margin-bottom: -5px;
              text-decoration:none;}
          .huan:hover{color: #4E6EF2;}
          .sousuo input{background:url(小相机.png);
            background-repeat: no-repeat;
           background-position:491px 0px;
           background-size: 56px;}
           .xiabufen {font:12px Arial sans-serif;
                      color: #BBBB;
                    text-align:center;
                    margin-top: 458px;}
            .xiabufen span{ display: inline-block;
                           margin-left: 20px;}
    </style>
</head>
<body>
   <div class="daohangzuo">
    <span><a href="#" >新闻</a></span>
    <span><a href="#" >hao123</a></span>
    <span><a href="#" >地图</a></span>
    <span><a href="#" >贴吧</a></span>
    <span><a href="#" >视频</a></span>
    <span><a href="#" >图片</a></span>
    <span><a href="#" >网盘</a></span>
    <span><a href="#" >更多</a></span>
    <span class="denglu">登录</span>
    <span class="daohangyou">设置</span>
    </div>
    <div class="logo">
      <img src="logo.png"  title="点击一下，了解更多">
    </div>
    <div class="sousuo">
       <span><input style=color:#9195a3;></span><submit class="tijiao"><a href="#" class="baiduyixia" style=color:#fff;>百度一下</a></submit>
    </div>
    <div class="resou">
        <h4><a href="#">百度热搜</a><span style=color:#9195a3> ></span>
          <span><a href="#" class="huan">↻ 换一换</a></span>
        </h4>
        <a herf="#"></a>
        <table class="biaoge">
          <ul>
            <li>
              <span class="top" style=color:red;font-size:18px;>↟  </span>
              <span><a href="#" class="lianjie">经济长期向好基本面没有改变</a></span>
            <span class="re"> 热 </span>
          </li>
          <li>
            <span class="three" style=color:#faa90e>3  </span>
            <a href="#" class="lianjie">上海多地飘来“咖啡味”官方回应</a>
          </li>
           <li>
             <span class="one" style=color:#fe2d46;>1  </span>
             <a href="#" class="lianjie">外媒：乌将马里乌波尔控制权移交俄</a>
          </li>
          <li>
            <span class="four" style=color:#9195a3>4  </span>
            <a href="#" class="lianjie"> 助企纾困举措密集出台</a>
            <span class="re">热</span>
          </li>
          <li>
            <span class="two" style=color:#f60;>2  </span>
            <a href="#" class="lianjie">00后女孩扮百岁佘太君开口震全场</a>
            <span class="re"> 热 </span>
          </li>
          <li>
            <span class="five" style=color:#9195a3>5  </span>
            <a href="#" class="lianjie">重庆一女子疑因拍视频坠入嘉陵江</a>
          </li>
          </ul>
        </table>
      </div>
        <div class="xiabufen">
          <span>关于百度</span>
          <span>About Baidu</span>
          <span>使用百度前必读</span>
          <span>帮助中心</span>
          <span>京公网安备11000002000001号</span>
          <span>京ICP证030173号</span>
          <span>@2022 Baidu</span>
          <span>互联网药品信息服务资格证书（京）-经营性-2017-0022</span>
          <span>信息网络传播视听节目许可证0110516</span>
        </div>

</body>
</html>

效果图

不长到一米九八不改名

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
模仿百度网页制作

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt.
复制链接

扫一扫