前端---HTML制作百度首页

最新推荐文章于 2024-04-29 16:27:27 发布

lbxxzt

最新推荐文章于 2024-04-29 16:27:27 发布

阅读量10w+

点赞数 6

分类专栏：前端文章标签：百度首页网页制作模拟搜索网页布局div

本文链接：https://blog.csdn.net/weixin_42504145/article/details/82813550

版权

前端专栏收录该内容

35 篇文章 2 订阅

订阅专栏

这次给大家讲解一个百度首页制作,我们先将图片和代码展示给大家

<html>
</head>
        <title>百度一下，我就知道</title>
        <link href="images/baidu.ico" rel="shortcut icon" type="image/x-icon"/>

        <style>
             .div_top{
                     width:484.578px;
                     height:24px;
                     float:right;
                     margin-top:10px;
             }
             .div_middle{
                     width:995px;
                     height:132px;
                     float:right;
                     margin-top:200px;
                   
             }
             .div_body{
                     width:100%;
                     height:59px;
                     float:left;
             }
             .div_bodyin{
                     width:640px;
                     height:36px;
                     float:right;
                     margin-top:23px;
                     margin-right:650px;
             }
             .div_tail{
                     width:100%;
                     height:120px;
                     float:right;
                     margin-top:300px;
             }
             .div_tail2{
                     width:100%;
                     height:22px;
                     float:right;
                     margin-top:10px;
             }
             .div_menu{
                     width:26.5156px;
                     height:24px;
                     float:left;
                     font-size: 13px;
                     font-weight: 700;
                     line-height: 24px;
                     color:#333;
                     margin-left:20;
             }
             .div_icon1{
                      margin-right:300px;              
             }

        </style>
     <script>
        function fun1()
{
   document.getElementById("submit").submit();
} 
     </script>
</head>

</body style="background-color:#ffffff">
           <div class="div_top">
                <div class="div_menu " ><b><ins>新闻</ins></b></div>
                <div class="div_menu " ><b><ins>hao123</ins></b></div>
      	        <div class="div_menu " ><b><ins>地图</ins></b></div>
                <div class="div_menu "  ><b><ins>视频</ins></b></div>
                <div class="div_menu "  ><b><ins>贴吧</ins></b></div>
                <div class="div_menu "  ><b><ins>学术</ins></b></div>
                <div class="div_menu " style="" ><ins>登录</ins></div>
                <div class="div_menu " style="" ><ins>设置</ins></div>
                <div class="div_menu " style="width:60px;background-color:#38f;color:#fff;" >更多产品</div>           </div>
 
           <div class="div_middle"><center><img src="https://img-blog.csdnimg.cn/2022010711010235601.png" /></center></div>

             <div class="div_body">
                 <center><div class="div_bodyin">
                      <form action="https://www.baidu.com/s" method="get" id="submit">
                         <input id="username" name="wd" type="text" style="height:36px;width:500px;float:left;margin-left:0px;"/> 
                                 <div><img src="https://img-blog.csdnimg.cn/2022010711010392622.png" style="float:left;height:36px;width:40px;margin-top=0px;"></div>
                       <div onclick="fun1()"   style="width:100px;height:36px;font-size:15px;color:#fff;background:#3385ff;float:right;line-height:36px;"><span>百度一下</span></div>
                      </form>                 
</div></center>
             </div>
    
           <div class="div_tail"><img src="https://img-blog.csdnimg.cn/2022010711010348840.png"   style="margin-left:850px"/></div>
           <div class="div_tail2"><div style="width:536.109px;height:22px;font-size: 12px;color:#999;text-align:center;margin-left:625px;"><ins>把百度设为主页</ins>&nbsp&nbsp&nbsp<ins>关于百度</ins>&nbsp&nbsp&nbsp<ins>Aboubt&nbspBaidu</ins>&nbsp&nbsp&nbsp</ins><ins>百度推广</ins></div></div>


           <div class="div_tail2"><div style="width:536.109px;height:22px;font-size: 12px;color:#999;text-align:center;margin-left:625px;">@2018Baidu<ins>使用百度前必读</ins>&nbsp<ins>意见反馈</ins>&nbsp京ICP证030173号&nbsp&nbsp&nbsp<ins>京公网安备11000002000001号</div></div>
</body>
</html>

简单网页布局的要点:

为了防止各个块之间互相造成影响，我们几乎整个网页都用div模块组合而成.
为了在不同分辨率的屏幕和缩放的网页上保持原网页各元素相对位置不产生改变，居中的要么选择居中，要么使用margin属性，不过要使用百分比.
小图标都是用的截图抓取，使用div包含其，然后调整布局就可以.
具体字体大小，字体颜色登录到百度页面用F12开发者模式抓取就可以确定.

采用form表单模拟搜索请求:

form表单提交的action为https://www.baidu.com/s，为什么要加s呢，因为我们搜索是模拟提交百度搜索请求。

使用form表单提交请求/?后附加的参数name为input的name，value为input中输入的值，name=value。而我们观察上方图片，可以发现?后加的是wd=CSDN,所以我们使input得name为wd即可。

lbxxzt

关注

6
点赞
踩
27

收藏

觉得还不错? 一键收藏
2
评论
前端---HTML制作百度首页

这次给大家讲解一个百度首页制作,我们先将图片和代码展示给大家&lt;html&gt;&lt;/head&gt; &lt;title&gt;百度一下，我就知道&lt;/title&gt; &lt;link href="images/baidu.ico" rel="shortcut icon" type="image/x-icon"/&a
复制链接

扫一扫