php浮动布局,浮动定位与布局 - php_培训第九期前端 作业 - php中文网博客

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

html>

商品信息列表

table {

border:1px solid #444444;

box-sizing: border-box;

border-collapse: collapse;

width: 700px;

margin: 20px auto;

}

th ,td{

border:1px solid #444444;

/*文本居中*/

text-align: center;

padding: 10px;

}

table caption{

font-size: 1.3rem;

margin-bottom: 15px;

}

分类名称数量金额

手机oppo11000华为11000小米11000电脑mac110000联想110000华硕110000空调海尔110000美的110000甜品110000合计63000

运行实例 »

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

二、使用

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

html>

课程表

.table{

display: table;

box-sizing: border-box;

border-collapse: collapse;

border: 1px solid #444;

width: 800px;

margin: auto;

color: #444;

}

.caption {

/*以

标签样式显示*/

display: table-caption;

text-align: center;

}

.thead {

display: table-header-group;

text-align: center;

font-size: 1.2rem;

/*字间距拉开*/

letter-spacing: 5px;

color: white;

/*加一个阴影*/

text-shadow: 1px 1px 0 black;

background: linear-gradient(red, white);

}

.tbody{

display: table-row-group;

}

/*将所有的ul转为行*/

div ul{

display: table-row;

text-align: center;

}

div  li{

display: table-cell;

}

div ul li{

border: 1px solid #444 ;

padding: 10px;

text-align: center;

}

.tfoot{

display: table-footer-group;

}

span{

display: table-cell;

border: 1px solid #444444;

text-align: center;

padding: 10px;

}

.morning{

/*合并单元格*/

border:none;

text-align: center;

}

.Afternoon{

border:none;

text-align: center;

}

.abTop{

/*position: absolute;*/

position: absolute;

margin-top: -25px;

margin-left: 18px;

}

.as{

border-width: 1px 0 0 0;

}

课程表

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

• 化学
• 语文
• 数学
• 音乐
• 体育

• 化学
• 语文
• 数学
• 音乐
• 体育

• 上午
• 化学
• 语文
• 数学
• 音乐
• 体育

• 化学
• 语文
• 数学
• 音乐
• 体育

• 化学
• 语文
• 数学
• 音乐
• 体育

• 下午
• 化学
• 语文
• 数学
• 音乐
• 体育

第一组值日

第二组值日

第三组值日

第四组值日

全体打扫除

运行实例 »

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

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

html>

表单伪类选择器

/*input框里背景*/

input:enabled {

background-color: #28ff5c;

}

/*选择禁用*/

input:disabled {

background-color: lightgray;

}

/*选择所有必选项*/

input:required {

background-color: yellow;

}

div{

position: absolute;

left: 50%;

margin-left: -150px; width:300px;

}

h3{

text-align: center;

}

用户注册

账户:

密码:

邮箱:

注册

运行实例 »

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

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

html>

圣杯布局

header, footer {

height: 60px;

background-color: red;

}

main {

border: 2px solid red;

padding-left: 200px;

padding-right: 200px;

box-sizing: border-box;

overflow: auto;

}

main > article {

box-sizing: border-box;

background-color: lightblue;

width: 100%;

min-height: 600px;

}

main > aside {

box-sizing: border-box;

min-height: 600px;

width: 200px;

}

main > aside:first-of-type {

background-color: lightgreen;

}

main  > aside:last-of-type{

background-color: lightpink;

}

main > article,

main > aside:first-of-type,

main > aside:last-of-type {

float: left;

}

aside:first-of-type {

margin-left: -100%;

position: relative;

left: -200px;

}

aside:last-of-type {

margin-left: -200px;

position: relative;

left: 200px;

}

头部

内容区

左侧

右侧

底部

运行实例 »

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