结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面

最新推荐文章于 2024-11-01 15:19:31 发布

参小旗的小饼干～

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量4.4k

点赞数 16

分类专栏：笔记文章标签： html css web

本文链接：https://blog.csdn.net/qq_45864164/article/details/109963376

版权

笔记专栏收录该内容

1 篇文章 1 订阅

订阅专栏

CSS+DIV页面布局

结合HTML5的语义化标签，运用DIV+CSS网页布局技术设计一个个人博客页面。要求：
（1）header标签定义页面头部区；nav标签定义导航区；div标签定义中部的内容区块，其中左边用section标签嵌套两篇article文章区，每篇文章区应含有头部的标题区、段落内容和页脚；右边用aside设计侧栏；底部用footer标签定义版权信息，如图2.1所示。
（2）编写外部CSS文件，为主文件中用到的各个标签属性进行样式设置，如背景色，字体，字号大小，对齐方式等。
（3）用无序表实现水平导航菜单，关键点：消除无序列表前的项目符号，将默认的垂直排列转换为水平排列。
（4）设置导航菜单的超链接样式，关键点：链接目标为#，设置鼠标悬停在导航栏中的热字上时背景色的变化。

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小饼干的博客</title>
		<link rel="stylesheet" href="个人博客界面设计.css" type="text/css">
	</head>
	<body background="小兔.jpg";
		  style=" background-repeat:no-repeat ;
		  background-size:100% 100%;
		  background-attachment: fixed;">
		<header>小饼干的博客</header>
		<nav>
			<ul>
				<li><a href="#" style="text-decoration: none;">首页</a><li>&nbsp;
				<li><a href="#" style="text-decoration: none;">博文</a><li>&nbsp;
				<li><a href="#" style="text-decoration: none;">相册</a><li>&nbsp;
				<li><a href="#" style="text-decoration: none;">个人档案</a><>
			</ul>
		</nav>
		<div>
			<section>
				<article1>
					<a1>HTML5</a1>
					<a2>HTML5是下一代HTML的标准,目前仍然处于发展阶段。经过了Web2.0时代,基于互联网的应用已经越来越丰富,同时也对互联网应用提出了更高的要求。</a2>
					<a3>编辑于2020.11</a3>
				</article1>
				<article2>
					<a1>CSS3</a1>
					<a2>对于前端设计师来说,虽然CSS3不全是新的技术，但它却重启了一扇奇思妙想的窗口。</a2>
					<a3>编辑于2020.11</a3>
				</article2>
			<ction>
			<aside>
				<h1>简介</h1></br>
				<p><span>HTML5和CSS3</span>正在掀起一场变革，它不是在替代Flash，而是正在发展成为开放的Web平台，不但在
				移动领域建功卓著，而且对传统的应用程序发起挑战。</p>
			</aside>
		</div>
		<footer>版权所有2020</footer>
	</body>
<html>

css代码：

*{
	padding:0;
	margin:0;
	font-family: "仿宋";
	color: #5D478B;
}
			header{
				width: 500px;
				height: 80px;
				font-size: 70px;
				font-weight: bold;
				margin:1px auto;
				color: #68228B;
			}
			nav{
				width: 2000px;
				height: 45px;
				background-color: rgba(255,182,193,0.5);
				font-size: 32px;
				padding-left: 20px;
				padding-top: 5px;
			}
			
            div{
				width: 2000px;
				height: 520px;
				float: left;
			}

			aside{
				width: 260px;
				height: 410px;
				background-color: rgba(255,130,171,0.4);
				border-radius: 10px;
				margin:20px 20px;
				float: left;
				font-size: 25px;
				padding: 35px;
			}
			section{
				width: 1125px;
				height: 500px;
				margin:20px 20px;
				float: left;
			}
			
			
			
			article1{
				width: 1125px;
				height: 225px;
				border:2.5px solid 	#FFB6C1;
				border-radius: 10px;
				float: left;
			}
			article2{
				width: 1125px;
				height: 235px;
				border:2.5px solid 	#FFB6C1;
				border-radius: 10px;
				margin-top: 10px;
				float: left;
			}
			
			
			
			
			footer{
				width: 1600px;
				height: 30px;
				border-top: 5px solid #FFC0CB;
				clear: both;
				margin: auto;
				padding: 0px 720px;
				font-size: 20px;
			}
                                                
												
						
						
			a1{
				width: 1100px;
				height: 60px;
				border-bottom: 2.5px dotted #FFB6C1;
				float: left;
				margin: 0px 10px;
				font-size: 50px;
				font-family: "comic sans ms";
			}
			a2{
				width: 1100px;
				height: 100px;
				border-bottom: 2px solid #FFB6C1;
				float: left;
				margin: 20px 10px 0px 10px;
				font-size: 25px;
			}
			a3{
				width: 1125px;
				height: 35px;
				float: left;
				margin: 10px 10px;
				font-size: 18px;
			}
			span{
				color: #FF1493;
			}
			
			ul{
				list-style-type: none;
			}
			
			li{
				display: inline-block;
			}
			li:hover{
				background-color: #FF3E96;
				border-radius: 10px;
			}