前端知识——HTML+CSS简单布局项目

颜色表资料:

颜色代码表

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
    <div class="header_top">
        <div class="wp">
            <div class="z">
                <span><a href="">设为首页</a></span>
                <span><a href="">收藏本站</a></span>
            </div>
            <div class="y">
                <span>天气</span>
                <span class="mg0_right">时间</span>
            </div>
        </div>
    </div>
    <div class="logos">
        <div class="wp">
            <div class="logo_body">
                <div class="logo"></div>
                <div class="sousuo"></div>
                <div class="lianxi"></div>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="wp">
            <div class="nav_body"></div>
        </div>
    </div>
</div>
<div class="wp">
    <div class="center">
        <div class="ad"></div>
        <div class="jianjie z"></div>
        <div class="xinwen y"></div>
        <div class="c"></div>
        <div class="chanping c"></div>
    </div>
</div>
<div class="footer">
    <div class="footer_top"></div>
    <div class="footer_bottom"></div>
</div>
</body>
</html>

CSS代码:

*{margin: 0;padding: 0;}
body{font: 14px/24px '微软雅黑';background-color: #d8d8d8}
.wp{width: 960px;margin: 0 auto;}
.z{float: left;}
.y{float: right;}
.c{clear: both}
.mg0_top{margin-top: 0;}
.mg0_bottom{margin-bottom: 0;}
.mg0_right{margin-right: 0;}
.mg0_left{margin-left: 0;}

.header_top{width: 100%;height: 24px;background: Black;}
.header_top a:hover{color: #f60;}
.header_top span{color: #d8d8d8;margin-right: 10px;}
.header_top a{color: #d8d8d8;}
.header_top .mg0_right{margin: 0;}

.logo_body{width: 960px;height: 80px; background-color: #1E90FF;position: relative}
.logo{
    width: 160px;
    height: 60px;
    background-color: #4682B4;
    position: absolute;
    top: 12px;
    left: 0px;
}
.sousuo{
    width: 300px;
    height: 60px;
    background-color: #4682B4;
    position: absolute;
    top: 12px;
    right: 350px;
    /*margin-right: 20px;*/
}
.lianxi{
    width: 300px;
    height: 60px;
    background-color: #4682B4;
    position: absolute;
    top: 12px;
    right: 0px;
}

.nav{
    background-color: #a00002;
}
.nav_body{
    width: 960px;
    height: 50px;
}

.ad{
    width: 960px;
    height: 300px;
    background-color: #00FFFF;
}
.jianjie{
    width: 550px;
    height: 280px;
    background-color: #5F9EA0;
}
.xinwen{
    width: 410px;
    height: 280px;
    background-color: #7FFFAA;
}
.chanping{
    width: 960px;
    height: 280px;
    background-color: #FAFAD2;
}

.footer{
    width: 100%;
    height: 130px;
    background-color: #a00002;
}

效果图:

发表评论

邮箱地址不会被公开。