实验五 css进阶应用

实验五 css进阶应用

实验目的：

掌握CSS在列表中的应用，能利用CSS将列表做成精美的导航栏；

掌握CSS在表单元素中的应用；

掌握SPRY菜单的制作方法和CSS代码修改。

实验内容:

1、 制作如下图所示页面。网页制作要求说明：

用户名表单采用的纯色背景，鼠标移上去变图片背景，其中图片自行设计

密码表单采用了图片背景，鼠标移上去则会增加虚线边框提示；

下拉选项框则是添加了背景色，并让文字居中处理；

提交按钮设置了背景及按下时候变色，

另各表单元素在大小等其它基本属性亦作了简单设计，请对照效果图接近完成即可。

2 、制作如下图所示页面。

设计要点：该导航条为水平设计的列表，主要设计之重点于边设计独特的边框属性以及填充和边界值，此外设计了鼠标移上去之后的新样式，以达到如上效果。

3、利用Dreamweaver
cs3制作出spry菜单，并要求能看懂其代码。

本菜单设计要点：

采用的是spry水平菜单栏，在系统生成的默认菜单上修改css规则达到如上效果

主要修改色彩、边界，查找默认规则的方式是逐一浏览，仔细观察属性及值。