网页设计实验汇报3.docVIP

西 安 邮 电 大 学 （计算机学院） 网页设计课程实验报告 实验名称：第十三周实验 专业名称： 软件工程 班 级： 软件1305班 学生姓名： 高铭壑 学号（8位）： 指导教师： 孙韩林 实验日期： 2015年5月25日 实验目的及实验环境 实验目的： （1）掌握各类层叠样式表CSS 实验环境：Dreamweaver 实验内容 第92 页，例4.21；（背景和颜色属性） 第96 页，例4.25；（边框属性） 第99 页，例4.28；（绝对定位） 第100 页，例4.29；（相对定位） 第102 页，例4.30；（列表符号） （3） 外部样式表 第76 页，例4.3；（外部样式表） 测试数据及运行结果 例4.25 例4.28 例4.29 例4.30 例4.3 总结 通过本次上机实验，掌握了各类层叠样式表CSS，如嵌入式样式表和内部式样式表外部样式表等，掌握了颜色背景，定位等属性元素的应用，对网页编写能力有了很大提高。 源代码 1.例4.21 html xmlns=/1999/xhtml head style type=text/css p1{color:rgb(80%,0%,0%);} p2{color:#00ff00;} p3{color:blue;} /style /head body p1nbsp;通过rgb控制颜色额/p1 br / p2nbsp;通过十六进制数控制颜色/p2 br / p3nbsp;通过描述控制颜色/p3 /body /html 2.例4.25 html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title单个边框属性/title style type=text/css .d1{ border-top:5px solid #ff0000} .d2{ border-bottom:5px solid #ff0000} .d3{ border-left:5px solid #ff0000} .d4{ border-right:5px solid #ff0000} /style /head body div单个边框属性：/div br /br /div class=d1设置上边框用border-top/div br /br /div class=d2设置下边框用border-bottom/div br /br /div class=d3设置左边框用border-left/div br /br /div class=d4设置右边框用border-right/div /body /html 3.例4.28 html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title绝对定位/title style type=text/css !-- body{ margin:20px; font-family:Arial, Helvetica, sans-serif; font-size:15px; } #container{ background:#cccccc; border:1px thick #ff0000; width:200px; height:50px; } #content{ background:#00ffff; border:1px dashed #0000ff; position:absolute;/*绝对定位*/ left:30px; top:30px; } -- /style /head body div id=container div id=content绝对定位/div /div /body /html 4.例4.29 html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title相对定位/title style type=text