表格、浮动定位与布局基础应用案列 - 第九期线上班 - 我的博文

Home > List of blog posts > 表格、浮动定位与布局基础应用案列 - 第九期线上班

Blogger Information

Blog 7

fans 0

comment 0

visits 3542

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品信息表</title>
    <style>
		table{
			width: 550px;
			border: #444444 1px solid;
			color: #444444;
			box-sizing: border-box;
			/*box-shadow: 1px 1px 1px #999999;*/
			border-collapse: collapse;
			margin: 50px auto;
		}
		caption{
			font-size: 1.5rem;
			margin-bottom: 10px;
		}
		th, td{
			border: #444444 1px solid;
			padding: 10px 0;
		}
		td{
			text-align: center;
		}
		thead tr{
			background: linear-gradient(#444444,white);
		}
		tbody tr:nth-of-type(odd){
			background-color: #cccccc;
		}
		tbody > tr:nth-of-type(3) > td:nth-child(3){
			background: radial-gradient(#b0b0b0,white);
		}
		tfoot tr{
			background: linear-gradient(to top,#cccccc,white);
		}
		tfoot > tr > td:first-of-type{
			background: radial-gradient(#777777,white);
		}
	</style>
</head>
<body>
<table>
    <caption>商品信息表</caption>
    <thead>
        <tr>
            <th>序号</th>
            <th>名称</th>
            <th>单价（元）</th>
            <th>库存（件）</th>
            <th>总价（元）</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>苹果11</td>
            <td>6000</td>
            <td>10</td>
            <td>60000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>华为P30_PRO</td>
            <td>5000</td>
            <td>10</td>
            <td>50000</td>
        </tr>
        <tr>
            <td>3</td>
            <td>华为nova5_PRO</td>
            <td rowspan="2">3000</td>
            <td>20</td>
            <td>60000</td>
        </tr>
        <tr>
            <td>4</td>
            <td>红米K20_PRO</td>
            <td>10</td>
            <td>30000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合计：</td>
            <td>50</td>
            <td>200000</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

运行实例 »

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

Image 1.jpg

二、使用<div><span><p><ul>等标签来制作一张课程表

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>某某中学1911班课程/值日表</title>
    <style>
		.table{
			display: table;
			box-sizing: border-box;
			/*表格线折叠*/
			border-collapse: collapse;
			border: #444444 1px solid;
			margin: auto;
			color: #444444;
		}
		.caption{
			/*转换为表格标题*/
			display: table-caption;
			text-align: center;
		}
		.thead{
			/*转换为表格头部*/
			display: table-header-group;
			text-align: center;
			font-size: 1.2rem;
			font-weight: bold;
		}
		.tbody{
			/*转换为表格主体*/
			display: table-row-group;
		}
		section ul{
			/*将所有的ul转换为行*/
			display: table-row;
		}
		section li{
			/*将所有的li转换为单元格*/
			display: table-cell;
			border: #444444 1px solid;
			text-align: center;
			padding: 10px 0;
		}
		.tfoot{
			/*转换为表格脚部*/
			display: table-footer-group;
			text-align: center;
		}
		/*控制表格第一列的宽度*/
		ul:nth-of-type(n) > li:first-of-type{
			width: 130px;
		}
		/*控制表格（n+2）列的宽度*/
		ul:nth-of-type(n) > li:nth-of-type(n+2){
			width: 130px;
		}
		.thead > ul:first-of-type{
			background: linear-gradient(#444444,white);
		}
		.thead > ul:first-of-type > li:first-of-type{
			background: #444444;
			color: white;
			font-weight: bold;
			letter-spacing: 2px;
		}
		/*选择奇数行*/
		/*.tbody > ul:nth-of-type(odd){*/
		/*    background: #cccccc;*/
		/*}*/
		/*选择偶数列*/
		.tbody > ul > li:nth-of-type(even){
			background: #cccccc;
		}
		.tfoot > ul:first-of-type{
			background: linear-gradient(to top,#888888,white);
		}
		.tfoot > ul:first-of-type > li:first-of-type{
			background: #444444;
			color: white;
			font-weight: bold;
			letter-spacing: 2px;
		}
	</style>
</head>
<body>
<article class="table">
    <h2 class="caption">某某中学1911班课程/值日表</h2>
    <section class="thead">
        <ul>
            <li>时间</li>
            <li>星期一</li>
            <li>星期二</li>
            <li>星期三</li>
            <li>星期四</li>
            <li>星期五</li>
        </ul>
    </section>
    <section class="tbody">
        <ul>
            <li>9:00-10:00</li>
            <li>政治</li>
            <li>英语</li>
            <li>地理</li>
            <li>语文</li>
            <li>生物</li>
        </ul>
        <ul>
            <li>10:00-11:00</li>
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
            <li>地理</li>
            <li>历史</li>
        </ul>
        <ul>
            <li>11:00-12:00</li>
            <li>数学</li>
            <li>政治</li>
            <li>地理</li>
            <li>语文</li>
            <li>生物</li>
        </ul>
        <ul>
            <li>14:00-15:00</li>
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
            <li>地理</li>
            <li>历史</li>
        </ul>
        <ul>
            <li>15:00-16:00</li>
            <li>数学</li>
            <li>英语</li>
            <li>地理</li>
            <li>语文</li>
            <li>生物</li>
        </ul>
        <ul>
            <li>16:00-17:00</li>
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
            <li>地理</li>
            <li>政治</li>
        </ul>
    </section>
    <section class="tfoot">
        <ul>
            <li>值日组长</li>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
            <li>马六</li>
            <li>孙七</li>
        </ul>
    </section>
</article>
</body>
</html>

运行实例 »

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

Image 2.jpg

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
		.box{
			width: 300px;
			height: 180px;
			border: #444444 1px solid;
			box-sizing: border-box;
			position: absolute;
			margin: auto;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
		.box1{
			text-align: center;
			border: #444444 1px solid;
			background-color: #cccccc;
			height: 50px;
			line-height: 50px;
			margin: -1px -1px -1px;
			font-weight: bold;
			letter-spacing: 3px;
		}
		.box2{
			text-align: center;
			height: 40px;
			line-height: 40px;
		}
		.box3{
			height: 50px;
			text-align: center;
		}
		.box4{
			display: inline-block;
			overflow: hidden;
			margin: 10px 10px 10px;
		}
			</style>
</head>
<body>
<div class="box">
<div class="box1">用户登录</div>
    <form action="login.php" method="POST">
        <div class="box2">
            <label for="username">账号：</label>
            <input type="text" id="username" value="username">
        </div>
        <div class="box2">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" placeholder="不能少于6位">
        </div>
        <div class="box3">
            <span class="box4">
                <input type="button" name="button" value="注册">
            </span>
            <span class="box4">
                <input type="submit" name="submit" value="登录">
            </span>
        </div>
    </form>
</div>
</body>
</html>

运行实例 »

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

Image 8.jpg

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局（相对定位实现）</title>
    <style>
		body{
			margin: auto;
		}
		header, footer{
			height: 50px;
			background-color: #cccccc;
			text-align: center;
			line-height: 50px;
		}
		main{
			padding: 0 200px;
			border: #4f73ff 1px solid;
			box-sizing: border-box;
			overflow: hidden;
		}
		article{
			width: 100%;
			box-sizing: border-box;
			padding: 10px;
			text-align: center;
			float: left;
			height: 500px;
			background-color: #4f73ff;
		}
		.left{
			width: 200px;
			height: 500px;
			box-sizing: border-box;
			background-color: lightblue;
			padding-top: 10px;
			text-align: center;
			float: left;
			margin-left: -100%;
			position: relative;
			left: -200px;
		}
		.right{
			width: 200px;
			height: 500px;
			box-sizing: border-box;
			background-color: #b0b2e6;
			padding-top: 10px;
			text-align: center;
			float: left;
			margin-left: -200px;
			position: relative;
			right: -200px;
		}
			</style>
</head>
<body>
<header>头部</header>
<main>
    <article>我是圣杯布局（相对定位实现）主体内容区</article>
    <aside class="left">左侧栏</aside>
    <aside class="right">右侧栏</aside>
</main>
<footer>底部</footer>
</body>
</html>

运行实例 »

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

Image 4.jpg

圣杯布局（相对定位）：设置主体盒子内边距padding:0 200px(或其他尺寸)，预留出左右侧栏空间，通过设置左侧栏左浮动，将margin-left设为-100%拉至主体内容区左上顶点（未设置定位，子盒子永远无法超过父盒子内边距），再设置定位positon为relative（相对于主体盒子），值为-200px，将左侧栏定位到主体盒子边框左上角零点；右侧栏同理。

五、将圣杯布局中的左右两列，使用绝对定位来实现

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局（绝对定位实现）</title>
    <style>
		body{
			margin: auto;
		}
		header, footer{
			height: 50px;
			background-color: #cccccc;
			text-align: center;
			line-height: 50px;
		}
		main{
			padding: 0 200px;
			border: #4f73ff 1px solid;
			box-sizing: border-box;
			overflow: hidden;
			position: relative;
		}
		article{
			width: 100%;
			box-sizing: border-box;
			padding: 10px;
			text-align: center;
			float: left;
			height: 500px;
			background-color: #4f73ff;
		}
		.left{
			width: 200px;
			height: 500px;
			box-sizing: border-box;
			background-color: lightblue;
			padding-top: 10px;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
		}
		.right{
			width: 200px;
			height: 500px;
			box-sizing: border-box;
			background-color: #b0b2e6;
			padding-top: 10px;
			text-align: center;
			position: absolute;
			top: 0;
			right: 0;
		}
	</style>
</head>
<body>
<header>头部</header>
<main>
    <article>我是圣杯布局（绝对定位实现）主体内容区</article>
    <aside class="left">左侧栏</aside>
    <aside class="right">右侧栏</aside>
</main>
<footer>底部</footer>
</body>
</html>

运行实例 »

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

Image 5.jpg

六、与圣杯类似的"双飞翼"布局如何实现，并实例演示

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局（绝对定位实现）</title>
    <style>
		body{
			margin: auto;
		}
		header, footer{
			height: 50px;
			background-color: #cccccc;
			text-align: center;
			line-height: 50px;
		}
		main{
			border: #4f73ff 1px solid;
			box-sizing: border-box;
			overflow: hidden;
			position: relative;
		}
		article{
			height: 500px;
			box-sizing: border-box;
			margin: 0 200px;
			padding: 10px;
			text-align: center;
			background-color: #4f73ff;
		}
		.left{
			width: 200px;
			height: 500px;
			box-sizing: border-box;
			background-color: lightblue;
			padding-top: 10px;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
		}
		.right{
			width: 200px;
			height: 500px;
			box-sizing: border-box;
			background-color: #b0b2e6;
			padding-top: 10px;
			text-align: center;
			position: absolute;
			top: 0;
			right: 0;
		}
	</style>
</head>
<body>
<header>头部</header>
<main>
    <article>我是双飞翼布局（绝对定位实现）主体内容区</article>
    <aside class="left">左侧栏</aside>
    <aside class="right">右侧栏</aside>
</main>
<footer>底部</footer>
</body>
</html>

运行实例 »

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

Image 7.jpg

双飞翼布局（绝对定位实现）：设置主体内容区盒子外边距margin:0 200px(或其他尺寸)，预留出左右侧栏空间，设置主体盒子定位为position:relative，添加左侧栏盒子绝对定位positon:absolute（相对于它的父盒子），设置定位值top、left均为0即可将左侧栏定位到主体盒子边框左上角零点；右侧栏同理。

Correction status：qualified

Teacher's comments：表格做的很酷, 手写不错, 继续

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

仿PHP中文网移动端布局 - 第九期线上班

2019-11-10 21:58:09