主要是将一张图片一网页的显示展现出来以练习HTML5中基本样式的学习，先是图片头部的一些设计~
505.html
<html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>505教室</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <a class="logo" href="#"></a> <div class="nav"> <ul> <li><a class="active" href="">首页</a></li> <li><a href="">专题</a></li> <li><a href="">创新科技</a></li> <li><a href="">学堂在线</a></li> <li><a href="">论坛</a></li> </ul> </div> <div class="login"> <a class="back1" href="#">注册</a> <a class="back2" href="#">登录</a> </div> <div class="clear"></div> <div class="div1"></div> </header> <!-- <footer> 版权所有983249284098009809809809809 </footer> --> </body> </html>
style.css
@charset "utf-8";
html , body , header , a , ul , li {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
.clear {
clear: both;
}
header {
height: 104px;
background: #40485f;
}
.logo {
background: url(../image/logo.png);
height: 60px;
width: 144px;
display: block;
margin-top:5px;
margin-left: 70px;
float: left;
}
.login {
float: right;
margin-top: 16px;
margin-right: 64px;
}
.login a {
height: 42px;
width: 74px;
display: block;
color: #fff;
float: left;
line-height: 42px;
text-align: center;
text-decoration: none;
}
.back1 {
background: #20B5F5;
}
.back2 {
background: #FE8500;
margin-left: 20px;
}
.nav {
float: left;
margin-left: 125px;
}
.nav ul li {
float: left;
}
.nav ul li a {
color: #fff;
font-size: 14px;
text-decoration: none;
display: block;
height: 74px;
line-height: 74px;
padding: 0 25px;
text-align: center;
}
.nav ul li a:hover , .active {
background: #013057;
}
footer {
height: 30px;
background: #000;
color: #fff;
}
.div1 {
height: 30px;
background: red;
}
运行效果：
原文：http://www.cnblogs.com/haixiaomei/p/5011552.html