html5 布局

相比之前版本，更简单的布局，有语义的标签相当于内置了固定样式。

如图：

一个例子（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;
}

猜你喜欢