HTML&学习第一个页面:仿百度搜索页面 - MrLee博客 - 一个伪全桟工程师的小站

MrLee博客

落子无悔,人生无返

HTML&学习第一个页面:仿百度搜索页面

在刚了解完HTML的一些标签后,尝试性的去写了一个百度搜索页面。
先总结一下,仿照百度搜索页面需要用到的知识。
1.div
2.标签的使用
3.css属性{

  font-weight: 700; /*字体的粗细*/
  line-height: 24px; /*设置以百分比计的行高*/
  text-decoration: none; /*文本修饰*/

}

开始我的笔记。首先要了解百度页面的需要划分的区域,需要创建几个div,看下面的图
v3-9.png

看图可以知道需要划分三个大div和五个小div
那么我们就可以下一步了,写出三个大div,分别是 header(头部)、mian(主体)、footer(底部)
贴代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="header"></div>
    <div class="mian"></div>
    <div class="footer"></div>
</body>
</html>

写完你会发现浏览器什么都不显示。我们写一些css来看一下
3div.png

贴代码:

<style>
    .header{
        width: 100%;
        height: 50px;
        float: left;
        border: solid 1px red;/*测试用的 写完整体代码即可删除*/
    }
    .mian{
        width: 100%;
        height: 550px;
        float: left;
        border: solid 1px red;/*测试用的 写完整体代码即可删除*/
    }
    .footer{
        width: 100%;
        height: 200px;
        float: left;
        border: solid 1px red;/*测试用的 写完整体代码即可删除*/
    }
</style>

这不是三个主体就划分来了吗,那么我继续写头部,这个时候还需要一个小div,我们给它的class属性命名为 ul ,然后我们使用a标签,这个代码写在头部的div
贴代码:

<div class="ul">
            <a href="">新闻</a>
            <a href="">hao123</a>
            <a href="">地图</a>
            <a href="">视频</a>
            <a href="">贴吧</a>
            <a href="">学术</a>
            <a href="">登录</a>
            <a href="">设置</a>
            <a href="" class="bri">更多产品</a>
</div>

这时候你会发现在更多产品这里还有个class,为什么呢,因为这个标签背景颜色是蓝色,使用需要另外定义class。
a.png

写完a标签,你会发现它在左侧,怎么把它弄得和百度页面的一样呢,那么就需要写css了,这个时候就要记住使用浮动了【float】
贴代码:

.ul{
            float: right;/*使这个div向有浮动*/
        }
        .header a{
            float: left; /*使a标签向左浮动*/
            font-size: 18px; 
            font-weight: 700; /*字体的粗细*/
            margin-top: 10px; /*上边距*/
            margin-right:15px; /*右边距*/
            color: #555; 
        }

acss.png

我们继续写头部导航的更多产品这个标签的css属性
贴代码:

.header .bri{
            padding: 0 4px; /*上下内边距为0 左右内边距为4*/
            height: 23px;
            float: left;
            color: #fff;
            background: #38f;
            line-height: 24px; /*设置以百分比计的行高*/
            font-size: 13px;
            text-align: center;
            border-bottom: 1px solid #38f; /*设置下边框的样式为1个像素 实线*/
            margin-top: 10px; /*上外边距10个像素*/
            text-decoration: none; /*文本修饰*/
            font-weight: inherit; /*字体粗细*/
        }

aniu.png

现在我们的头部导航已经完成了
我们继续写主体
zhutititle.png

贴代码:

 <div class="logo">
            <div class="title">百度一下,你就知道</div>
 </div>

运行看了一下效果,是不是没有达到预期的效果,别急我们继续写第二个div
input.png

贴代码:

 <div class="logo">
            <div class="title">百度一下,你就知道</div>
            <div>
                <input type="text">
                <button>百度一下</button>
            </div>
</div>

**上面已经写出了需要的结构,可是没有达到预期效果,那么继续写css吧
贴代码:**

.mian .logo{
            width: 550px;
            height: 100px;
            margin: 200px auto 0 auto;
        }
        .logo input{
            width: 450px;
            height: 34px;
            border: 1px solid #38f;
            background: #fff;
            float: left;
        }
        .logo button{
            height: 38px;
            border: 0;
            line-height: 34px;
            font-size: 15px;
            color: #fff;
            background: #38f;
        }
        .title{
            font-size: 24px;
            text-align: center;
            margin-bottom: 10px;
        }

cssm.png

是不是达到我们想要的效果了
接下来我们写底部了,很快就要完工了。

贴代码:

<div class="footer">
        <div>
            <img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" alt="">
        <div>百度</div>
        </div>
        <div class="a1">
            <a href="">把百度设为主页</a>
            <a href="">关于百度</a>
            <a href="">About</a>
            <a href="">Baidu百度推广</a>
        </div>
        <div>©2019 Baidu 使用百度前必读 意见反馈 京ICP证030173号  京公网安备11000002000001号 </div>
</div>

footer1.png

接下来就是我们的css了
先在我们的大div中添加居中和元素定位
贴代码:

 .footer{
            width: 100%;
            height: 200px;
            border: solid 1px red;
            float: left;
            position:absolute;
            bottom: 0;
            text-align: center;
        }

foot.png

然后就是底部导航a标签的css了
贴代码:

.footer .a1{
            font-size: 13px;
            width: 460px;
            margin: 20px auto;
        }
        .footer .a1 a{
            margin: 0 20px;
        }

foot1.png

到此,整个页面就写完了,把红色边框元素去掉,放一张完整的图。学习HTML之后的第一个笔记,要学会记笔记的,这样印象会更深。

wz.png

本文共762字

评论卡