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