CSS布局和hack－第12次课.pptVIP

表单中作业的问题 理解表单的三要素 表单域form 输入域input等 提交按钮 只有具有了这三部分，表单才能将用户输入的信息提交给服务器，否则只是摆看的 name/value信息对 表单向服务器提交的内容总是name/value信息对，对于文本输入类的框来说，一般无需定义value属性，value的值是你向文本框输入的字符。当然也可以事先定义value属性，那么打开网页它就会显示在文本框中。对于选择框（单选框、复选框和列表菜单）来说，value的值是事先设定的，只有某个选项被选中后它的value值才会生效，为了让用户选中不同选项后传递给服务器的值也不同，因此在同一个选择框集合中每个选项的value值都要不同 下面的表单代码将向服务器提交什么内容 form action=2-2hn.html method=post p用户名：input name=user id=xm type=text size=15 / /p p密码 ： input name=pw type=password size=15 //p p性别： 男 input type=radio name=sex value=1 / 女 input type=radio name=sex value=2 //p p爱好：input name=fav1 type=checkbox value=1 / 跳舞 input name=fav2 type=checkbox value=2 /散步 input name=fav3 type=checkbox value=3 / 唱歌 /p p所在地： select name=addr option value=1长沙/option option value=2湘潭/option option value=3衡阳/option /select /p p 个性签名： br/textarea name=sign/textarea /p p input type=submit name=Submit value=提交 / /p /form 因此上例传送的值是： user=tang pw=123 sex=1 fav2=2 fav3=3 addr=3 sign=wo submit=提交 相对定位和绝对定位的比较 制作纯CSS的下拉菜单 由于下拉菜单在弹出时是浮在网页上的，所以放置下拉菜单的元素必须设置为绝对定位元素，而且下拉菜单位置是依据它的导航项来定位的，所以导航项应该设置为相对定位，作为下拉菜单的定位基准，当鼠标滑到导航项时，显示下拉菜单，当鼠标离开时，设置下拉菜单元素的display属性为none，则下拉菜单就被隐藏起来 第一步 写结构代码 下拉菜单采用二级列表结构，第一级放导航项，第二级放下拉菜单项。首先写出它的结构代码 ul id=nav lia href=文 章/a ul lia href=Ajax教程/a /li lia href=SAML教程/a/li lia href=RIA教程/a/li lia href=Flex教程/a/li /ul /li …… 第二步 使导航项水平排列 设置第一层li为左浮动，这样导航项就会水平排列，同时去除列表的小黑点、填充和边界 ，再设置导航项li为相对定位，让下拉菜单以它为基准定位。 ul#nav{ padding: 0; margin: 0; list-style: none;} 第三步 设置下拉菜单li ul 设置下拉菜单为绝对定位，往导航项下偏移21像素。平时导航项未被访问时应隐藏下拉菜单ul，所以ul默认值是不显示。 li ul { display: none; position: absolute; top: 21px; } 再添加交互，当鼠标滑过时显示下拉菜单ul。 li:hover ul { display: block;} 第四步 用CSS样式美化下拉菜单 ul li a{ display:block; font-size:12px; border: 1px solid #ccc; padding:3px; 下拉菜单制作完成 这样，一个下拉菜单就做好了，由于IE6不支持li:hover伪类，所以在IE6下不能看到弹出菜单。 想一想：如果把上述选择器中的position:relative;和position: absolute;都去掉还会有上面的下拉菜单效果吗？会出现什么问题呢？ 第五步 兼容IE6浏览器 IE6由于不支持li:hove