<html>
<head>
<meta charset="utf-8">
<title>使用结构元素进行网页布局</title>
</head>
<style type="text/css">
nav{
width: 1000px;
height: 40px;
background:#999;
border-radius: 5px;
}
nav li{
float: left;
width: 70px;
height: 40px;
line-height: 40px;
}
nav ul li a{ color: #fff; }
nav ul li a:hover{
color: #0000ff;
font-size: 20px;
}
a{
text-decoration: none;
font-family: KaiTi ;
font-size: 15px;
color: #000;
font-weight: bold;
}
li{
list-style-type:none;
}
.block1{
float: left;;
}
.block1 ul{
margin: 0 19px 10px 0;
width: 390px;}
.block2 ul{
margin: 0 0 10px 19px;
width: 390px;
}
.block1 ul li,
.block2 ul li
{
width:390px;
height: 40px;
}
.block1 ul li a,
.block2 ul li a
{
float: left;
}
.block1 ul li time,
.block2 ul li time{
float: right;
}
.block2{
float: right;
}
footer{
clear: both;
width: 1000px;
height: 200px;
margin: 0 auto;
text-align: center;
}
footer h1 span{
margin-right: 20px;
}
</style>
<body>
<div class="main" style="width: 1000px">
<head>
<nav>
<ul>
<li><a href="#">首页</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="#">科技</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">数码</a></li>
</ul>
</nav>
</head>
<div class="block1">
<section>
<h1 style="font-family:KaiTi; font-size:20px;text-indent: 1em" >娱乐新闻</h1>
<ul>
<li>
<a href="#">香港已没有黑帮，大家都不想在里面混</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">《碟中谍》曝外景地花絮</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">灾难发生后该不该禁播娱乐节目</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">多部好莱坞大片登陆中国</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
</ul>
</section>
</div>
<div class="block2">
<section>
<h1 style="font-family:KaiTi; font-size:20px;">军事新闻</h1>
<ul>
<li>
<a href="#"">香港已没有黑帮，大家都不想在里面混</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">《碟中谍》曝外景地花絮</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">灾难发生后该不该禁播娱乐节目</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">多部好莱坞大片登陆中国</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
</ul>
</section>
</div>
<div class="block1">
<section>
<h1 style="font-family:KaiTi; font-size:20px;text-indent: 1em" >数码新闻</h1>
<ul>
<li>
<a href="#">香港已没有黑帮，大家都不想在里面混</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">《碟中谍》曝外景地花絮</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">灾难发生后该不该禁播娱乐节目</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">多部好莱坞大片登陆中国</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
</ul>
</section>
</div>
<div class="block2">
<section>
<h1 style="font-family:KaiTi; font-size:20px;">手机新闻</h1>
<ul>
<li>
<a href="#"">香港已没有黑帮，大家都不想在里面混</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">《碟中谍》曝外景地花絮</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">灾难发生后该不该禁播娱乐节目</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
<li>
<a href="#">多部好莱坞大片登陆中国</a>
<time datetime="2015-10-1">2015-10-1</time>
</li>
</ul>
</section>
</div>
<footer>
<h1><span><a href="#">关于我们</a></span><span><a href="#">联系我们</a></span></h1>
</footer>
</div>
</body>
</html>
浙公网安备 33010602011771号