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父对象以上的层级没有添加相对定位属性，则以窗口为基准来移动。
手抄代码部分重复的行省略了
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
