HTML+CSS实现简单静态网页的制作

最新推荐文章于 2024-05-20 16:41:52 发布

波比波

最新推荐文章于 2024-05-20 16:41:52 发布

阅读量3k

点赞数 8

分类专栏： Web前端

本文链接：https://blog.csdn.net/xjx19991226/article/details/89295627

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

波比波

关注

8
点赞
踩
38

收藏

觉得还不错? 一键收藏
6
评论
HTML+CSS实现简单静态网页的制作

用DIV分块布局。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>201731061203+许嘉欣</title> <link rel="stylesheet" type="text/css" /> </h...
复制链接

扫一扫