实验二文章排版.doc

实验名称实验二实验目的掌握使用CSS进行文本与段落排版的基本方法，学会使用盒子模型进行定位和布局。 学会确定网页的逻辑结构，并用div实现。 学会使用浮动布局实现两栏设计的基本方法。实验设备安装了Visual Web Developer 2010的计算机一台 使用绘图绘制4个圆角图片。 实验日期2013.3.28实验预习 1.预习div块的使用方法。 实验内容 (原理、方法、框图) 1.实现圆角框 2.文章排版。 3.实现两栏页面布局设计。实验过程（步骤、实现代码） 实现圆角框 将代码输入新网页的body元素中。 紧接着给页面定义相关的样式类。 将实现准备好的4个圆角图片加入到网站项目中，放置到网站项目中，放置在与HTML网页相同的文件夹下。 测试网页是否正确的显示了圆角框。 使用相同的办法，在页面中“复制”几个一模一样的圆角框，显示不同的内容。 html xmlns=/1999/xhtml head style type=text/css .right_top { background:#cba276 url(right-top.gif) no-repeat right top; padding:0 margin:0 auto; } .left_top { background:url(left-top.gif ) no-repeat left top; padding:20px 20px 0; font-size:1.7em; color:#FFF; margin:0; } .left_bottom { margin:0; text-indent:2em; background:url(left-bottom.gif) no-repeat left bottom; } div class=right_top div class=left_top 不?定¨宽í度è的?圆2角?框ò /div div class=left_bottom div class=right_bottom 这a是?一?个?不?定¨狂?度è的?圆2角?框ò /div /div /div /body /html .right_bottom { padding:10px 20px 18px; color:#1B220F; background:url(right-bottom.gif) no-repeat right bottom; } /style /head body div class=right_top div class=left_top 不?定¨宽í度è的?圆2角?框ò /div div class=left_bottom div class=right_bottom 这a是?一?个?不?定¨狂?度è的?圆2角?框ò /div /div /div /body /html 文章排版 1.将纯文本文件在每个段落前后加上p和/p以实现换行，根据要求完成作品，设计出网页结构，然后使用div块元素给文章分块。 2.根据要求完成最终成品，设计出网页的逻辑结构。 3.对照最终的效果图编写CSS定制网页中各元素的样式，可以通过ID选择器来设计div元素的样式规则。 4.在浏览器中测试网页。 html xmlns=/1999/xhtml head title/title style type=text/css #title { text-align: center; font-size: 3em;  margin: 10px; font-family: Times New Roman , Times, serif; font-style: italic; background-color: #CCCCFF; border: 1px blue dotted; } p {