圆角设置(盒子模型_Asp).docVIP

.word可编辑. . 专业.专注 . 实验名称 实验二 实验目的 1.深入理解盒子模型。 2.掌握使用CSS 进行文本与段落排版的基本方法，学会使用盒子模型进行定位和布局。 实验设备 1.一台安装好Visual Web Developer 的计算机 . 2.使用绘图工具绘制的四个圆角图片 3.包含有文章内容的纯文本文件“HTML_XML.txt”，或任意一个有一定量文字的短文。 实验日期 3.26 一、实验预习 1.理解盒子模型。 2.掌握使用CSS 进行文本与段落排版的基本方法，学会使用盒子模型进行定位和布局。 二、实验内容 (原理、方法、框图) 1. 圆角框是通过显示四个小图片实现的，这里面的关键是CSS支持将特定的背景放置于一个盒子的上、下、左、右四个角上，但一个盒子只能设置一个背景图片，因此，示例使用了嵌套了三层的四个div块。 2. 四个div块显示的圆角图片顺序和位置必须与图 3-3一致，才能正确显示出圆角框。 3. 最外层的div 块的背景色设置成与圆角图片颜色一致。这样就实现了圆角框高度和宽度的自动延伸。 三、实验过程（步骤、实现代码） 实验1： 一、实验步骤： 1. 在Visual Web Developer 中新创建一个网站。 2. 向网站中添加一个新的HTML 网页。 3. 将以下内容输入到新网页的body元素中，注意其中已设置了一些样式类： 4. 紧接着给页面定义相关的样式类，这四个样式类用于设置圆角框四个角的背景图像。 5. 将事先准备好的四个圆角图片加入到网站项目中，放置在与HTML网页相同的文件夹下。 6. 测试网页是否正确地显示了圆角框。 7. 使用同样的方法，在页面中“克隆”几个一模一样的圆角框，显示不同的内容。 实现代码： head title圆角设置/title 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; 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; } .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 /div div class=left_bottom div class=right_bottom 实例 hhhhhhhhhhhhhhhhhhhhhhhhhhhhh /div /div /div /body /html 实验2： 实验步骤： 1. 使用Visual Web Developer创建一个新网站。 2. 向网站中添加一个新的HTML网页，从提供的纯文本文件“HTML_XML.txt”中复制文章内容到网页上。在每个段落前后加上p和/p以实现换行。 3. 根据要完成的最终成品，设计出网页的逻辑结构，然后使用div块元素给文章分块，参看以下网页框架： 4. 对照最终的效果图编写CSS定制网页中各元素的样式，可以通过ID选择器来设计div元素的样式规则。 5. 在浏览器中测试网页 实验代码： html head meta http-equiv=Content-Type content=text/html; charset=gb2312 title无标题文档/title style type=text/css #container{ margin: 0 auto; width: 700px; borde