html/css-仿写百度搜索首页

html部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="baibuA.css">
</head>
<body>
<div class="content">
    <div class="top">
        <ul>
            <li><a href="#"class="a1">新闻</a></li>
            <li><a href="#"class="a1">hao123</a></li>
            <li><a href="#"class="a1">地图</a></li>
            <li><a href="#"class="a1">视频</a></li>
            <li><a href="#"class="a1">贴吧</a></li>
            <li><a href="#"class="a1">学术</a></li>
            <li><a href="#">登录</a></li>
            <li><a href="#">设置</a></li>
            <li><a href="#" class="more">更多产品</a></li>

        </ul>
    </div>
    <div class="middle">
        <img src="images/百度.gif" alt="" class="bdimg">
        <br>
        <input type="text "class="txt">
        <input type="button" value="百度一下" class="btn">
        <br>
        <img src="images/二维码.png" alt="" class="ewmimg">
        <br>
        <span >下载百度APP</span>
        <br>
        <span class="span1">有事搜一搜  没事看一看</span>

    </div>
    <div class="button">
        <ul class="buttonul">
            <li><a href="#">把百度设为主页</a></li>
            <li><a href="#">关于百度</a></li>
            <li><a href="#">About&nbsp;&nbsp; Baidu</a></li>
            <li><a href="#">百度推广</a></li>
            <li>(京)-经营性-2017-0020</li>
        </ul>
        <br>
        <ul class="buttonu2">
            <li>©2020&nbsp;&nbsp;Baidu </li>
            <li><a href="#">使用百度前必读</a></li>
            <li><a href="#">意见反馈</a></li>
            <li>京ICP证030173号</li>
            <li><a href="#" class="last">京公网安备11000002000001号</a></li>
        </ul>
    </div>
</div>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
}
.content{
    width: 100%;
    height: 625px;
}
.top{
    width: 100%;
    height: 10%;
    /*background-color: #FF8140;*/
}
.top ul{
    list-style: none;
    /*border: 1px black solid;*/
    margin-left: 62%;
    padding-top: 20px;
}
.top li{
    float: left;
    margin-left: 20px;
    /*border: 1px black solid;*/
    text-align: center;
}
.top a{
    color: black;
    font-size: 13px;

}
.top .a1{
    font-size: 13px;
    color: black;
    font-weight: bolder;
}
.top .more{
    background-color: #3385FF;
    color: white;
    text-decoration: none;
    display: inline-block;
    width: 60px;
    height: 24px;
    /*text-align: center;*/
    line-height: 24px;
    margin-top: -3px;
}
.top .more:hover{
    background-color: #B8B8B8;
    color: black;
}



.middle{
    width: 100%;
    height: 70%;
    /*background-color: #3385FF;*/
    text-align: center;
}
.middle .bdimg{
    width: 260px;
    height: 132px;
    margin-top: -20px;
}
.middle .txt{
    margin-top: 20px;
    width: 510px;
    height: 32px;
    margin-left: -15px;
}
.middle .txt :focus{
    border: #3385FF 1px solid;
}
.middle .btn{
    background-color: #3385FF;
    color: white;
    display: inline-block;
    width: 100px;
    height: 36px;
    border: 0;
    outline: none;
    font-size: 18px;
    position: relative;
    top: 3px;
    margin-left: -5px;
}
.middle .ewmimg{
    padding-top: 60px;
    width: 120px;
    height: 120px;
}
.middle .span1{
    font-size: 14px;
    color: #B9B9B9;
}

.button{
    width: 100%;
    height: 20%;
    /*background-color: green;*/
}
.button .buttonul{
    list-style: none;
    padding-top: 20px;
    margin-left: 30%;
}
.button li{
    float: left;
    font-size: 12px;
    color: #888C94;
}
.button .buttonul li{
    margin-left: 20px;
}
.button a{
    /*text-decoration: none;*/
    color: #888C94;
}
.button .buttonu2{
    list-style: none;
    margin-left: 27%;
}
.button .buttonu2 li{
    margin-left: 15px;
}
.button .last{
    margin-left: 25px;
}

效果：在这里插入图片描述

来源：CSDN

作者：HadwinLing

链接：https://blog.csdn.net/Alingyuzi/article/details/103879912

标签

百度搜索

margin-left

top

按钮

margin

font-size

css