实验五-CSS-综合应用

常熟理工学院计算机科学与工程学院实验报告学年第学期课程名称专业班级学号姓名实验地点指导老师实验报告要求1．在实验课前要认真预习实验内容，熟习实验的原理、方法及算法等。2．根据实验指导书要求，认真完成实验内容；实验结束后，按照实验报告的要求认真填写相关内容。3．实验时要带好实验指导书、实验报告本。4．实验时要严肃认真，不得互相抄袭。5．实验课的成绩由实验预习、实验过程、实验结果和实验报告四部分构成。实验名称实验五CSS综合应用实验目的1．理解CSS的常用属性及其各项值的含义；2．熟练运用CSS设计精美的页面。实验设备PC机实验日期2016.4.14一、实验预习二、实验内容(原理、方法、框图)1．CSS属性定义的缩写方法。三、实验过程（步骤、实现代码）1．利用CSS对文字体属性的设置完成图5.1显示样式，其中：标题设置为隶书、加粗、48px、红色，作者设置为宋体、倾斜、24px、#cc9900，正文设置为宋体、32px、蓝色；htmlxmlns==Content-Typecontent=text/html;charset=utf-8/title无标题文档/titlestyletype=text/css#p1{text-align:center;color:#F00;font-family:隶书;font-size:48px;font-weight:bold;}#p2{text-align:center;font:family:宋体;font-size:24px;color:#cc9900;font-style:italic;}#p3{font-family:宋体;font-size:32px;color:#00F;text-align:center;}/style/headbodypid=p1《登鹳鹊楼》/ppid=p2王之涣/ppid=p3白日依山尽,黄河入海流。欲穷千里目,更上一层楼。/ppid=p1《相思》/ppid=p2王维/ppid=p3红豆生南国，春天发几枝。愿君多采撷，此物最相思。/p/body/html1．利用CSS对文本属性的设置完成图5.2显示样式。htmlxmlns==Content-Typecontent=text/html;charset=utf-8/title无标题文档/titlestyletype=text/css#p1{text-align:center;}#p2{line-height:10%;}#p3{text-decoration:overlineunderline;}#p4{text-indent:0.75cm;}/style/headbodypid=p1文字居中/ppid=p2行高定义为10%/ppid=p3文字同时显示上划线和下划线/ppid=p4首行缩进0.75cm/p/body/html1．利用CSS盒模型完成图5.3显示样式。其中：div的宽度为450px、高度为50px、背景浅灰色，边界上下10px、左右auto；边框为红色、50px的实线；填充边距上下左右均为10px。htmlxmlns==Content-Typecontent=text/html;charset=utf-8/title无标题文档/titlestyletype=text/css#div{width:450px;height:50px;background-color:#CCC;border-style:solid;border-color:#F00;margin:10x;}/style/headbodydivid=div最接近标记府内容的是填充，接下来是边框，然后是边界。/div/body/html四、实验结果（遇到的问题及解决方法）五、心得体会(实验收获)实验预习20%实验过程20%实验结果30%实验报告30%成绩日期实验名称实验实验目的实验设备实验日期一、实验预习二、实验内容(原理、方法、框图)三、实验过程（步骤、实现代码）四、实验结果（遇到的问题及解决方法）五、心得体会(实验收获)实验预习20%实验过程20%实验结果30%实验报告30%成绩日期实验名称实验实验目的实验设备实验日期一、实验预习二、实验内容(原理、方法、框图)三、实验过程（步骤、实现代码）四、实验结果（遇到的问题及解决方法）五、心得体会(实验收获)实验预习20%实验过程20%实验结果30%实验报告30%成绩日期实验名称实验实验目的实验设备实验日期一、实验预习二、实验内容(原理、方法、框图)三、实验过程（步骤、实现代码）四、实验结果（遇到的问题及解决方法）五、心得体会(实验收获)实验预习20%实验过程20%实验结果30%实验报告30%成绩日期实验名称实验实验目的实验设备实验日期一、实验预习二、实验内容(原理、方法、框图)三、实验过程（步骤、实现代码）四、实验结果（遇到的问题及解决方法）五、心得体会(实验收获)实验预习20%实验过程20%实验结果30%实验报告30%成绩日期实验名称实验实验目的实验设备实验日期一、实验预习二、实验内容(原理、方法、框图)三、实验过程（步骤、实现代码）四、实验结果（遇到的问题及解决方法）五、心得体会(实验收获)实验预习20%实验过程20%实验结果30%实验报告30%成绩日期实验名称实验实验目的实验设备实验日期一、实验预习二、实验内容(原理、方法、框图)三、实验过程（步骤、实现代码）四、实验结果（遇到的问题及解决方法）五、心得体会(实验收获)实验预习20%实验过程20%实验结果30%实验报告30%成绩日期实验名称实验实验目的实验设备实验日期一、实验预习二、实验内容(原理、方法、框图)三、实验过程（步骤、实现代码）四、实验结果（遇到的问题及解决方法）五、心得体会(实验收获)实验预习20%实验过程20%实验结果30%实验报告30%成绩日期