【实验目的与要求】
1．理解网页内容和表现的分离；
2．熟悉CSS的基本语法和格式；
3．了解页面常用布局结构；
4. 学会用CSS+DIV布局制作一个博客页面。
【实验内容】
结合HTML5的语义化标签，使用DIV+CSS网页布局技术设计一个个人博客页面。要求：
（1）header标签定义页面头部区；nav标签定义导航区；div标签定义中部的内容区块，其中左边用section标签嵌套两篇article文章区，每篇文章区应含有头部的标题区、段落内容和页脚；右边用aside设计侧栏；底部用footer标签定义版权信息。
（2）编写外部CSS文件，为主文件中用到的各个标签属性进行样式设置，如背景色，字体，字号大小，对齐方式等。
（3）用无序表实现水平导航菜单，关键点：消除无序列表前的项目符号，将默认的垂直排列转换为水平排列。
{ 页面实现 （参考）}：
<html>
<head>
<link rel="stylesheet" type="text/css" href="./实验二.css"/>
</head>
<body background="http://img1.tcdachun.com/161104/330522-16110415305398.jpg">
<div>
<header>张三的博客</header>
<nav class="menu">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="#">博文</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">个人档案</a></li>
</ul>
</nav>
<main>
<section>
<h1>HTML5</h1>
<hr>
<h2>HTML5是下一代HTML的标准，目前仍然处于发展阶段。经过Web2.0时代，基于互联网的应用已经越来越丰富，同时也对互联网应用提出了更高的要求。</h2>
<hr>
<h3><font color=grey size=2px>编辑于2018.9</font></h3>
</section>
<aside>
<h1>简介</h1><br>
<h2><font color=blue>HTML5和CSS3</font>正在掀起一场变革，它不是在替代Flash，而是正在发展成为开放的Web平台，不但在移动领域建功卓著，而且对传统的应用程序发起挑战。</h2>
</aside>
<section>
<h1>CSS3</h1>
<hr>
<h2>对于前端开发师来说，虽然CSS3不全是新的技术，但它却重启了一扇奇思妙想的窗口。</h2>
<hr>
<h3><font color=grey size=2px>编辑于2018.9</font><h3>
</section>
</main>
<footer><hr><font color=grey size=2px>版权所有2018</font></footer>
</div>
</body>
</html>
{ 页面效果 }：
扫一扫
2277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
