实验三 css表现层设计综合应用

《实验三 css表现层设计综合应用》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实验三CSS表现层设计综合应用班级：11信管__班姓名：_________学号：_________完成日期：_________成绩：_________一、实验目的掌握用Dreamweaver设计XHTML页面及CSS的基本方法，能够熟练编写XHTML和CSS代码。掌握CSS中定位属性的基本应用；掌握基于浮动和定位属性的布局的方法，掌握背景、边框、圆角的应用，根据要求设计基于CSS布局的页面，并在Firefox和IE中测试，达到一致的效果。二、实验内容用Dreamweaver编写页面并用CSS进行样式设计：1．运用定位属性设计小提示框，

2、当鼠标放置到链接上时，提示框出现，移出则消失。类似下图：（小提示框的其他样式可自行设计）2．使用图片阴影效果制作一个相册索引页。3．利用给定的素材bg_popup.gif，设计可变宽度的气泡提示框。4．利用翻转图素材为背景，设计宽度自适应导航条，样式自定。5．深入理解边框样式，设计一个单像素宽度边框的表格，要求外框为实线，内部为虚线。6．给定一个页面结构ex3.html，要求用CSS设计至少两种表现层效果（包括布局、配色、字体、背景、导航样式等），能方便迅速地实现网页换肤（切换样式）。不能修改XHTML结构。制作要求：（1）符合HTM

3、L、CSS规范，用Dreamweaver生成的CSS代码要进行精简、优化。（2）在Firefox和IE浏览器中都要通过测试。（3）表现层效果都要通过CSS实现，不允许通过设置HTML元素属性实现。三、实验结果请按照设计要求进行，严格遵守设计规范，自主完成，尊重他人劳动成果，严禁抄袭。在自己的机器上进行演示。并通过FTP上传到自己的网站空间，实验报告打印上交。最后提交截止日期：2013-5-10，请按时完成。四、思考并回答问题1总结实现圆角的方法，指出各有什么特点。第一种:无图片纯css圆角框特点:不用任何图形，使用很多个div容器模拟

4、出圆角效果。兼容性:通杀所有浏览器缺点:构造这个圆角需要加入太多的无语义的标签，结构比较冗余。重用性不强:如果一个页面有多个圆角，并且要实现不同的半径大小，则其灵活性不够。边框颜色虽然可以调节，但会对页面中的结构产生致命的影响，适用于色彩单一并且一个页面中圆角应用不多的页面。不容易实现圆弧内有渐变色的图形背景。圆角框不够圆滑，有锯齿现象，适合于背景色和当前色色差不大并且圆弧较小的网页。实现原理:用很多1像素高的div容器，利用背景色和边框色来模拟出圆角框的轮廓线。第二种:无图片纯css圆角框，用特殊字符(&bull)特点:不用任何图形

5、，使用特殊字符?(圆点)模拟出圆角。兼容性:通杀所有浏览器圆角平滑缺点:构造这个圆角一样需要加入无语义的标签，结构冗余，同第一种一样。重用性不强:如果一个页面有多个圆角，并且要实现不同的半径大小，需要调整四个角图片的定位，并且字符大小对其有影响，灵活性不够。颜色虽可调节，但要求里面的背景色和字符的颜色相同，不能做成边框线条。适用于色彩单一并且一个页面中圆角不是太多的页面。一样不容易实现圆弧内有渐变色的图形背景。实现原理:用特殊字符(&bull)，利用定位，截取四分之一圆模拟出圆角框的一个角图片。第三种:图片圆角框收录理由:兼容性强，可

6、以表现很复杂的圆角效果。兼容性:通杀所有浏览器。这是最常用的圆角框做法。因为采用图片来表现，所以其圆角是超级平滑，无任何锯齿现象。表现丰富，适用于各种对图片表现要求较高的圆角框。缺点:构造这个圆角也需要加入四个标签来装四张角图片，结构也有冗余。重用性不强:如果一个页面有多个圆角，并且要实现不同的半径大小，则要重新制作一套圆角图片。如果对结构的冗余没有特别的需求，这就是超级圆滑圆角框的解决方案了。实现原理:利用九宫格原理，在一个容器的四个角加入绝对定位(或相对定位)的四张圆角图片。第四种:利用VML绘制圆角(ieonly)特点:不用任何

7、图形。兼容性:只能在IE中使用圆角半径随意调整重用性强:多个圆角任意调用。圆角颜色随意设置。结构无冗余。圆角平滑无锯齿。缺点:除了兼容性有问题外，其它方面的表现都不错。不能在圆弧中表现丰富的有渐变的图片，因为圆弧外框是透明的。实现原理:使用IE专用的VML来画出圆角。v:roundrectid="roundbox"class="circle"strokecolor="red"strokeweight="2px"arcsize="0.08"/v:roundrect注意加入引用空间:htmlxmlns:vxmlns="这是兼容的用法，xm

8、lns:v一不能少，否则。样式表中加入这一句话:v":*{behavior:url(#default#VML);display:inline-block;}Arcsize为半径Strokeweight为边框线宽度Stro