制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动定位与布局</title>
<style>
section > ul {
display: table-row;
}
section > ul > li {
display: table-cell;
border: 1px solid darkgrey;
padding: 10px;
}
.caption {
display: table-caption;
text-align: center;
}
.table{
display: table;
width: 650px;
margin: auto;
color: darkgrey;
box-shadow: 0 0 6px rgba(60,60,60,.8);
}
.thead{
display: table-header-group;
text-align: center;
font-weight: bold;
letter-spacing: 5px;
}
.tbody{
display: table-row-group;
}
.tfoot{
display: table-footer-group;
}
.ThisMyClass{
border:none;
}
.THisClassUl{
position: relative;
}
.abTop{
position: absolute;
margin-top: -20px;
margin-left: 18px;
}
</style>
</head>
<body>
<!-- 张商品信息表 -->
<article class="table">
<h3 class="caption">商品信息表</h3>
<section class="thead">
<ul>
<li>产品编码</li>
<li>商品名称</li>
<li>容量/ml</li>
<li>数量/瓶</li>
<li>售价/元</li>
</ul>
</section>
<section class="tbody">
<ul>
<li>001</li>
<li class="ThisMyClass"></li>
<li>600</li>
<li>6</li>
<li>3</li>
</ul>
<ul class="THisClassUl">
<li>002</li>
<li class="ThisMyClass abTop">可口可乐</li>
<li>350</li>
<li>12</li>
<li>2</li>
</ul>
<ul>
<li>003</li>
<li>百事可乐</li>
<li>350</li>
<li>35</li>
<li>2</li>
</ul>
<ul>
<li>004</li>
<li>百事可乐</li>
<li>600</li>
<li>80</li>
<li>3</li>
</ul>
<ul>
<li>005</li>
<li>果粒橙</li>
<li>550</li>
<li>32</li>
<li>3.5</li>
</ul>
<ul>
<li>006</li>
<li>汇源果汁</li>
<li>600</li>
<li>16</li>
<li>3</li>
</ul>
</section>
<section class="tfoot">
<ul>
<li>产品编码</li>
<li>商品名称</li>
<li>容量</li>
<li>单位</li>
<li>售价</li>
</ul>
</section>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 使用<div><span><p><ul>...等标签来制作一张课程表
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一张课程表</title>
<style type="text/css">
ul {
list-style: none;
}
.shop-list-div {
display: table;
border-collapse: collapse;
margin: 100px auto;
width: 600px;
}
.shop-list-div h3 {
height: 40px;
line-height: 40px;
font-weight: bold;
text-align: center;
display: table-caption;
border: solid 1px #eee;
border-bottom: none;
background: #dbfff5;
}
.shop-list-div .thead {
display: table-header-group;
background: #9ad3d4;
}
.shop-list-div .thead li {
font-weight: bold;
text-align: center;
}
.shop-list-div .tbody {
display: table-row-group;
}
.shop-list-div ul {
width: 100%;
display: table-row;
}
.shop-list-div li {
display: table-cell;
border: solid 1px #eee;
padding: 5px 10px;
text-align: center;
}
.shop-list-div .tbody li:nth-child(3) {
text-align: center;
} </style>
</head>
<body>
<div class="shop-list-div">
<h3>课程表</h3>
<section class="thead">
<ul>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
</ul>
</section>
<section class="tbody">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PhP</li>
<li>Photoshop</li>
</ul>
<ul>
<li>CSS</li>
<li>HTML</li>
<li>PhP</li>
<li>Javascript</li>
<li>phpStorm</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PhP</li>
<li>Photoshop</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PhP</li>
<li>Photoshop</li>
</ul>
<ul>
<li>Javascript</li>
<li>PhP</li>
<li>HTML</li>
<li>Photoshop</li>
<li>CSS</li>
</ul>
<ul>
<li>Javascript</li>
<li>CSS</li>
<li>Photoshop</li>
<li>HTML</li>
<li>PhP</li>
</ul>
<ul>
<li>Photoshop</li>
<li>PhP</li>
<li>CSS</li>
<li>Javascript</li>
<li>HTML</li>
</ul>
</section></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录框</title>
<style type="text/css">
*{
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;
}</style>
</head>
<body>
<form action="" class="login">
<h3>欢迎登录</h3>
<section>
<p><label for="username">用户名：</label><input type="text" id="username" name="username" required placeholder="请输入用户名"></p>
<p><label for="password">密 码：</label><input type="text" id="password" name="password" required placeholder="请输入密码"></p>
<p><button>登录</button><a href="">忘记密码？</a></p>
</section></form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路