一、制作一张商品信息表,内容自定,要求用到行与列的合并
1、代码实现
html代码
实例
<table> <caption>商品信息表</caption> <thead> <tr> <th>商品编号</th> <th>商品信息</th> <th>出产地</th> <th>单价（元）</th> <th>数量（元）</th> <th>合计（元）</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>ikbc键盘</td> <td>中国台湾</td> <td>349</td> <td>2</td> <td>698</td> <td rowspan="5"></td> </tr> <tr> <td>002</td> <td>CPU</td> <td>***</td> <td>999</td> <td>1</td> <td>999</td> </tr> <tr> <td>003</td> <td>内存条</td> <td>中国</td> <td>300</td> <td>3</td> <td>900</td> </tr> <tr> <td>004</td> <td>主板</td> <td>***</td> <td>500</td> <td>1</td> <td>500</td> </tr> <tfoot> <tr> <td colspan="4">合计</td> <td>7</td> <td>2997</td> <td>第一联</td> </tr> </tfoot> </tbody> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码
实例
/* 设置表格属性 */
table{
box-sizing: border-box;
box-shadow: 1px 1px 1px #999999;
/* 设置边框合并 */
border-collapse: collapse;;
}
/* 设置表格的宽度与文字排版 */
table{
width: 700px;
margin: 20px auto;
}
/* 给每一个表格设置边框 */
th , td{
border: 1px solid gray;
}
/* 设置表格的标题 */
table caption{
font-size: 1.3rem;
margin-bottom: 15px;
}
/* 设置单元格样式 */
td,th{
text-align: center;
padding: 10px;
}
/* 隔行变色 */
tbody tr:nth-of-type(odd){
background-color: hotpink;
}
tbody tr:nth-of-type(even){
background-color: khaki;
}
tbody tr:nth-of-type(1)>td:last-of-type{
background-color: white;
}
th{
background: linear-gradient(green,white);
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2.实现效果
二、使用<div><span><p><ul>...等标签来制作一张课程表
1.代码实现
html代码
实例
<article class="table"> <h2 class="caption">第九期课程安排</h2> <section class="thead"> <ul> <li>星期</li> <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> </ul> </section> <section class="tbody"> <ul> <li>8:30-9:15</li> <li>语文</li> <li>数学</li> <li>英语</li> <li>政治</li> <li>美术</li> </ul> <ul> <li>9:30-10:15</li> <li>数学</li> <li>语文</li> <li>数学</li> <li>美术</li> <li>政治</li> </ul> <ul> <li>10:45-11:30</li> <li>数学</li> <li>政治</li> <li>语文</li> <li>英语</li> <li>美术</li> </ul> <ul> <li>13:30-14:15</li> <li>语文</li> <li>政治</li> <li>数学</li> <li>美术</li> <li>英语</li> </ul> <ul> <li>14:30-15:15</li> <li>数学</li> <li>政治</li> <li>语文</li> <li>英语</li> <li>美术</li> </ul> <ul> <li>15:45-16:30</li> <li>语文</li> <li>数学</li> <li>英语</li> <li>政治</li> <li>美术</li> </ul> </section> </article>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码
实例
.table{
/* 以<table>标签样式显示 */
display: table;
box-sizing: border-box;
border-collapse: collapse;
width: 600px;
margin: auto;
color: gray;
/* border: 1px solid red; */
}
.caption{
/* 以<caption>标签样式显示 */
display: table-caption;
text-align: center;
}
.thead{
/* 以<thead>标签样式显示 */
display: table-header-group;
/* 设置页眉文本样式 */
text-align: center;
/* 字体大小为根字体1.2倍 */
font-size: 1.2rem;
/* 加粗 */
font-weight: bold;
/* 字间距 */
letter-spacing: 5px;
/* 前景色 */
color: white;
/* 字体阴影 */
text-shadow: 1px 1px 0 black;
/* 设置背景色 */
background: linear-gradient(green,white);
}
.tbody{
display: table-row-group;
/* text-height: auto; */
}
ul{
display: table-row;
height: 50px;
text-align: center;
line-height: 50px;
}
li{
display: table-cell;
border: 1px solid gray;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
2.实现效果
三、使用绝对定位,实现用户登录框在页面中始终居中显示
1、代码实现
html代码
实例
<form> <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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码
实例
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.实现效果
四、模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
圣杯布局的产生是为了解决在多列水平布局的时候，主体内容加载延后的问题，该布局在不影响布局的情况使下主体内容排序第一，使浏览器优先加载主体内容。
实例
<body> <header>Header</header> <main> <article>Article</article> <aside>Aside</aside> <aside>Aside</aside> </main> <footer>footer</footer> </body>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<style type="text/css">
*{
padding: 0;
margin: 0;
text-align: center;
}
header{
background: #e6ffff;
}
footer{
background: #dcdcdc;
}
header,footer{
height: 80px;
line-height: 80px;
}
main{
padding: 0 150px;
overflow: hidden;
}
main *{
float: left;
min-height: 300px;
padding-top: 100px;
}
main article{
width: 100%;
background: #c7d4ff;
}
main aside{
width: 150px;
background: #9de2c4;
position: relative;
}
main aside:first-of-type{
margin-left: -100%;
left: -150px;
}
main aside:last-of-type{
margin-left: -150px;
left: 150px;
}</style>运行实例 »
点击 "运行实例" 按钮查看在线实例
思路：1.将内容对象 <article> <aside> <aside> 包裹在<main>标签中，设置浮动 float:left，将 <article> 的 width:100% 设置，使其跟随父对象高度独占一行，将 <main> 标签的 padding-left padding-right 属性值设置为两个 <aside> 的宽度，为其预留显示位置。
2.由于<article> 宽度100%的原因占据了<aside> 的空间，可以用margin-left负值，使<aside>标签与<article>在同一行。 要将第一个<aside>标签移动到父对象<main>的最左侧，其margin-left的属性应该是负<article>的宽度：margin-left:-100%。第二个<aside> margin-left的值应该是负它本身的宽度。
3.将两个 <aside> 移动到 <main> 标签为其预留的位置，为<aside> 添加 position:relative 属性相对定位，第一个<aside> left:-150px，left的负值是第一个 <aside> 的宽度，第二个 <aside> 的 left 属性因为是向右移动，所以直接添加left:150px即可。
