H5 笔记（百度首页）

index.css

body{
    background: url("../image/bg.jpg");
    background-size: cover;
}

#header{
    text-align: right;
}

#header a{
    color: #333;
    font-family: "arial";
    font-size: 13px;
    margin: 10px 7px;
    font-weight: bolder;
}

#header a.no-weight{
    font-weight: normal;
}

#header a.more-prodcuct{
    background-color: #3385ff;
    border: 1px solid #2d78f4;
    color: white;
    text-decoration: none;
    display: inline-block;
    width: 65px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

#content{
   text-align: center;
   margin-top: 130px;
   margin-bottom: 450px;
}

#content img{
    width: 270px;
    height: 129px;
}

#content input{
    width: 500px;
    height: 25px;
    padding: 5px;
    padding-bottom: 2.5px;
    border: 1px solid #ddd;
    outline: none;
}

#content input:focus{
    border-color: #2d78f4;
}

#content a{
    background-color: #3385ff;
    border: 1px solid #2d78f4;
    color: white;
    text-decoration: none;
    display: inline-block;
    width: 100px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin-left: -5px;
    border: 1px solid #2d78f4;
}

#footer{
    text-align: center;
    font-size: 12px;
}

#footer .footer-header{
    margin-bottom: 10px;
}

#footer .footer-header a{
    color: #00c;

    margin: 0px 5px;
}

#footer .footer-bottom{
    color: #666;
}

#footer .footer-bottom a{
    color: #666;
}

#footer .footer-bottom img{
    width: 14px;
    height: 17px;
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百度一下,你就知道</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
   <!--头部-->
   <div id="header">
       <a href="#">新闻</a>
       <a href="#">hao123</a>
       <a href="#">地图</a>
       <a href="#">视频</a>
       <a href="#">贴吧</a>
       <a href="#" class="no-weight">登录</a>
       <a href="#" class="no-weight">设置</a>
       <a href="#" class="more-prodcuct">更多产品</a>
   </div>
   <!--主要内容-->
   <div id="content">
       ![](image/logo2.png)
       <div>
           <input>
           <a href="#">百度一下</a>
       </div>
   </div>
   <!--尾部-->
   <div id="footer">
       <div class="footer-header">
           <a href="#">把百度设为主页</a>
           <a href="#">关于百度</a>
           <a href="#">About  Baidu</a>
       </div>
       <div class="footer-bottom">
           ©2015 Baidu  <a href="#">使用百度前必读</a>  <a href="#">意见反馈</a> 京ICP证030173号
           ![](image/copy_rignt_24.png)
       </div>
   </div>
</body>
</html>

H5 笔记（百度首页）

推荐阅读更多精彩内容