HTML+CSS实现简单静态网页的制作_简易html+css静态页面-优快云博客

本文链接：https://blog.youkuaiyun.com/xjx19991226/article/details/89295627

本文介绍了一个使用DIV进行分块布局的网页设计实例，包括HTML结构和CSS样式代码，展示了如何创建导航栏、新闻区块和页脚等元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图展示：
在这里插入图片描述
用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>