html table 浮动,第一周小结：table，非table布局，浮动float，定位position

table实例

html>

table布局

/*border-collapse: collapse; 边框折叠*/

table{border: 1px solid lightgray;text-align: center;width: 600px;box-sizing: border-box;border-collapse: collapse;}

table th,td{border: 1px solid lightgray;height: 30px;}

thead th,tfoot th{height: 40px;}

tbody tr:nth-of-type(even){background-color: #ededed;}

thead{background: linear-gradient(green,white);color: white;}

tfoot{background: radial-gradient(at right top,red, blue); color: white;}

tbody tr:nth-last-of-type(4){height: 40px;background: linear-gradient(to left, gray,white);}

tbody tr:first-of-type > td:first-of-type{background: radial-gradient(blue,green);color: white;}

tbody tr:nth-last-of-type(3) > td:first-of-type{background: radial-gradient(yellow,gray);}

时间周一周二周三周四周五

上午23456234562345623456午休午饭后，小憩一会吧下午234562345623456放学注意安全，准时放学

运行实例 »

这个很简单，学会了。。需要记住：border-collapse: collapse; 边框折叠

非table布局实例

html>

非table表单

article{display: table;box-sizing: border-box;width: 600px;text-align: center;border-collapse: collapse;}

.caption{display: table-caption;height: 30px;}

.thead{display:table-header-group;background:linear-gradient(hotpink, white)}

.tbody{display:table-row-group;}

.tfoot{display: table-footer-group;}

/*ul li表单 同理*/

article>section>ul{display: table-row;}

article>section>ul>li{display: table-cell;border: 1px solid #dedede;padding: 10px;}

/*视觉欺骗 囧*/

.tbody>ul>li:first-of-type{border-bottom: none;border-top: none;width: 160px;box-sizing: border-box;}

.tbody>ul:first-of-type>li:first-of-type,.tbody>ul:nth-of-type(2)>li:first-of-type{background-color: rgb(173, 255, 105);}

.tbody>ul:last-of-type>li:first-of-type,.tbody>ul:nth-of-type(3)>li:first-of-type{background-color: rgb(108, 105, 255);color: white;}

.tbody>ul:nth-last-of-type(2)>li:first-of-type{border-top: 1px solid #dedede;}

.creat{position: absolute;}

.tfoot>ul>li{border-left: none;border-right: none;}

.tfoot>ul>li:first-of-type{border:1px solid #dedede}

.tfoot>ul>li:last-of-type{border-right:1px solid #dedede}

/*dl dd表单 同理*/

article>section>dl{display: table-row;}

article>section>dl>dd{display: table-cell;border: 1px solid #dedede;padding: 10px;}

ul li表单

• 1
• 1
• 1
• 1
• 1

• 上午
• 2
• 2
• 2
• 2

• 09:00-12:00
• 2
• 2
• 2
• 2

• 下午
• 2
• 2
• 2
• 2

• 14:00-18:00
• 2
• 2
• 2
• 2

• 合计
• 视觉欺骗.视觉欺骗.视觉欺骗.视觉欺骗

dl dd表单

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5

运行实例 »

需要加强，请求老师指点；；需要记住display:table...各个元素  ，

absolute居中实例

html>

登录

.login{width: 400px;height: 200px;background: linear-gradient(violet,lightsalmon);padding: 30px;box-sizing: border-box; position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -200px;

}

.login label{width: 140px;}

登录页面

用户名：

密码：

登录

运行实例 »

注意事项：当top:50% left:50%后，需要减去此登录窗口的width,height一半，才能居中对齐哦

圣杯布局，相对定位实例

html>

圣杯布局

html,

body {

padding: 0;

margin: 0;

}

header,

footer {

height: 60px;

background-color: #dedede;

text-align: center;

line-height: 60px;

}

main {

padding-left: 200px;

padding-right: 200px;

border: 3px dotted gold;

box-sizing: border-box;

/*转换为BFC块，使主体撑开*/

overflow: hidden;

}

main article, main aside{

box-sizing: border-box;

min-height: 600px;

float: left;

}

article {

width: 100%;

background: radial-gradient(at left bottom, red, white);

}

aside {

width: 200px;

position: relative;

}

aside:first-of-type {

background: radial-gradient(100px 100px, red, blue);

color: white;

margin-left: -100%;

left: -200px;

}

aside:last-of-type {

background: linear-gradient(to top left, green, white);

margin-left: -200px;

left: 200px;

}

头部

内容区域

左侧

右侧

底部

运行实例 »

1、父元素上设置了padding-left和padding-right

2、给左右两边的内容设置position为relative

3、通过左移和右移来使得左右两边的内容得以很好的展现

圣杯布局，绝对定位实例

html>

圣杯布局绝对定位

html,

body {

padding: 0;

margin: 0;

}

header,

footer {

height: 60px;

background-color: #dedede;

text-align: center;

line-height: 60px;

}

main {

padding-left: 200px;

padding-right: 200px;

border: 3px dotted gold;

box-sizing: border-box;

/*转换为BFC块，使主体撑开*/

overflow: hidden;

position: relative;

}

main article, main aside{

box-sizing: border-box;

min-height: 600px;

float: left;

}

article {

width: 100%;

background: radial-gradient(at left bottom, red, white);

}

aside {

width: 200px;

position: absolute;

}

aside:first-of-type {

background: radial-gradient(100px 100px, red, blue);

color: white;

left: 0;

}

aside:last-of-type {

background: linear-gradient(to top left, green, white);

right: 0;

}

头部

内容区域

左侧

右侧

底部

运行实例 »

点击 "运行实例" 按钮查看在线实例

双飞翼 实例

html>

双飞翼布局

html, body{margin: 0;padding: 0;}

header, footer{width: 100%;height: 60px;line-height: 60px;text-align: center;background-color: wheat;}

main{width: 100%;box-sizing: border-box;overflow: hidden;}

main>article:first-of-type{width: 100%;background:radial-gradient(white,red)}

main>article:first-of-type, aside{float: left;min-height: 600px;box-sizing: border-box;}

aside:first-of-type{width: 200px;margin-left: -100%;background:linear-gradient(to top right,green,white)}

aside:last-of-type{width: 200px;margin-left: -200px;background-color: greenyellow;}

main>article:first-of-type>article:first-of-type{margin: 0 200px 0;border: 2px solid gray;overflow: hidden;min-height: 600px;box-sizing: border-box;}

头部

内容区域

左侧

右侧

底部

运行实例 »

在article中再加了一个article来放置内容，在给这个新的子article设置margin-left和margin-right