八、按钮练习 表格以及样式 长表格 完善

八、按钮练习 表格以及样式 长表格 完善

.btn:link导入外部样式表

.btn:hover光标浮动

.btn:active光标点击

雪碧图:可以把多个图片整合成一张图片

background-images:url(../img/3.png);

background-repeat:no-repeat;不重铺

background-position:center center;正中间

background-attachment:fixed;背景图片固定当前页面

上面四句话的简写:background: url(../img/3.png) center center no-repeat fixed;}

table表格

tr代替表格里的几行,有几个tr就有几行

td表示几列

tr一定在

里,td一定在tr里

colspan="2"横向占两格

rowspan="2"纵向占两格

boder表示边框

表格的样式

text-align:设置文本的水平对齐。

vertical-align:设置文本的垂直对齐。

可选值:top、baseline、middle、bottom

border-spacing:边框间距

border-collapse:合并边框

collapse:合并边框

separate:不合并边框

隔行变色odd奇数行,even偶数行

tr:nth-child(odd)隔行变色的意思

thead表示表格的头部。

tbody表示表格的主体。

tfoot表示表格的底部

center no-repeat fixed

表格:

A1 A1 A1 A1
创建表格

       

表格中的一行

           

表头

           

表格中的一个单元格

      colspan:横向合并

      rowspan:纵向合并

      tr:odd:nth-child(odd\even){设置样式内容}

     

       

           

           

           

           

           

           

       

       

空的table的标签可以分割标签

1、解决父子元素外边距重叠

.box:before{

content:"";

display:table;}

2、解决父元素塌陷

.clearfix:after{

content:"";

display:block;

clear:both;}

(上面两格合起来用的)

3、解决高度塌陷、垂直重叠

.clearfix:before,

.clearfix:after{

content:"";

display:table;

clear:both;}

.clearfix{zoom:1;}

你可能感兴趣的:(八、按钮练习 表格以及样式 长表格 完善)