实验6 CSS3.doc

实验三 样式表制作三 实验内容： 为链接设置样式； 边框和定位； 盒子布局； 自学CSS课件和教程，完成上次课未完成的内容 三、使用盒子相关属性制作样式表，运用基本的盒子属性来改进页面的外观： 在浏览器和文本编辑器中打开jenware.html，看看工作内容，文档被分成三个div（“intro”、“testimonials”、“products”）。背景色被添加到body，testimonials和products中。还有背景图像沿着body元素的上部水平重复，使网页上部产生渐变效果（颜色淡出），testimonials左上角有一个感叹号图像。剩下的规则都是用来格式化文本的。 首先，给products的div元素添加填充。找到#products选择器并添加padding声明。 #products{ Padding: 2em; Background-color: #FFF; Line-height: 2em; } 然后，将testimonials的一部分应用一些奇异的效果。在div的左边清出一些空间，这样漂亮的感叹号背景就清晰可见了，很多方法可应用不同padding值到各个方向，我们使用下面的方法： #testimonials{ Padding: 1em; Padding-left: 60px; Background: #FFBC53 url(images/ex-circle-corner.gif) no-repeat left top; Line-height: 1.2em; } 保存文件，在浏览器中查看效果。 文本编辑器中打开jenware.html文档，开始，我们使用快捷border属性在testimonials部分周围添加橙色（#F26521）虚线，给“testimonials”div添加一个新的规则声明。 #testimonials{ Border: 1px dashed #F26521; Padding: 1em; Padding-left: 60px; Background: #FFBC53 url(images/ex-circle-corner.gif) no-repeat left top; Line-height: 1.2em; } 再给“products”区域添加规则，使之为更浅的橙色（#FFBC53）。 #products{ Border: double #FFBC53; Padding: 2em; Background-color: #FFF; Line-height: 2em; } 为了增加网页的趣味性和实用性，在products部分，我们将在标题的两个方向添加装饰边框。在“products”在div中查找h2元素已有的规则，并在标题上方添加1像素solid声明。再添加另一个声明，在左方添加3像素solid的规则。最后，为防止文本冲撞左边框，添加一些填充（1em）到标题内容。 #products h2{ Border-top: 1px solid; Border-left: 3px solid; Padding-left: 1em; Font-size: 1.2em; Color: #921A66; } 接着，用装饰底边来替换标题中用于连接文本的下划线。首先，通过在每个规则中设置text-decoration:none;，接着，添加1像素dotted边框到每个状态下的底边。最终的样式表规则如下： A:link,a:visited,a:hover,a:active{ text-decoration:none; border-bottom: 1px solid; padding-bottom: .25px;} A:link, a:active{ Color: #CC0000; } A:visited{color:#921A66;} A:hover{background-color: #FCF191; Color: #921A66;} 保存文件，在浏览器中查看效果。 文本编辑器中打开jenware.html文档，在浏览器窗口与内容的各方向添加空白。设置空白边为浏览器窗口宽度的12%，规则如下： Body{margin-left: 12%; Margin-right:12%; Font: 76% Verdana, sans-serif; Background: #FCF191 url(im