html day9-- 11集

1.form标签:
fieldset-块状
legend
file
image 提交表单信息
optgroup label
label
button type="submit reset button"

table-css:
border-collapse:设置相邻单元格之间的边框是否合并
border-spacing:设置相邻单元格之间的间距
empty-cells:设置内容为空的单元格是否隐藏,显示
table-layout:设置表格的布局算法;

th:表格的列标题标签
colgroup
col:列分组标签
thead
tfoot
tbody:行分组
caption:表格的标题
rules:添加分割线

2.

3.

<legend>必须放在framset里的第一个元素

4.

5.label for 

6.

7.

8.

optgroup是不能点击的,进行分组说明的

9.

10.在select中有一个分组标签optgroup,把同为一组的option包在一起,这个组名用label标记,能显示出来,但不能点击

11.collapse 倒塌;失败;衰竭

12.border-collapse(默认separate)和border-spacing对table标签添加属性就可以了,下面会继承;

默认相邻单元格是分离的。

css中只对table设置border,td和tr都是不能继承的,所以直接对td进行设置就可以了;而直接在html中写border=‘”,是可以继承的

13.

14.table{width:400px;height:300px;border:1px solid #63C;border-collapse:separate;border-spacing:20px 20px; empty-cells:hide;}
table td{border:1px solid #309}

15.

16.

17

18.

19.

20.

21.

22

23.th带个加粗居中效果

24.表格重要属性

24-1.

24-2.

24-3.

25.

26.

27.

28.a的title属性要写上,img的title和alt也要写上

29.

所以滤镜一般用于写兼容,若其他浏览器的效果不能再ie中显示,可是查查看能不能使用ie的滤镜试试;

29.

#main li:nth-of-type(1) a:after{content:"";display:block;width:5px;height:35px;background:url(../img/tab_bg2.png) ;position:absolute;top:0;right:0;}会出现,右边定位错了,原因是未对背景定位background:url(../img/tab_bg2.png) right top;

对于这种居中情况,不要用上下padding,用height,line-height;

通用的样式分离出来写,单独的样式嵌套写

给子元素设置margin-top时会影响父级元素一起向下移动,解决方法:给父元素设置overflow:hidden或给父元素or子元素浮动

label表示option的文本,当不一致时,以label为准

这是因为input是行内块元素,可以让input为display:block;

<div id="header">
    <div class="wrapper">
              <div class="logo">

class="top-img"

<div id="main" class="wrapper">

form class="main-info"

量了行高40px,字体12,则上下有(40-12)/2=14的间隙

input标签默认是行内块元素,与文本默认是基线对齐,而我希望他和文本能够居中对齐,解决方法:对所有的input设置vertical-align{middle}

这种结构可以用dl来写,dt,dd都设置浮动,dl清浮动,

给select设置高度,在line-height,使select中的文字居中

label表示option显示的文本,当两个值不一样时,以label的值为准

想给dl中的多个select设置宽高,简单方法是在头部加个样式,用#main .w90 select{width:90px;height:19px;}就可以快速找到

原因:input是行内块元素,把input变成display:block;  

input作为行内块元素放在块级元素中距离顶端有空隙是正常的,解决方法(1)给input的float设置浮动;(2)让input的dispaly:block======将他转换成块级元素

猜你喜欢

转载自blog.csdn.net/QiuShuiFuPing/article/details/84169478