制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作一张商品信息表,内容自定,要求用到行与列的合并</title>
<style>
table {
border: 1px solid black;
box-sizing: border-box;
/*添加阴影*/
box-shadow: 1px 1px 1px lightslategray;
/*边框折叠*/
border-collapse: collapse;
/*距上边界50px 水平居中*/
margin:50px auto;
/*背景渐变*/
background:linear-gradient(lightslategray,white);
}
th,td {
border: 1px solid black;
padding: 15px;
/* 文本居中 */
text-align: center;
/* 文本描边 */
text-shadow: 1px 1px 1px lightseagreen;
}
</style>
</head>
<body>
<table>
<thead>
<caption><h3>英雄介绍</h3></caption>
<tr>
<th>MY</th>
<th>法师</th>
<th>刺客</th>
<th>坦克</th>
<th>射手</th>
<th>辅助</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">常用英雄</td>
<td>卡牌大师</td>
<td>疾风剑豪</td>
<td>亡灵战神</td>
<td>荣耀执行官</td>
<td>魂锁典狱长</td>
</tr>
<tr>
<td>邪恶小法师</td>
<td>影流之镰</td>
<td>德玛西亚皇子</td>
<td>探险家</td>
<td>堕落天使</td>
</tr>
<tr>
<td>非常用</td>
<td>大发明家</td>
<td>虚空行者</td>
<td>水晶先锋</td>
<td>英勇投弹手</td>
<td>星界游神</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">本命英雄:</td>
<!-- <td></td>-->
<!-- <td></td>-->
<!-- <td></td>-->
<!-- <td></td>-->
<td>德莱文</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
使用<div><span><p><ul>...等标签来制作一张课程表
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用div,span,,p,ul...等标签来制作一张课程表</title>
<style>
.table {
display: table;
box-sizing: border-box;
width: 580px;
height: 200px;
border: 1px solid black;
margin: auto;
border-collapse: collapse;
background: linear-gradient(lightcoral,white);
}
.caption {
display: table-caption;
text-align: center;
}
.thead {
display: table-header-group;
/*字间距*/
letter-spacing: 3px;
/* 文本居中*/
text-align: center;
font-size: 1.5rem;
color: white;
text-shadow: 1px 1px 1px black;
}
.tbody {
display: table-row-group;
text-align: center;
}
.tfoot {
display: table-footer-group;
/* 文本居中*/
text-align: center;
}
ul {
display: table-row;
}
ul > li {
display: table-cell;
border: 1px solid black;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="table">
<h3 class="caption">课程介绍</h3>
<span class="thead">
<ul>
<li>序号</li>
<li>课程</li>
<li>描述</li>
</ul>
</span>
<span class="tbody">
<ul>
<li>1</li>
<li>前端开发</li>
<li>HTML5常用标签，CSS3样式控制与页面布局</li>
</ul>
<ul>
<li>2</li>
<li>PHP开发</li>
<li>PHP语法，类与对象，常用开发技术与案例</li>
</ul>
<ul>
<li>3</li>
<li>大型CMS开发实战</li>
<li>laravel开发基础，laravel开发CMS全程精讲</li>
</ul>
</span>
<span class="tfoot">
<ul>
<li>备注</li>
<li>全程直播教学</li>
<li>每晚20：00到22：00（节假日除外）</li>
</ul>
</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 使用绝对定位,实现用户登录框在页面中始终居中显示</title>
<style>
.box {
box-sizing: border-box;
width: 400px;
height: 300px;
text-align: center;
position: absolute;
left:50%;
top: 50%;
}
.box2 {
border: 1px solid black;
position: relative;
left: -50%;
top: -50%;
}
</style>
</head>
<body>
<div class="box">
<div class="box2">
<p>
<label for="username">用户名:</label>
<input type="text" id="username" value="请输入用户名">
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" value="">
</p>
<button>登陆</button>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
设置基本结构，样式
将中间main设置了左右padding-left和padding-right，
将左右两个aside用相对布局position: relative，
移动后不遮挡中间article。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路</title>
<style>
header,footer {
height: 50px;
background-color: lightslategrey;
}
main{
box-sizing: border-box;
border: 1px solid red;
padding: 0 100px 0 100px;
overflow: auto;
}
article {
width: 100%;
height: 500px;
background-color: lightcoral;
}
aside {
box-sizing: border-box;
height: 500px;
width: 100px;
}
aside:first-of-type{
background-color: lightskyblue;
height: 500px;
margin-left: -100%;
position: relative;
left: -100px;
}
aside:last-of-type{
background-color: lightseagreen;
height: 500px;
margin-left: -100px;
position: relative;
left: 100px;
}
article, aside {
float: left;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article>内容区</article>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
不使用<table>...写表格时,如何实现行与列合并
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不使用table...写表格时,如何实现行与列合并</title>
<style>
.box{
width: 310px;
height: 305px;
margin: auto;
}
ul,li {
list-style: none;
padding: 0;
}
ul {
float: left;
text-align: center;
}
li {
width: 100px;
height: 100px;
float: left;
line-height: 100px;
border: 1px solid black;
/*使用margin属性的负值，隐藏重叠的边框*/
margin: 0 -1px -1px 0;
}
.test1>li:first-child{
background-color: lightseagreen;
width: 201px;
}
.test1>li:nth-child(5){
background-color: lightcoral;
height: 201px;
}
.test1>li:nth-child(6),.test1>li:nth-child(7){
position: relative;
top: -101px;
}
</style>
</head>
<body>
<div class="box">
<ul class="test1">
<li>1</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
将圣杯布局中的左右二列,使用绝对定位来实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将圣杯布局中的左右二列,使用绝对定位来实现</title>
<style>
*{
padding: 0px;
margin: 0px;
}
header,footer{
height: 50px;
background-color:lightslategrey;
}
main {
padding-left: 200px;
padding-right: 200px;
height: 600px;
overflow: auto;
}
article{
box-sizing: border-box;
width: 100%;
height: 600px;
background-color: lightskyblue;
}
aside:first-of-type {
width: 200px;
height: 600px;
background-color: lightgoldenrodyellow;
position: absolute;
left:0px;
top:50px;
}
aside:last-of-type {
width: 200px;
height: 600px;
background-color: lightpink;
position: absolute;
right:0px;
top:50px;
}
article, aside {
float: left;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article>内容区</article>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
与圣杯类似的"双飞翼"布局如何实现,并实例演示
给内容区article添加了一个父元素div（middle），
使用margin:0 200px 0 200px;给左右两侧留出位置，
用margin-left和margin-right分别把左右内容及右侧内容移到相应位置
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>与圣杯类似的"双飞翼"布局如何实现,并实例演示</title>
<style>
header,footer {
height: 60px;
background-color: lightslategrey;
text-align: center;
}
main {
box-sizing: border-box;
width: 100%;
height: 600px;
}
article{
margin: 0 200px 0 200px;
background-color: lightpink;
height: 600px;
}
.middle {
width: 100%;
/*height: 600px;*/
background-color: lightgoldenrodyellow;
}
aside:first-of-type {
width:200px;
height:600px;
margin-left:-100%;
background:lightskyblue;
}
aside:last-of-type {
width:200px;
height:600px;
margin-left:-200px;
background:#0c9;
}
.middle,aside {
float: left;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<div class="middle">
<article>内容区</article>
</div>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
更加快捷，方便的实现页面布局，使页面达到自己想要的样式
笔记：
