HTML实现百度页面

本文转载自查看原文 2021-11-08 21:41 3049

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>百度</title>
    <style type="text/css">
        input{
            margin: 0;
            padding: 0;
        }
        #nav{
            /*background: lightblue;*/
            width: 600px;
            height: 30px;
            list-style: none; /* 去除黑点*/
            margin: 0;
            padding: 0;
            display: flex;    /*弹性布局  均匀分布开了*/
            justify-content: space-around; /*between  两边没有间距了*/


      
        }
        #nav1{
            width: 1700px;
            height: 30px;
            list-style: none; /* 去除黑点*/
            margin: 0 auto;
            padding: 0;
            display: flex;    /*弹性布局  均匀分布开了*/
            justify-content: space-around; /*between  两边没有间距了*/
            position: absolute;
            left: 80px;
            top: 1100px;
            /*postion: fixed

            width: 1200px;
            bottom: 0;
            right: 0;

            */



        }
        #nav a:hover{
            color: rgb(60, 93, 242);
        }
        #nav1 a{ /*后代选择器*/
            color: lightgrey;
            font-size: 10px;
            text-decoration: none  /*去除下划线*/;
            line-height: 30px;/*垂直居中*/

        }
        #nav1 a:hover{
            color: black;
        }

        #nav a{ /*后代选择器*/
            color: #000;
            font-size: 13px;
            text-decoration: none  /*去除下划线*/;
            line-height: 30px;/*垂直居中*/
        }
        /*#nav>a{ /*子代选择器   亲儿子*/
    
        /*li{
             float: left;
             margin-left: 20px;
             margin-right: 20px;
        }*/
        /*弹性布局*/

        #topRight{
            /*background: lightpink;*/
            /*float: right;*/
            position: absolute;
            right: 10px;
            top: 10px;
        /*    margin-left: 20px;
            margin-right: 20px;*/
            width: 140px;
            display: flex; 
            justify-content: space-between;
        }
        #topRight>input{
            background: #fff;
            border: 0;
            cursor: pointer;
            /*放到链接上变成小手*/
        }
        #topRight>#login{
            background: #38f; /*!important*/;
            color: #fff;
            width: 48px;
            border-radius: 6px;
        }
        /*权重 权值 
        行内1000 
        id 100 
        class 10 
        tag（标签）1*/
        #center{
            width: 600px;
            height: 250px;
            margin: 150px auto 0;
        /*    background: lightpink;*/

        }
        #imgBox{
            width: 220px;
            margin: 0 auto;
            /*background: lightblue;*/


        }
        #imgBox>img{
            width: 100%;   /*遵循父元素的高度 220px*/

        }
        #iptBox{
            width: 100%;
            height: 44px;
            /*background: lightblue;*/
            /*display: flex;    弹性布局  均匀分布开了
            justify-content: space-around; between  两边没有间距了*/
            border: 1px solid lightgray;
            border-radius: 10px 10px 10px 10px;
        }
        #iptBox>input[type='text']{/*属性选择器*/
        width: 500px;
        height: 100%;
        float: left;
        border: 0;
        border-radius:  10px 0 0 10px ;


        }
        #iptBox>input[type='button']{/*属性选择器*/
        width: 100px;
        height: 100%;
        float: left;
        border: 0;
        color: #fff;
        background: #38f;
        border-radius: 0 10px 10px 0;
    /*    border-radius: 10px;*/

        }
    </style>

</head>
<body>
<ul id="nav">
    <li><a href="">新闻</a></li>
    <li><a href="">hao123</a></li>
    <li><a href="">地图</a></li>
    <li><a href="">直播</a></li>
    <li><a href="">视频</a></li>
    <li><a href="">贴吧</a></li>
    <li><a href="">学术</a></li>
    <li><a href="">更多</a></li>
</ul>
<div id="topRight">
    <input type="button" name="" value="设置">
    <input type="button" id="login" name="" value="登录">

</div>

<div id="center">
    <div id="imgBox">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
    </div>
    <div id="iptBox">
        <input type="text" name="">
        <input type="button" name="" value="百度一下">
    </div>
</div>
<ul id="nav1">
    <li><a href="">关于百度</a></li>
    <li><a href="">About Baidu</a></li>
    <li><a href="">使用百度前必读</a></li>
    <li><a href="">帮助中心</a></li>
    <li><a href="">京公网安备11000002000001号</a></li>
    <li><a href="">京ICP证030173号</a></li>
    <li><a>@2021 Baidu</a></li>
    <li><a>互联网药品信息服务资格证书 (京)-经营性-2017-0020</a></li>
    <li><a href="">信息网络传播视听节目许可证0110516</a></li>

</ul>
</body>
</html>

首先我们先观察百度的页面是如何实现的

如图所示

如图所示这是基本的页面布局

然后我们一点一点的弄

先弄左上角这个ul列表，因为默认在左上角就不用弄div盒子了

代码如下

<ul id="nav">
    <li><a href="">新闻</a></li>
    <li><a href="">hao123</a></li>
    <li><a href="">地图</a></li>
    <li><a href="">直播</a></li>
    <li><a href="">视频</a></li>
    <li><a href="">贴吧</a></li>
    <li><a href="">学术</a></li>
    <li><a href="">更多</a></li>
</ul>
我们把它叫做nav

css代码如下

#nav{
            /*background: lightblue;*/
            width: 600px;
            height: 30px;
            list-style: none; /* 去除黑点*/
            margin: 0;
            padding: 0;
            display: flex;    /*弹性布局  均匀分布开了*/
            justify-content: space-around; /*between  两边没有间距了*/
      
        }
把每个li的变成弹性布局，这样的话就能在一行中显示，不加

display: flex;    /*弹性布局  均匀分布开了*/
            justify-content: space-around; /*between  两边没有间距了*/
的话


效果就变成了

然后我们加上这行代码以实现鼠标放上变成小手和变色的效果

    #nav a:hover{
            color: rgb(60, 93, 242);
        }

cursor: pointer;
/*鼠标放上变成小手*/

如图所示

然后我们要设置右上角的效果

<div id="topRight">
    <input type="button" name="" value="设置">
    <input type="button" id="login" name="" value="登录">

</div>

我们把右上角的盒子叫做topRight（注意驼峰命名法）

在topRight中我们设置两个button

css代码如下

#topRight{
            position: absolute;
            right: 10px;
            top: 10px;
            width: 140px;
            display: flex; 
            justify-content: space-between;
        }

        #topRight>input{
            background: #fff;
            border: 0;
            cursor: pointer;
            /*放到链接上变成小手*/
        }
这使得两个input按钮都出现

放到链接上变成小手的效果



然后我们对登录进行颜色设置

        #topRight>#login{
            background: #38f; /*!important*/;
            color: #fff;
            width: 48px;
            border-radius: 6px;
        }
        /*权重 权值 
        行内1000 
        id 100 
        class 10 
        tag（标签）1*/


然后我们进行中间图片和输入框的编写

代码如下

<div id="center">
    <div id="imgBox">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
    </div>
    <div id="iptBox">
        <input type="text" name="">
        <input type="button" name="" value="百度一下">
    </div>
</div>
我们把这个盒子定义为center

这个大盒子里面有两个小盒子

一个我们叫做imgBox

这个盒子我们用于盛放图片

一个我们叫做iptBox

用来盛放两个input

css代码如下

 #center{
            width: 600px;
            height: 250px;
            margin: 150px auto 0; 居中显示
        /*    background: lightpink;*/

        }
        #imgBox{
            width: 220px;
            margin: 0 auto;   居中显示
            /*background: lightblue;*/


        }
        #imgBox>img{
            width: 100%;   /*遵循父元素的高度 220px*/

        }
        #iptBox{
            width: 100%;
            height: 44px;
            /*background: lightblue;*/
            border: 1px solid lightgray;
            添加灰色边框
            border-radius: 10px 10px 10px 10px;
            添加圆角边框


　　　　　  border——radius：10px 10px 10px 10px；
　　　　　　上 右 下 左

　　　　　　border——radius： 10px 10px 10px；
　　　　　　上 左右 下

　　　　　　border——radius：10px 10px；
　　　　　　上下 左右

　　　　　　border——radius：10px；
　　　　　　上下左右

        }
        #iptBox>input[type='text']{/*属性选择器*/

        width: 500px;
        height: 100%;
        float: left;
        border: 0;
        border-radius:  10px 0 0 10px ;


        }

属性选择器：

input[type='text']

input 下 type名叫做 text的input按钮


子代选择器：

#iptBox>input

iptBox下的input的按钮

>下 只能为

上一个是下一个亲爸爸

下一个是上一个的亲儿子







        #iptBox>input[type='button']{/*属性选择器*/
        width: 100px;
        height: 100%;
        float: left;
        border: 0;
        color: #fff;
        background: #38f;
    /*    border-radius: 10px;*/



但是如果不设置

  input{
            margin: 0;
            padding: 0;
        }

的话

我们会得到这样的结果

如图所示

这样的话

因为两个input框会有padding和margin值 这样会造成 

两个框加起来会超出范围

然后

导致他们不在一行

所以

我们要设置

padding 和 margin

为零啊啊啊啊








这样的话完成了大半部分

最后我们弄最后底部的ul

代码如下

<ul id="nav1">
    <li><a href="">关于百度</a></li>
    <li><a href="">About Baidu</a></li>
    <li><a href="">使用百度前必读</a></li>
    <li><a href="">帮助中心</a></li>
    <li><a href="">京公网安备11000002000001号</a></li>
    <li><a href="">京ICP证030173号</a></li>
    <li><a>@2021 Baidu</a></li>
    <li><a>互联网药品信息服务资格证书 (京)-经营性-2017-0020</a></li>
    <li><a href="">信息网络传播视听节目许可证0110516</a></li>

</ul>

css如下

#nav1{
            width: 1700px;
            height: 30px;
            list-style: none; /* 去除黑点*/
            margin: 0 auto;
            padding: 0;
            display: flex;    /*弹性布局  均匀分布开了*/
            justify-content: space-around; /*between  两边没有间距了*/
            position: absolute;
            left: 80px;
            top: 1100px;
            /*postion: fixed

            width: 1200px;
            bottom: 0;
            right: 0;

            */

  #nav1 a{ 
　　　　　　　　/*后代选择器*/
            color: lightgrey;
            font-size: 10px;
            text-decoration: none  /*去除下划线*/;
            line-height: 30px;/*垂直居中*/

        }
        #nav1 a:hover{
            color: black;
        }



这样我们会制作成了一个简易的百度页面

呀呀呀呀

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 HTML实现百度分享插件分享网页 html和css制作百度界面关于html5新增的功能（百度）百度前端代码规范：HTML 前端页面引用百度地图百度地图api在Html中显示，在jsp页面中不显示解决方法利用HTML5定位功能，实现在百度地图上定位（转）百度OpenRasp实现原理 vue实现百度离线地图 echart 百度地图实现效果