W
e
l
c
o
m
e
: )

新版百度首页仿写

效果

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="baidu2.css">
    <title>百度一下，你就知道</title>
</head>
<body>
    <div id="header">
        <ul id="header_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>
        </ul>
        <ul id="header_nav2">
            <li><input type="button" value="登录" id="button1"></li>
            <li><a href="">设置</a></li>
            <li><a href="" id="kang">抗击肺炎</a></li>
        </ul>
    </div>
    <div id="main">
        <img src="https://www.baidu.com/img/bd_logo1.png"  width="270px" height="125px" alt=""><br>
         <input type="text" name="" id="" >
         <input type="submit" value="百度一下">
    </div>
    <div id="footer">
        <img src="3.jpg" alt="" >
    </div>
</body>
</html>

#header{
    width: 100%;
    height: 50px;
}
#header_nav{
    position: relative;
    right: 25px;
    top: -3px;
}
#header_nav  li{
      float: left;
      margin-right: 30px;
}
#kang{
    color: red;
}
a:hover{
    color: blue;
}
a{
    text-decoration:none;
    color:#222;
    font-size: 13px;
}
li{
    list-style: none;
}
#header_nav2{
    position: relative;
    right: 30px;
}
#header_nav2 li{
    float: right;
    margin-left:30px ;
}
#button1{
    background-color: #4e71f2;
    color: white;
    border: solid 1px blue;
}
#main{
    width: 100%;
    height: 200px;
    text-align: center;
}
input[type=text]{
    width: 600px;
    height: 38px;
    background-image: url("1.jpg");
    background-repeat: no-repeat;
    background-position-x: 550px;
}
input[type=submit]{
    position: relative;
    right: 5px;
    width: 130px;
    height: 45px;
    color: white;
    background-color: #4e71f2;
    border: solid 1px #4e71f2;
}
#footer{
    width: 100%;
    height: 160px;
    text-align: center;
}
#footer img{
    margin-top: 15px;
    height: 150px;
    width: 720px;

}
posted @ 2020-05-09 11:54  rmxob  阅读(449)  评论(0)    收藏  举报