web-个人博客

最新推荐文章于 2023-05-09 19:40:42 发布

夏目贵志_

最新推荐文章于 2023-05-09 19:40:42 发布

阅读量793

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/m0_58813405/article/details/122280261

版权

该博客展示了如何使用HTML5的语义化标签，如

、

摘要由CSDN通过智能技术生成

结合HTML5的语义化标签，使用DIV+CSS网页布局技术设计一个个人博客页面。要求：（1）header标签定义页面头部区；nav标签定义导航区；div标签定义中部的内容区块，其中左边用section标签嵌套两篇article文章区，每篇文章区应含有头部的标题区、段落内容和页脚；右边用aside设计侧栏；底部用footer标签定义版权信息。如下图所示。

（2）编写外部CSS文件，为主文件中用到的各个标签属性进行样式设置，如背景色，字体，字号大小，对齐方式等。

（3）用无序表实现水平导航菜单，关键点：消除无序列表前的项目符号，将默认的垂直排列转换为水平排列。

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>编辑于2022.1</a3>
				</article1>
				<article2>
					<a1>CSS3</a1>
					<a2>对于前端设计师来说,虽然CSS3不全是新的技术，但它却重启了一扇奇思妙想的窗口。</a2>
					<a3>编辑于2022.1</a3>
				</article2>
			</section>
			<aside>
				<h2>简介</h2></br>
				<p><span>HTML5和CSS3</span>正在掀起一场变革，它不是在替代Flash，而是正在发展成为开放的Web平台，不但在
					移动领域建功卓著，而且对传统的应用程序发起挑战。</p>
			</aside>
		</div>
		<footer>版权所有2022</footer>
	</body>
	<html>

css代码：

* {
	padding: 0;
	margin: 0;
	font-family: "仿宋";
	color: #750075;
}

header {
	width: 500px;
	height: 70px;
	font-size: 60px;
	font-weight: bold;
	margin: 1px auto;
	color: #68228B;
}

nav {
	width: 2000px;
	height: 40px;
	background-color: rgba(255, 182, 193, 0.5);
	font-size: 30px;
	padding-left: 20px;
	padding-top: 5px;
}

div {
	width: 2000px;
	height: 500px;
	float: left;
}

aside {
	width: 240px;
	height: 350px;
	background-color: rgba(255, 130, 171, 0.4);
	border-radius: 10px;
	margin: 20px 20px;
	float: left;
	font-size: 20px;
	padding: 35px;
}

section {
	width: 1000px;
	height: 400px;
	margin: 20px 20px;
	float: left;
}



article1 {
	width: 1000px;
	height: 200px;
	border: 2.5px solid #FFB6C1;
	border-radius: 10px;
	float: left;
}

article2 {
	width: 1000px;
	height: 200px;
	border: 2.5px solid #FFB6C1;
	border-radius: 10px;
	margin-top: 10px;
	float: left;
}




footer {
	width: 1000px;
	height: 30px;
	border-top: 5px solid #FFC0CB;
	clear: both;
	margin: auto;
	padding: 0px 720px;
	font-size: 20px;
}
a1 {
	width: 900px;
	height: 50px;
	border-bottom: 2.5px dotted #FFB6C1;
	float: left;
	margin: 0px 10px;
	font-size: 30px;
	font-family: "comic sans ms";
}
a2 {
	width: 900px;
	height: 90px;
	border-bottom: 2px solid #FFB6C1;
	float: left;
	margin: 20px 10px 0px 10px;
	font-size: 25px;
}
a3 {
	width: 925px;
	height: 30px;
	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;
}