静态百度首页练习

*{
    margin:0;	
    padding:0;
}
#top{
    width:100%;
    height:40px;
}
.nav li{
    list-style-type:none;
    float:left;
    margin-left:20px;
    line-height:40px;
}
.nav li a {
    color:#333;
    font-size:14px;
}
.nav{
    width:500px;
    height:40px;
    float:right;
    text-align:center;
}
.nav ul a:hover{
    color:#000099;
}
.morePro a{
     background-color:#3385ff;
     color:#fff;
     text-decoration:none;
}
.morePro a:hover{
    color:#000;
    background-color:#fff;
}

.middle{
    width:600px;
    height:400px;
    margin:0 auto;
}
.logo img{
    width:265px;
    margin-left:170px;
    margin-top:20px;
}
.middle_item{
    margin-top:20px;
}
.middle_item div{
    float:left;
}
.inputTxt input{
    width:450px;
    height:30px;
    margin-left:30px
}
.icon{
    width:19px;
    height:19px;
    background-image:url(image/camera.png);
    margin-left:-30px;
    margin-top:8px;
}
.icon:hover{
    background-position:0px -57px;
    cursor:pointer;
}
.searchBtn a{
    width:100px;
    height:34px;
    display:block;
    text-decoration:none;
    font-size:15px;
    color:#fff;
    letter-spacing:1px;
    line-height:34px;
    text-align:center;
    background:#3385ff;
    cursor:pointer;
}


.footer {
    height:100px;
    width:100%;
    text-align:center;
}  
.about a {
    color: #808080;
    font-size: 12px;
    padding-right:27px;
}  
.info {
    margin-top:5px;
    font-size:12px;
    color:#808080;
}
.info a{
    color:#808080;
}
.copy{
    width:19px;
    height:19px;
    background-image:url(image/copyright.png);
    border:hidden;
}
.copy1{
    background-position:70px -10px;
}
.copy2{
    background-position:210px -10px;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/demo6.css" rel="stylesheet" />
    <title>百度一下，你就知道</title>
</head>
<body>
    <div id="top">
        <div class="nav">
            <ul>
                <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="#"><span style="font-weight:normal">登录</span></a></li>
                <li><a href="#"><span style="font-weight:normal">设置</span></a></li>
                <li class="morePro"><a href="#">更多产品</a></li>
            </ul>
        </div>
    </div>

    <div class="middle">
        <div class="logo"><img src="image/logo.png"></div>
        <div class="middle_item">
            <div class="inputTxt"><input type="text" /></div>
            <div class="icon"></div>
            <div class="searchBtn"><a href="#">百度一下</a></div>
        </div>
    </div>

    <div class="footer">
        <div class="about">
            <img src="image/code.png" alt=""><br>
            <a href="#">把百度设为主页</a>
            <a href="#">关于百度</a>
            <a href="#">About Baidu</a>
            <a href="#">百度推广</a>
        </div>
        <div class="info">
            <span>&copy;2018 Baidu</span>
            <a href="#">使用百度前必读</a>
            <a href="#">意见反馈</a>
            <span>京ICP证030173号</span>
            <input class="copy copy1" /> <a href="#">京公网安备11000002000001号</a>
            <input class="copy copy2">
        </div>
    </div>
</body>
</html>

这是改正过后的

静态百度首页练习

猜你喜欢