表单中作业的问题网页设计与制作

1、表单中作业的问题表单中作业的问题p 理解表单的三要素理解表单的三要素p 表单域表单域form p 输入域输入域input等等 p 提交按钮提交按钮p 只有具有了这三部分，表单才能将用户输只有具有了这三部分，表单才能将用户输入的信息提交给服务器，否则只是摆看的入的信息提交给服务器，否则只是摆看的name/value信息对信息对p 表单向服务器提交的内容总是表单向服务器提交的内容总是name/value信息信息对，对于文本输入类的框来说，一般无需定义对，对于文本输入类的框来说，一般无需定义value属性，属性，value的值是你向文本框输入的字符。的值是你向文本框输入的字符。当然也可以事先定义当然

2、也可以事先定义value属性，那么打开网页属性，那么打开网页它就会显示在文本框中。对于选择框（单选框、它就会显示在文本框中。对于选择框（单选框、复选框和列表菜单）来说，复选框和列表菜单）来说，value的值是事先设的值是事先设定的，只有某个选项被选中后它的定的，只有某个选项被选中后它的value值才会值才会生效，为了让用户选中不同选项后传递给服务生效，为了让用户选中不同选项后传递给服务器的值也不同，因此在同一个选择框集合中每器的值也不同，因此在同一个选择框集合中每个选项的个选项的value值都要不同值都要不同 下面的表单代码将向服务器提交什么内容下面的表单代码将向服务器提交什么内容 用户名：用

3、户名： 密码密码 ： 性别：性别： 男男 女女 爱好：爱好： 跳舞跳舞 散步散步 唱歌唱歌 所在地：所在地： 长沙长沙 湘潭湘潭 衡阳衡阳 个性签名：个性签名： p 因此上例传送的值是：因此上例传送的值是：p user=tang pw=123 sex=1 fav2=2 fav3=3 addr=3 sign=wo submit=提交提交 相对定位和绝对定位的比较相对定位和绝对定位的比较 相对定位相对定位relative绝对定位绝对定位absolute定位定位基准基准以它自己以它自己原来的位原来的位置为基准置为基准以距离它最近的设置了定位属性以距离它最近的设置了定位属性的父级元素为定位基准，若它所

4、的父级元素为定位基准，若它所有的父元素都没设置定位属性，有的父元素都没设置定位属性，则以浏览器窗口为定位基准则以浏览器窗口为定位基准原来原来的位的位置置还占用着还占用着原来的位原来的位置，未脱置，未脱离标准流离标准流不占用其原来的位置，已经脱离不占用其原来的位置，已经脱离标准流，其它元素就当它不存在标准流，其它元素就当它不存在一样一样制作纯制作纯CSS的下拉菜单的下拉菜单p 由于下拉菜单在弹出时是浮在网页上的，由于下拉菜单在弹出时是浮在网页上的，所以放置下拉菜单的元素必须设置为所以放置下拉菜单的元素必须设置为绝对绝对定位元素定位元素，而且下拉菜单位置是依据它的，而且下拉菜单位置是依据它的导航项

5、来定位的，所以导航项应该设置为导航项来定位的，所以导航项应该设置为相对定位相对定位，作为下拉菜单的定位基准，当，作为下拉菜单的定位基准，当鼠标滑到导航项时，显示下拉菜单，当鼠鼠标滑到导航项时，显示下拉菜单，当鼠标离开时，设置下拉菜单元素的标离开时，设置下拉菜单元素的display属属性为性为none，则下拉菜单就被隐藏起来，则下拉菜单就被隐藏起来 第一步第一步 写结构代码写结构代码p 下拉菜单采用二级列表结构，第下拉菜单采用二级列表结构，第一级放导航项，第二级放下拉菜一级放导航项，第二级放下拉菜单项。首先写出它的结构代码单项。首先写出它的结构代码 文文 章章 Ajax教程教程 SAML教程教程

6、 RIA教程教程 Flex教程教程 第二步第二步 使导航项水平排列使导航项水平排列设置第一层设置第一层li为左浮动，这样导航项就会水平排列，为左浮动，这样导航项就会水平排列，同时去除列表的小黑点、填充和边界同时去除列表的小黑点、填充和边界 ，再设置导航，再设置导航项项li为相对定位，让下拉菜单以它为基准定位。为相对定位，让下拉菜单以它为基准定位。 ul#nav padding: 0;margin: 0;list-style: none;li float: left;width: 160px;position:relative; 第三步第三步 设置下拉菜单设置下拉菜单li ulp 设置下拉菜单为

7、绝对定位，往导航项下偏移设置下拉菜单为绝对定位，往导航项下偏移21像素。平时导航项未被访问时应隐藏下拉菜单像素。平时导航项未被访问时应隐藏下拉菜单ul，所以，所以ul默认值是不显示。默认值是不显示。li ul display: none;position: absolute;top: 21px;再添加交互，当鼠标滑过时显示下拉菜单再添加交互，当鼠标滑过时显示下拉菜单ul。li:hover ul display: block; 第四步第四步 用用CSS样式美化下拉菜单样式美化下拉菜单ul li adisplay:block;font-size:12px;border: 1px solid #cc

8、c;padding:3px;text-decoration: none;color: #777;ul li a:hoverbackground-color:#f4f4f4; 下拉菜单制作完成下拉菜单制作完成p 这样，一个下拉菜单就做好了，由于这样，一个下拉菜单就做好了，由于IE6不支持不支持li:hover伪类，所以在伪类，所以在IE6下不能看下不能看到弹出菜单。到弹出菜单。p 想一想：如果把上述选择器中的想一想：如果把上述选择器中的position:relative;和和position: absolute;都去都去掉还会有上面的下拉菜单效果吗？会出现掉还会有上面的下拉菜单效果吗？会出现什么

9、问题呢？什么问题呢？第五步第五步 兼容兼容IE6浏览器浏览器p IE6由于不支持由于不支持li:hover所以没有下拉菜单，我们可所以没有下拉菜单，我们可以把下拉菜单以把下拉菜单ul放在放在a标记中，利用标记中，利用a:hover ul来控来控制下拉菜单的显示和隐藏。尽管把块级元素制下拉菜单的显示和隐藏。尽管把块级元素ul放在放在a中在中在html语法中是错误的，但也能实现效果语法中是错误的，但也能实现效果 文文 章章 Ajax教程教程 SAML教程教程 RIA教程教程 Flex教程教程 添加的样式代码添加的样式代码p ul a:hover ulvisibility:visible;相对定位的

10、应用制作图片阴影相对定位的应用制作图片阴影制作图片阴影制作图片阴影p 不用一张图片也能制作出和图不用一张图片也能制作出和图1相同的简相同的简单阴影效果。它的原理是在单阴影效果。它的原理是在img元素外套元素外套一个外围容器，将外围容器的背景设置为一个外围容器，将外围容器的背景设置为灰色，作为灰色，作为img元素的阴影，同时不设置元素的阴影，同时不设置填充边界等值使外围容器和图片一样大，填充边界等值使外围容器和图片一样大，这样图像就正好把外围容器的背景完全覆这样图像就正好把外围容器的背景完全覆盖，再设置图像相对于原来的位置往左上盖，再设置图像相对于原来的位置往左上方偏移几个像素，这样图像的右下方

11、就露方偏移几个像素，这样图像的右下方就露出了阴影盒子右边和下边部分的背景，看出了阴影盒子右边和下边部分的背景，看起来就是起来就是img元素的阴影了元素的阴影了 图片阴影代码图片阴影代码img padding: 6px;border: 1px solid #465B68;background-color: #fff;position: relative;left: -5px;top: -5px; div.shadow background-color: #CCCCCC;float:left;图片图片绝对定位的应用绝对定位的应用制作图片放大效果制作图片放大效果图片放大效果图片放大效果p 首先，商品

12、的缩略图的排列可以使用标准首先，商品的缩略图的排列可以使用标准流方式排列，但商品的大图要放在缩略图流方式排列，但商品的大图要放在缩略图旁边，所以得以缩略图为定位基准，因此旁边，所以得以缩略图为定位基准，因此商品的缩略图应设置为相对定位。而商品商品的缩略图应设置为相对定位。而商品的大图是浮动在网页上，所以是绝对定位的大图是浮动在网页上，所以是绝对定位元素。在正常情况下，商品的大图是不显元素。在正常情况下，商品的大图是不显示的，当鼠标滑到缩略图上时，就显示商示的，当鼠标滑到缩略图上时，就显示商品的大图。品的大图。 第一步第一步 写结构代码写结构代码p 由于有许多张图片，因此采用列表结构存放这由于有

13、许多张图片，因此采用列表结构存放这些图片，每个列表项放一张图片。因为图片要些图片，每个列表项放一张图片。因为图片要响应鼠标滑过，所以外面要套一个响应鼠标滑过，所以外面要套一个a标记标记 第二步第二步 写写CSS代码代码#lib img border: 1px solid #333333;padding: 6px;margin: 4px;#lib a:hover border:1px solid #CCCCCC; /*此处主要为兼容此处主要为兼容IE 6*/#lib a:hover img width:300px; /*重新定义图片的宽和高实现放大重新定义图片的宽和高实现放大*/ height:

14、280px;第三步第三步 设置绝对定位和定位基准设置绝对定位和定位基准#lib a position:relative;#lib a:hover border:1px solid #CCCCCC;z-index:1000;/*防止放大后图片被小图覆盖防止放大后图片被小图覆盖*/#lib a:hover img position: absolute;left:-50px;top:-50px;width:300px;height:280px;z-index:1000;第四步第四步 给给a的父元素的父元素li设置宽和高设置宽和高给给li元素设置宽度和高度，这样即算元素设置宽度和高度，这样即算a元素绝

15、对定元素绝对定位不占据空间后，其父元素位不占据空间后，其父元素li由于定义了宽和高，由于定义了宽和高，就不会自动收缩，仍然会占据原来的位置。这就不会自动收缩，仍然会占据原来的位置。这样后面的图片就不会挤占放大后图片的位置样后面的图片就不会挤占放大后图片的位置 #lib li float: left;width:164px;height:154px; /*防止防止a元素绝对定位不占据空间元素绝对定位不占据空间后父元素自动收缩后父元素自动收缩*/margin: 4px;overflow属性介绍属性介绍overflow属性属性p overflow属性的基本功能是设置元素盒子中的属性的基本功能是设置元

16、素盒子中的内容如果溢出是否显示，取值有内容如果溢出是否显示，取值有visible（可（可见）、见）、hidden（隐藏）、（隐藏）、scroll（出现滚动条）。（出现滚动条）。如果不设置则默认值为如果不设置则默认值为visible。#qq border:1px solid #333333;height: 100px;width: 100px;overflow:scroll; 在一个遥远而古老的国度里，国王和在一个遥远而古老的国度里，国王和王后因为性格不和而离婚，国王再娶了一位美丽的王后因为性格不和而离婚，国王再娶了一位美丽的王后。可惜，这位新后天性善妒王后。可惜，这位新后天性善妒overflo

17、w四种取值效果四种取值效果overflow:visibleoverflow用来代替清除浮动的元素用来代替清除浮动的元素p overflow属性的另一种作用是用来代替清属性的另一种作用是用来代替清除浮动的元素。除浮动的元素。p 如果父元素中的子元素都设置成了浮动，如果父元素中的子元素都设置成了浮动，那么子元素脱离了标准流，导致父元素高那么子元素脱离了标准流，导致父元素高度不会自动伸展包含住子元素，前面说过度不会自动伸展包含住子元素，前面说过可以在这些浮动的子元素的后面添加一个可以在这些浮动的子元素的后面添加一个清除浮动的元素，来把包含盒子撑开。实清除浮动的元素，来把包含盒子撑开。实际上，通过对父

18、元素设置际上，通过对父元素设置overflow属性可属性可以代替清除浮动元素的作用。以代替清除浮动元素的作用。 浮动的浏览器显示问题总结浮动的浏览器显示问题总结 情况情况未浮动的盒子不未浮动的盒子不设宽或高设宽或高对未浮动的盒子设对未浮动的盒子设置宽或高置宽或高盒子浮动，其外层盒子浮动，其外层盒子未浮动盒子未浮动显示效果一致显示效果一致IE6浮动盒子将不会浮动盒子将不会脱离标准流，脱离标准流，Firefox浮动盒子仍浮动盒子仍然是脱离标准流的然是脱离标准流的盒子浮动，后面相盒子浮动，后面相邻盒子未浮动邻盒子未浮动让让IE 6与与Firefox都能清除浮动都能清除浮动p 在浮动的浏览器兼容一节说

19、过在浮动的浏览器兼容一节说过IE6中只要设置了中只要设置了未浮动的父元素未浮动的父元素box的宽或高，那么浮动元素不的宽或高，那么浮动元素不会脱离标准流。父元素会自动伸展包含住浮动会脱离标准流。父元素会自动伸展包含住浮动块，因此不需要使用上面任何一种清除浮动的块，因此不需要使用上面任何一种清除浮动的方法。方法。p 但当没有对父元素但当没有对父元素box设置宽或高时，在设置宽或高时，在IE6中中父元素也不会包含住浮动块，而且对父元素也不会包含住浮动块，而且对IE6即使设即使设置置box的的overflow属性也不起作用。这时对属性也不起作用。这时对IE6来说，只能对盒子设置宽或高，如果不方便设来

20、说，只能对盒子设置宽或高，如果不方便设置宽度，则可以针对置宽度，则可以针对box设置一个很小的百分比设置一个很小的百分比高度，如（高度，如（height:1%），使），使IE6中的中的box也能包也能包含住浮动块，这样就兼容了含住浮动块，这样就兼容了IE6和和Firefox浏览器浏览器 CSS+div布局布局 CSS布局的本质布局的本质p 对于对于CSS布局而言，本质就是大大小小的布局而言，本质就是大大小小的盒子在页面上摆放，你不是设计师，而是盒子在页面上摆放，你不是设计师，而是排字工人，你眼中看到的不是文字，不是排字工人，你眼中看到的不是文字，不是图像，而是一堆盒子。图像，而是一堆盒子。p

21、你要考虑的就是盒子与盒子之间的关系！你要考虑的就是盒子与盒子之间的关系！标准流？并列？上下？嵌套？间隔？背景？标准流？并列？上下？嵌套？间隔？背景？浮动？绝对？相对？定位基准？等等浮动？绝对？相对？定位基准？等等 分栏布局的种类分栏布局的种类 p 网页的布局从总体上说可分为固定宽度布局和可网页的布局从总体上说可分为固定宽度布局和可变宽度布局两类，所谓固定宽度是指网页的宽度变宽度布局两类，所谓固定宽度是指网页的宽度是固定的，如是固定的，如780像素，不会随浏览器大小的改像素，不会随浏览器大小的改变而改变；而可变宽度是指如果浏览器窗口大小变而改变；而可变宽度是指如果浏览器窗口大小发生变化，网页的宽

22、度也会变化，如将网页宽度发生变化，网页的宽度也会变化，如将网页宽度设置为设置为85%，表示它的宽度永远是浏览器宽度的，表示它的宽度永远是浏览器宽度的85%。p 固定宽度的好处是网页不会随浏览器大小的改变固定宽度的好处是网页不会随浏览器大小的改变而发生变形，窗口变小只是网页的一部分被遮盖而发生变形，窗口变小只是网页的一部分被遮盖住，所以固定宽度布局用得更广泛，适合于初学住，所以固定宽度布局用得更广泛，适合于初学者使用。而可变宽度布局的好处是能适应各种用者使用。而可变宽度布局的好处是能适应各种用户的显示器，不会因为用户的显示器过宽而使两户的显示器，不会因为用户的显示器过宽而使两边出现很宽的空白区域

23、边出现很宽的空白区域 1-2-1式布局具有的形式式布局具有的形式1-3-1”固宽和变宽适应布局固宽和变宽适应布局p “对于对于“1-3-1”布局，可以产生更多的不布局，可以产生更多的不同变化方式。同变化方式。三列都按比例适应宽度三列都按比例适应宽度一列固定，其他两列按比例适应宽度一列固定，其他两列按比例适应宽度两列固定，其他一列适应宽度。两列固定，其他一列适应宽度。1-3-1式布局具有的形式式布局具有的形式 固定宽度布局固定宽度布局 固定宽度网页居中的方法固定宽度网页居中的方法 text-align法：法：bodytext-align：center；mini-width：790px； #wra

24、ppermargin：0 auto；text-align：left；width：780px；margin法：法：#container margin: 0 auto ; width: 780px; #container margin: 0 auto ; width: 85%; 相对定位法：相对定位法：#container position: relative; width:780px; left: 50%; margin-left: -390px; 固定宽度分栏的实现固定宽度分栏的实现p 浮动法（三栏浮动）浮动法（三栏浮动）写总体结构代码写总体结构代码id=headerid=naviid=con

25、tentid=sideid=pagefooter再写栏目结构代码再写栏目结构代码由于栏目框可以重用，所以一般将它们添加类名由于栏目框可以重用，所以一般将它们添加类名.rounded background: url(images/left-top.gif) top left no-repeat; width:100%; .rounded h2 background: url(images/right-top.gif) top right no-repeat; padding:20px 20px 10px; margin:0; 可变宽度布局可变宽度布局 两列等比例布局两列等比例布局 p 将每列的宽

26、由固定的值改为百分比就行了将每列的宽由固定的值改为百分比就行了 两列等比例布局两列等比例布局#header,#pagefooter,#containermargin:0 auto; width：760px; /*删除原来的固定宽度删除原来的固定宽度*/width:85%; /*改为比例宽度改为比例宽度*/ #contentfloat:right;width：500px; /*删除原来的固定宽度删除原来的固定宽度*/width:66%; /*改为比例宽度改为比例宽度*/#sidefloat:left;width：260px; /*删除原来的固定宽度删除原来的固定宽度*/width:33%; /*

27、改为比例宽度改为比例宽度*/1-2-1单列变宽布局单列变宽布局改进浮动法改进浮动法#header,#pagefooter,#containermargin:0 auto;width:85%; #contentWrapmargin-right:-300px;float:left;width:100%; #contentmargin-right:300px; #sidefloat:right;width:300px; #pagefooterclear:both;1-3-1液态布局（中间列可变）液态布局（中间列可变）#navi width: 200px;position: absolute;left

28、: 0px;top: 0px;#content right: 0px;top: 0px;margin-right: 200px;margin-left: 200px;#side width: 200px;position: absolute;right: 0px;top: 0px;1-3-1液态布局（中间列可变）液态布局（中间列可变）p 两侧列固定、中间列变宽的两侧列固定、中间列变宽的1-3-1式布局也是一种式布局也是一种常用的布局形式，这种形式的布局通常是把两侧常用的布局形式，这种形式的布局通常是把两侧列设置成绝对定位元素，并对它们设置固定宽度。列设置成绝对定位元素，并对它们设置固定宽度。例

29、如左右两列都设置成例如左右两列都设置成200像素宽，而中间列不设像素宽，而中间列不设置宽度，这样它就会随着网页的大小改变而改变。置宽度，这样它就会随着网页的大小改变而改变。然后将然后将container设置为相对定位，让两侧列以它设置为相对定位，让两侧列以它为定位基准。如果此时对两侧列的盒子设置背景为定位基准。如果此时对两侧列的盒子设置背景色，那么两侧列就可能和中间列不等高，色，那么两侧列就可能和中间列不等高，p 因此不能对两侧列的盒子设置背景色，而应该对因此不能对两侧列的盒子设置背景色，而应该对container设置背景颜色，这样两侧列看起来就和设置背景颜色，这样两侧列看起来就和中间列等高了

30、中间列等高了 如果对两侧列设置背景色如果对两侧列设置背景色解决解决CSS浏览器兼容问题的基本方法浏览器兼容问题的基本方法 使用兼容属性使用兼容属性p 由于由于CSS样式以及页面各种元素在不同浏览器样式以及页面各种元素在不同浏览器中的表现不同，所以必须考虑网页代码的浏览中的表现不同，所以必须考虑网页代码的浏览器兼容问题。解决兼容性问题一般可以遵循以器兼容问题。解决兼容性问题一般可以遵循以下两个原则。下两个原则。p 1尽量使用兼容属性尽量使用兼容属性p 因为并不是所有的因为并不是所有的CSS属性都存在兼容的问题，属性都存在兼容的问题，所以如果使用所有浏览器都能理解一致的属性，所以如果使用所有浏览器

31、都能理解一致的属性，那么兼容的问题也就不存在了。那么兼容的问题也就不存在了。p 但是如果要实现这样的兼容就会有一部分但是如果要实现这样的兼容就会有一部分CSS属性的使用受到限制。也就是说兼容的浏览器属性的使用受到限制。也就是说兼容的浏览器越多，能够使用的越多，能够使用的CSS属性就越少。这给网页属性就越少。这给网页设计中灵活运用设计中灵活运用CSS属性带来困难。属性带来困难。使用使用CSS hack技术技术 p CSS hack技术是通过被某些浏览器支持技术是通过被某些浏览器支持而其他浏览器不支持的语句，使一个而其他浏览器不支持的语句，使一个CSS样式能够按开发者的目的被特定浏览器解样式能够按

32、开发者的目的被特定浏览器解释或者不能被特定浏览器解释。释或者不能被特定浏览器解释。 1) 使用使用!important关键字关键字p 前面已经介绍过前面已经介绍过!important关键字的用途，如果关键字的用途，如果在同一个选择器在同一个选择器中定义了两条相冲突的规则中定义了两条相冲突的规则（注意是在同一个选择器中），那么（注意是在同一个选择器中），那么IE6总是以总是以后一条为准，不认后一条为准，不认!important ，而，而Firefox/IE7以以定义了定义了!important的为准。例如：的为准。例如：.shadow div background: url(images/top

33、-left.png) no-repeat !important; /*Firefox、IE 7执行这一条执行这一条*/ background: url(images/top-left.gif) no-repeat; /*IE6执行这一条执行这一条*/ padding: 0 6px 6px 0; 2) 在属性前添加在属性前添加“+”、“_”号号在属性前添加在属性前添加“+”号可区别号可区别IE与其他浏览器，例如：与其他浏览器，例如：#demo div width:50px; /* FireFox 有效有效 */ +width:60px; /* IE 有效有效 */那么如何进一步区分那么如何进一步

34、区分IE 6和和IE 7呢？由于呢？由于IE 7不支持属性前加不支持属性前加下划线下划线“_ _”的写法，会将整条样式忽略，而的写法，会将整条样式忽略，而IE 6却不会忽却不会忽略，和没加下划线的属性同样解释。例如：略，和没加下划线的属性同样解释。例如：#demo div _ _height:50px; /* FireFox 有效有效 */ +height:60px; /* IE 7 有效有效 */ _height:70px; /* IE 6 有效有效 */3) 使用子选择器和属性选择器等使用子选择器和属性选择器等IE 6不不支持的选择器支持的选择器p 例如：例如：p html body background-image:(bg.gif) /* IE 6 有效有效 */p htmlbody background-image:(bg.png) /* FireFox/IE 7有效有效 */4)使用使用IE条件注释条件注释 p 条件注释是条件注释是IE特有的功能，能够使特有的功能，能够使IE浏览器对浏览器对XHTML代码进行单独处