相比之前版本,更简单的布局,有语义的标签相当于内置了固定样式。
如图:
一个例子(li标签是最不利于搜索引擎搜索到的标签,图片轮播的话,最好用li)。
html 结构:
<!DOCTYPE html>
<html>
<head>
<title>layoutTest</title>
<meta charset="utf-8">
</head>
<body>
<header>
<div class="container">
<a href="#">
<img src="" alt="logo">
</a>
<nav>
<a href="#">Home</a>
<a href="#">Course</a>
<a href="#">Actual</a>
<a href="#">Plan</a>
<a href="#">FAQ</a>
<a href="#">Notes</a>
</nav>
</div>
</header>
<section class="banner">
<ul>
<li><img src="" alt="img1"></li>
<li><img src="" alt="img2"></li>
<li><img src="" alt="img3"></li>
</ul>
</section>
<section class="main">
<aside>
<h1> Recent <samp>Course</samp></h1>
<dl>
<dt>Title1</dt>
<dd><img src="" alt="img1"></dd>
<dd>details</dd>
</dl>
<dl>
<dt>Title2</dt>
<dd><img src="" alt="img2"></dd>
<dd>details</dd>
</dl>
<dl>
<dt>Title3</dt>
<dd><img src="" alt="img3"></dd>
<dd>details</dd>
</dl>
<dl>
<dt>Title4</dt>
<dd><img src="" alt="img4"></dd>
<dd>details</dd>
</dl>
</aside>
<article>
<h1>Welcome to <samp>Here</samp></h1>
<p>p111</p>
<img src="" alt="img1">
<p>p222</p>
</article>
</section>
<footer>
<p>copyright</p>
<span>
<img src="" alt="img1">
<img src="" alt="img2">
<img src="" alt="img3">
</span>
</footer>
</body>
</html>
css 样式【csscomb插件,可以对css代码进行美化】:
*{
margin:0;
padding:0;
font-family: Arial;
font-size:14px;
border:none;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
header{
height: 80px;
background:#000;
}
header > .container{
width: 1200px;
margin:0 auto;
}
header > .container > a{
display: block;
float: left;
margin:5px 25px;
}
header > .container > nav{
float: right;
}
header > .container > nav > a{
font-size: 24px;
display: block;
float: left;
width: 110px;
height: 73px;
line-height: 73px;
text-align: center;
color: #fff;
}
header > .container > nav > a.home{
background: #433b90;
}
header > .container > nav > a.course{
background: #017fcb;
}
header > .container > nav > a.actual{
background: #78b917;
}
header > .container > nav > a.plan{
background: #feb800;
}
header > .container > nav > a.faq{
background: #f27c01;
}
header > .container > nav > a.notes{
background: #d40112;
}
header > .container > nav > a:hover,
header > .container > nav > a.active
{
padding-bottom: 7px;
}
.banner{
background: #eaeaea;
}
.banner > ul{
position: relative;
width: 1490px;
height: 538px;
/*居中*/
margin:0 auto;
padding-top: 10px;
}
.banner > ul > li{
position: absolute;
width: 610px;
height: 300px;
overflow: hidden;
}
.banner > ul > li.active{
z-index: 2;
top: 37px;
/*拔河效应,居中*/
right: 0;
width: 960px;
height: 460px;
margin:auto;
border:1px solid #fff;
}
.banner > ul > li.left{
z-index: 1;
top: 0;
bottom: 0;
left: 0;
margin:auto;
}
.banner > ul > li.right{
z-index: 1;
top: 0;
bottom: 0;
right: 0;
margin:auto;
}
.banner > ul > li > img{
position: absolute;
left: -30%;
height: 100%;
}
.main{
width: 1200px;
height: 473px;
margin:34px auto 0;
}
.main h1{
font-size: 30px;
font-weight: lighter;
margin-bottom: 23px;
}
.main h1 > samp{
font-size: 30px;
color: #7c7c7c;
}
.main > aside{
float: left;
width: 450px;
}
.main > article{
float: right;
width: 720px;
overflow: hidden;
}
.main > aside >dl{
position: relative;
display: block;
height: 74px;
margin-bottom: 17px;
}
.main > aside > dl > dt{
position: absolute;
top: -1px;
left:92px;
font-size: 16px;
font-weight: bold;
line-height: 16px;
text-decoration: underline;
}
.main > aside > dl > dd:first-of-type{
position: absolute;
left: 0;
}
.main > aside > dl > dd:last-of-type{
position: absolute;
top: 20px;
left: 90px;
}
.main > article > p,
.main > article > img{
margin-bottom: 20px;
}
footer{
background: #000;
}
footer > .container{
width: 1200px;
height: 64px;
margin:0 auto;
}
footer > .container > p{
line-height: 64px;
float: left;
color:#fff;
}
footer > .container > span{
float: right;
margin:14px 40px;
}
footer > .container > span > img{
margin-left: 4px;
opacity: 0.7;
}
footer > .container > span > img:hover{
opacity: 1;
cursor: pointer;
}