? ? ? 结合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>
<li><a href="#" style="text-decoration: none;">博文</a>
<li>
<li><a href="#" style="text-decoration: none;">相册</a>
<li>
<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;
}