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){
div border属性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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。