php设计一个三行七列表格,CSS+DIV模拟Table表格实现行与列合并，盒模型绝对定位与相对定位，圣杯布局与双飞翼布局

布局与双飞翼布局"/>

php设计一个三行七列表格,CSS+DIV模拟Table表格实现行与列合并，盒模型绝对定位与相对定位，圣杯布局与双飞翼布局

1.制作一张商品信息表,内容自定,要求用到行与列的合并

*{

padding:0;

margin:0

}

.shop-list{

border-collapse: collapse;

color: #333;

}

.shop-list caption{

height: 40px;

line-height: 40px;

font-weight: bold;

background: #fff7dd;

border: solid 1px #eee;

border-bottom: none;

}

.shop-list thead tr:first-of-type{

background: #fce286;

}

.shop-list td,.shop-list th{

border: solid 1px #eee;

padding: 5px 10px;

}

.shop-list tbody tr td:nth-child(3){

text-align: center;

}

.shop-list tfoot td:first-child{

text-align: center;

font-weight: bold;

letter-spacing: 2em;

}

.shop-list button{

display: block;

width: 100px;

margin: 0 auto;

background: linear-gradient(#ffe9e9, #ff7c7c);

border: solid 1px #cf5454;

}

编号商品名称数量单价满减优惠

001小米pro9手机 12g 256g13899.00满1000减100002小米pro9手机壳 海绵宝宝 磨砂耐摔168.00003小米充电宝 4800mA毫安 秒冲 Type-C1128.00总计4095.00立即购买

2.使用

•  ...等标签来制作一张课程表

课程表

• 星期一
• 星期二
• 星期三
• 星期四
• 星期五

• HTML
• CSS
• Javascript
• PhP
• Photoshop

• CSS
• HTML
• PhP
• Javascript
• phpStorm

• HTML
• CSS
• Javascript
• PhP
• Photoshop

• HTML
• CSS
• Javascript
• PhP
• Photoshop

• Javascript
• PhP
• HTML
• Photoshop
• CSS

• Javascript
• CSS
• Photoshop
• HTML
• PhP

• Photoshop
• PhP
• CSS
• Javascript
• HTML

3.使用绝对定位,实现用户登录框在页面中始终居中显示

*{

margin: 0;

padding: 0;

}

.login{

width: 400px;

height: 280px;

background: #f8ffff;

border: solid 2px #a5acac;

position: absolute;

left: 50%;

top: 50%;

margin: -140px 0 0 -200px;

}

.login h3{

text-align: center;

height: 50px;

line-height: 50px;

background: #d6fbfb;

}

.login section{

margin: 30px auto 0;

width: 300px;

}

.login section label{

display: inline-block;

width: 70px;

height: 30px;

line-height: 30px;

}

.login input{

height: 30px;

line-height: 30px;

box-sizing: border-box;

}

.login section p{

padding: 10px;

}

.login button:first-of-type{

margin-right: 10px;

width: 50px;

}

.login p:last-of-type{

text-align: center;

}

欢迎登录

用户名：

密   码：

登录忘记密码？

4.模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路

圣杯布局的产生是为了解决在多列水平布局的时候，主体内容加载延后的问题，该布局在不影响布局的情况使下主体内容排序第一，使浏览器优先加载主体内容。

*{

padding: 0;

margin: 0;

text-align: center;

}

header{

background: #e6ffff;

}

footer{

background: #dcdcdc;

}

header,footer{

height: 80px;

line-height: 80px;

}

main{

padding: 0 150px;

overflow: hidden;

}

main *{

float: left;

min-height: 300px;

padding-top: 100px;

}

main article{

width: 100%;

background: #c7d4ff;

}

main aside{

width: 150px;

background: #9de2c4;

position: relative;

}

main aside:first-of-type{

margin-left: -100%;

left: -150px;

}

main aside:last-of-type{

margin-left: -150px;

left: 150px;

}HeaderArticleAsideAsidefooter

思路：将内容对象  包裹在标签中，设置浮动 float:left，将  的 width:100% 设置，使其跟随父对象高度独占一行，将  标签的 padding-left padding-right 属性值设置为两个  的宽度，为其预留显示位置。

由于 宽度100%的原因占据了 的空间，可以用margin-left负值，使标签与在同一行。 要将第一个标签移动到父对象的最左侧，其margin-left的属性应该是负的宽度：margin-left:-100%。第二个 margin-left的值应该是负它本身的宽度。

最后一步将两个  移动到  标签为其预留的位置，为 添加 position:relative 属性相对定位，第一个 left:-150px，left的负值是第一个  的宽度，第二个  的 left 属性因为是向右移动，所以直接添加left:150px即可。

5.(选做): 不使用

在使用 css+div 模拟 

课程表

• 星期一 星期二 星期三 星期四 星期五

• 上午 第一节 第二节 第三节 第四节 第一节 第二节 第三节 第四节 第一节 第二节 第三节 第四节 第一节 第二节 第三节 第四节 第一节 第二节 第三节 第四节

• 下午 第五节 第六节 第七节 第五节 第六节 第七节 第五节 第六节 第七节 第五节 第六节 第七节 第五节 第六节 第七节

• 备注事项： 放学后请将桌面收拾整洁，桌椅放回原位。

6.(选做): 将圣杯布局中的左右二列,使用绝对定位来实现

使用绝对定位要注意给最外侧  添加 position:relative 属性，否则两个浮动的  标签会以窗口浮动。

*{

padding:0;

margin:0

}

header,footer{

background:#eee;

text-align:center;

font-weight:bold;

padding:40px 0;

}

main {

position:relative;

padding:0 220px    }

main *{

padding:120px 0;

text-align:center;

min-height:400px    }

article{

background:#0f0;

width:100%;

}

aside{

background:#f00;

width:220px;

position:absolute;

}

aside:first-of-type{

top:0;

left:0;

}

aside:last-of-type{

top:0;

right:0;

}

Header标签

Article标签

Aside标签

Aside标签

Footer标签

7.(选做): 与圣杯类似的"双飞翼"布局如何实现,并实例演示

双飞翼布局与圣杯布局的区别是，圣杯布局通过内边距 padding 来给两侧边栏留出空间，双飞翼布局则是将content内容包裹在标签内，给 content 添加 margin 属性，来留出空间给两侧边栏。

*{

padding:0;

margin:0

}

header,footer{

background:#eee;

text-align:center;

font-weight:bold;

padding:40px 0;

}

main {

width:100%;

}

main aside,main article{

padding:120px 0;

text-align:center;

min-height:400px    }

.main_wrap{

float:left;

width:100%;

}

article{

background:#0f0;

margin:0 220px;

}

aside{

background:#f00;

width:220px;

float:left    }

aside:first-of-type{

margin-left:-100%;

}

aside:last-of-type{

margin-left:-220px;

}

Header标签

Article标签

Aside标签

Aside标签

Footer标签

总结使用css+div模拟table表格，层级嵌套和display属性要一一对照table嵌套层级，在做行与列合并的时候，尽量拆分每一行和每一列单元格，将数据都放在嵌套表里面，这样执行行列合并的时候不会影响布局，在最初设计表格的时候要考虑到边框重叠的问题，因为多个嵌套table，border-collapse属性已经没有效果了，只能单独使用选择器去掉重叠部分的边框。

圣杯布局和双飞翼布局的使用前提是：1. 中间栏必须是自适应宽度

2. 两侧边栏必须是固定宽度

3. 网站布局必须是3列分布

圣杯布局和双飞翼区别是，圣杯布局是挤压中间栏，使用padding来给两侧边栏留出显示空间，双飞翼是给中间栏的外层添加了一层包裹div，设置属性width:100%占据整行，float:left ，给被包裹用于显示的div，添加margin-leftmargin-right属性，数值是的宽度。

相对定位与绝对定位的区别是相对定位的top left bottom right属性是以当前盒子显示位置为基准来移动，绝对定位的top left bottom right父对象以上的层级没有添加相对定位属性，则以窗口为基准来移动。

手抄代码部分重复的行省略了