效果图展示：
用DIV分块布局
html代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>网站首页</title><link rel="stylesheet" type="text/css" /></head><style>li {list-style-type:none;}.main{width: 1000px;margin: 40px auto;}.main nav{width: 1000px;height: 40px;background: #999;border-radius: 5px;}.main nav ul li{width: 70px;height: 40px;float: left;text-align: center;line-height: 40px;}.main nav ul li a{color: #fff;font-family: "微软雅黑";font-size: 14px;}.main nav ul li a:hover{font-weight: bold;}.main .blockl{width: 430px;height: 250px;margin-top: 20px;float: left;}.main .block2{width: 430px;height: 250px;margin-top: 20px;float: right;}.main .blockl h1,.main .block2 h1{color: #333;font-size: 20px;font-family: "微软雅黑";line-height: 50px;text-indent: lem;}.main .blockl ul,.main .block2 ul{width: 390px;margin: 0 19px 10px 19px;}.main .blockl ul li,.main .block2 ul li{width: 390px;height: 40px;}.main .blockl ul li a,.main .blockl ul li time,.main .block2 ul li a,.main .block2 ul li time{color: #333;font-size: 14px;font-family: "微软雅黑";line-height: 40px;text-decoration: none;}.main .blockl ul li a,.main .block2 ul li a{float: left;}.main .blockl ul li a:hover,.main .block2 ul li a:hover{color: red;}.main .blockl ul li time,.main .block2 ul li time{float: right;}footer{clear: both;width: 1000px;height: 200px;margin: 0 auto;text-align: center;}footer h1 span{margin-right: 20px;}footer h1 span a{color: #333333;font-family: "微软雅黑";font-size: 14px;line-height: 200px;}footer h1 span a:hover{color: red;}</style><body><div class="main"><p><a id="File Top"></a> </p><header><nav><ul><li><a href="#" style="color: red;">首页</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></header><div class="blockl"><section><h1>娱乐新闻</h1><ul><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li></ul></section></div><div class="block2"><section><h1>军事新闻</h1><ul><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li></ul></section></div><div class="blockl"><section><h1>数码新闻</h1><ul><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li></ul></section></div><div class="block2"><section><h1>手机新闻</h1><ul><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li><li><a href="#">新闻标题</a><time datetime="2018-10-1">2018-10-1</time></li></ul></section></div></div><footer><h1><span><a href="#">关于我们</a> </span><span><a href="#">联系我们</a> </span> </h1></footer></body>
</html>
