代码改变世界

简单的网页搭建

2016-09-13 16:47  甘雨路  阅读(252)  评论(0)  编辑  收藏  举报 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下</title>
    <link href="CSS/baidu.css" rel="stylesheet">
    <style>
        /*.more-product{*/
            /*background-color: blue;*/
            /*color: white;*/
        /*}*/
    </style>
</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-product">更多产品</a>
</div>
<!--内容-->
<div id="content">
    <img src="images/bd_logo.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">
            c2016 Baidu
            <a href="#">使用百度前必读</a>
            <a href="#">意见反馈</a>
            京ICP证030173号
            <img src="images/copy_rignt_24.png">
        </div>

    </div>

</body>
</html>

 

/* baidu.css文件的代码*/
body{
    /*background: url("../images/me.jpg");*/
    /*background-size: cover;*/
}

#header{
    text-align: right;
}

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

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

#header a.more-product{
    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: 30px;
    margin-bottom: 250px;
}
#comment 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;
}

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

#footer .footer-header a{
    color:  #00c;
    font-size: 12px;
    margin:  0px 5px;
}

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

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

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