* 制作一张商品信息表,内容自定,要求用到行与列的合并 *
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品表</title> <link rel="stylesheet" href="/static/css/proCss.css"> </head> <body> <table> <caption>京东数码家电</caption> <thead> <tr> <th>编号</th> <th>商品名</th> <th>类型</th> <th>价格</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>华为Mate30Pro 5G版</td> <td rowspan="2" >手机</td> <td>6899</td> </tr> <tr> <td>2</td> <td>海信(Hisense)A6双屏手机 </td> <td>2649</td> </tr> <tr> <td>3</td> <td>格力（GREE）大1匹 </td> <td>空调</td> <td>3198</td> </tr> <tr> <td>4</td> <td>美的（Midea）家用直饮净水器</td> <td>净水器</td> <td>1798</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">合计</td> <td>9999</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
table {
color: #999999;
box-sizing: border-box;
/*阴影*/
box-shadow: 1px 1px 1px #999999;
/*将边框线折叠*/
border-collapse: collapse;
width: 700px;
/*居中*/
margin: 20px auto;
}
/*表格设置单元格边框*/
td,th {
border: 1px solid #444;
text-align: center;
padding: 10px;
}
/*设置表格标题*/
table caption {
font-size: 1.3rem;
margin-bottom: 15px;
color: #333333;
}
/*隔行变色*/
tbody tr:nth-of-type(odd) {
background-color: lightblue;
}
/*表头颜色渐变*/
table thead > tr {
background: linear-gradient(lightsalmon,white);
}
/*表格底部*/
table tfoot > tr:first-of-type {
background: linear-gradient(yellowgreen,white);
}
/*第一个tr下面的第一个单元格设置渐变*/
table tbody > tr:first-of-type > td:first-of-type {
background: linear-gradient(red,white);
}
/*第二个tr下面的第一个单元格设置渐变*/
table tbody > tr:nth-of-type(2) > td:first-of-type {
background: linear-gradient(blueviolet,white);
}
/*第三个tr下面的第一个单元格设置渐变*/
table tbody > tr:nth-of-type(3) > td:first-of-type {
background: linear-gradient(to right,salmon,white);
}运行实例 »
点击 "运行实例" 按钮查看在线实例
效果：
*使用<div><span><p><ul>...等标签来制作一张课程表 *
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>食品热量表</title> <link rel="stylesheet" href="/static/css/divtable.css"> </head> <body> <!--表格--> <div class="table"> <!-- 标题--> <h2 class="caption">食品热量表</h2> <!-- 表头--> <span class="thead"> <ul> <li>名称</li> <li>分类</li> <li>热量</li> </ul> </span> <span class="tbody"> <ul> <li>燕麦</li> <li>谷薯芋、杂豆、主食</li> <li>338 大卡（100克）</li> </ul> <ul> <li>面条</li> <li>谷薯芋、杂豆、主食</li> <li>110 大卡（100克）</li> </ul> <ul> <li>鸡蛋</li> <li>蛋类、肉类及制品</li> <li>144 大卡（100克可食部分）</li> </ul> <ul> <li>猪蹄</li> <li>蛋类、肉类及制品</li> <li>260 大卡（100克可食部分）</li> </ul> <ul> <li>豆浆</li> <li>坚果、大豆及制品</li> <li>31 大卡（100毫升）</li> </ul> <ul> <li> 核桃（干）</li> <li>坚果、大豆及制品</li> <li>646 大卡（100克可食部分）</li> </ul> </span> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.table {
display: table;
box-sizing: border-box;
border-collapse: collapse;
border: 1px solid #999999;
width: 500px;
margin: auto;
color: #444;
background-color: salmon;
}
.caption {
display: table-caption;
text-align: center;
}
.thead {
display: table-header-group;
text-align: center;
font-weight: bold;
font-size: 1.2rem ;
/*字间距*/
letter-spacing: 5px;
background: linear-gradient(green,white);
color: white;
text-shadow: 1px 1px 0 black;
}
.tbody > ul > li:first-of-type {
text-align: center;
}
.tbody {
display: table-row-group;
}
span ul {
display: table-row;
}
span ul li {
display: table-cell;
border: 1px solid #444;
padding: 10px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
* 使用绝对定位,实现用户登录框在页面中始终居中显示 *
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位居中显示</title>
<style>
.box1 {
box-sizing: border-box;
text-align: center;
width: 300px;
border: 1px solid blueviolet;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="box1">
<form action="">
<p>
<label for="username">账号</label>
<input type="text" id="username">
</p>
<p>
<label for="password">密码</label>
<input type="text" id="password">
</p>
<p>
<input type="submit" value="登录">
</p>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路 *
圣杯布局dom结构：头部，主体，尾部
圣杯布局实现主体内容部分左右两侧固定，中间自适应
主体部分设置宽度自适应，使用内边距预留出左右两侧的空间。
使用相对定位和外边距将左右两侧对齐到相应预留的位置
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位布局实战: 圣杯布局</title>
<style>
header, footer {
height: 60px;
background-color: lightgray;
}
main {
box-sizing: border-box;
border: 1px solid orangered;
/*预留左右两侧空间*/
padding-left: 200px;
padding-right: 200px;
overflow: hidden;
}
main > article {
/*宽度自适应*/
width: 100%;
min-height: 600px;
background-color: lightskyblue;
}
main > aside:first-of-type {
/*最小高度*/
min-height: 600px;
background-color: orangered;
width: 200px;
/*使用外边距将子元素拉到主体的左边*/
margin-left: -100%;
position: relative;
/*使用相对定位left往左侧拉-200px*/
left: -200px;
}
main > aside:last-of-type {
min-height: 600px;
background-color: orange;
width: 200px;
position: relative;
margin-right: -100%;
}
main article,
main aside:first-of-type,
main aside:last-of-type {
float: left;
}
</style>
<!-- <link rel="stylesheet" href="/static/css/shengbei.css">-->
</head>
<body>
<header class="header">头部</header>
<main class="main">
<article class="article">内容区</article>
<aside class="left">左侧</aside>
<aside class="right">右侧</aside>
</main>
<footer class="tfoot">底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* (选做): 将圣杯布局中的左右二列,使用绝对定位来实现 *
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位布局实战: 圣杯布局</title>
<style>
/*圣杯布局实现主体内容部分左右两侧固定，中间自适应*/
/*主体部分设置宽度自适应，使用内边距预留出左右两侧的空间。*/
/*使用相对定位和外边距将左右两侧对齐到相应预留的位置*/
header, footer {
height: 60px;
background-color: lightgray;
}
main {
box-sizing: border-box;
border: 1px solid orangered;
/*预留左右两侧空间*/
padding-left: 200px;
padding-right: 200px;
overflow: auto;
/*子元素有绝对定位时，祖先元素需设置除static定位的定位属性*/
position: relative;
}
main > article {
/*宽度自适应*/
width: 100%;
min-height: 600px;
background-color: lightskyblue;
}
main > aside:first-of-type {
/*最小高度*/
min-height: 600px;
background-color: orangered;
width: 200px;
/*使用外边距将子元素拉到主体的左边*/
/* margin-left: -100%; */
position: absolute;
left: 0;
}
main > aside:last-of-type {
min-height: 600px;
background-color: orange;
width: 200px;
position: absolute;
right: 0;
}
main article,
main aside:first-of-type,
main aside:last-of-type {
float: left;
}
</style>
<!-- <link rel="stylesheet" href="/static/css/shengbei.css">-->
</head>
<body>
<header class="header">头部</header>
<main class="main">
<article class="article">内容区</article>
<aside class="left">左侧</aside>
<aside class="right">右侧</aside>
</main>
<footer class="tfoot">底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* (选做): 与圣杯类似的"双飞翼"布局如何实现,并实例演示
1,内容主题自适应，左右两侧全部靠左浮动
2,左侧使用margin-left:负值向左拉动
3,右侧使用margin-left:负值向左拉动自己自身宽度的距离
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
float: left;
width: 100%;
height: 500px;
background:red;
}
.left{
float: left;
width: 200px;
height: 500px;
margin-left: -100%;
background:lightgreen;
}
.right{
float: left;
width: 180px;
height: 500px;
margin-left: -180px;
background:lightcoral;
}
.main{
margin: 0 180px 0 200px;
}
</style>
</head>
<body>
<!-- 双飞翼布局(float + 负margin + margin) -->
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
上班，出差课程没跟上 - -