收藏
批改狀態(tài)：合格
老師批語：非常的認真, 看手抄本, 應(yīng)該是晚上加班寫的, 作業(yè)完成的很棒
所有實例均可直接運行
* 制作一張商品信息表,內(nèi)容自定,要求用到行與列的合并
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
table {
border: 1px solid #444444;
color: #444;
box-sizing: border-box;
box-shadow: 1px 1px 1px #999;
}
/*給每一個單元格也加上邊框, 單元格包括td,th*/
th, td {
border: 1px solid #444444;
}
/*將表格中所有的邊框線進行折疊*/
table {
border-collapse: collapse;
}
/*設(shè)置表格的寬度與文字排版*/
table {
width: 700px;
margin: 20px auto;
}
/*設(shè)置表格的標題*/
table caption {
font-size: 1.3rem;
margin-bottom: 15px;
}
/*設(shè)置單元格的樣式*/
th, td {
text-align: center;
padding: 10px;
}
/*在偶數(shù)行上實現(xiàn)隔行變色效果*/
tbody tr:nth-of-type(even) {
background-color: pink;
}
/*設(shè)置表頭樣式*/
table thead > tr:first-of-type {
background: linear-gradient(lightgreen, honeydew);
}
/*設(shè)置底部樣式*/
table tfoot > tr:last-of-type {
background: radial-gradient(yellow, white);
}
</style>
<title>Document</title>
</head>
<body>
<table>
<caption>商品信息表</caption>
<!--頁眉-->
<thead>
<tr>
<th>折扣</th>
<th>名稱</th>
<th>單價</th>
<th>庫存</th>
<th>金額</th>
</tr>
</thead>
<!-- 主體-->
<tbody>
<tr>
<td rowspan="2">5折優(yōu)惠</td>
<td>紀梵希</td>
<td>300RMB</td>
<td>10PCS</td>
<td>1000RMB</td>
</tr>
<tr>
<td>圣羅蘭</td>
<td>300RMB</td>
<td>10PCS</td>
<td>1000RMB</td>
</tr>
<tr>
<td>8折優(yōu)惠</td>
<td>迪奧</td>
<td>300PCS</td>
<td>10PCS</td>
<td>1000RMB</td>
</tr>
</tbody>
<!-- 頁腳-->
<tfoot>
<tr>
<td colspan="3">total</td>
<td>30PCS</td>
<td>9000RMB</td>
</tr>
</tfoot>
</table>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
* 使用<div><span><p><ul>...等標簽來制作一張課程表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>找個姿勢寫表格</title>
<style type="text/css">
.table {
/*以<table>標簽樣式顯示*/
display: table;
/*設(shè)置表格的基本樣式*/
/*確保內(nèi)部單元格如何變化,寬度總不變*/
box-sizing: border-box;
/*因為后面單元格也會設(shè)置邊框,所以這里的邊框只是可選*/
/*border: 1px solid #444;*/
/*折疊單元格之間的邊框線, 消除間隙*/
border-collapse: collapse;
width: 650px;
margin: auto;
}
.caption {
/*以<caption>標簽樣式顯示*/
display: table-caption;
text-align: center;
}
.thead {
/*以<thead>標簽樣式顯示*/
display: table-header-group;
/*設(shè)置頁眉文本樣式*/
text-align: center;
/*字體大小為頁面根字體1.2倍*/
font-size: 1.2rem;
/*加粗*/
font-weight: bold;
/*字間距*/
letter-spacing: 5px;
/*前景色*/
}
.tbody {
/*以<tbody>標簽樣式顯示*/
display: table-row-group;
}
/*將第一列(序號列)文本居中對齊顯示*/
.tbody > ul > li:first-of-type {
text-align: center;
}
.tfoot {
/*以<tfoot>標簽樣式顯示*/
display: table-footer-group;
background-color: #ededed;
}
/*將所有<ul>轉(zhuǎn)為<tr>標簽樣式*/
section > ul {
display: table-row;
}
/*將所有的<li>轉(zhuǎn)為<td>標簽樣式*/
section > ul > li {
display: table-cell;
/*必須給單元格設(shè)置邊框,否則看不到內(nèi)部表格線*/
border: 1px solid #444;
/*設(shè)置單元素內(nèi)容與邊框之間的內(nèi)內(nèi)邊距(很重要)*/
padding: 10px;
}
</style>
</head>
<body>
<article class="table">
<h2 class="caption">第九期課程安排</h2>
<section class="thead">
<ul>
<li>序號</li>
<li>課程</li>
<li>描述</li>
</ul>
</section>
<section class="tbody">
<ul>
<li>1</li>
<li>前端開發(fā)基礎(chǔ)</li>
<li>HTML5常用標簽,CSS3樣式控制與頁面布局</li>
</ul>
<ul>
<li>2</li>
<li>PHP開發(fā)基礎(chǔ)</li>
<li>PHP語法,類與對象,常用開發(fā)技術(shù)與案例</li>
</ul>
<ul>
<li>3</li>
<li>大型CMS開發(fā)實戰(zhàn)</li>
<li>Laravel開發(fā)基礎(chǔ),Laravel開發(fā)CMS全程精講</li>
</ul>
</section>
<section class="tfoot">
<ul>
<li>備注:</li>
<li>全程直播教學(xué)</li>
<li><span>每晚20:00 - 22:00(節(jié)假日除外)</span></li>
</ul>
</section>
</article>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
* 使用絕對定位,實現(xiàn)用戶登錄框在頁面中始終居中顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style type="text/css">
body{
position: relative;
}
.main{
border: 2px solid black;
position: absolute;
left: 50%;
margin-left: -150px; width:200px;
}
.title{
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<h2 class="title">用戶登錄</h2>
<form action="" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" >
</p>
<p>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" placeholder="不得少于6位">
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天內(nèi)僅允許登錄三次" style="border:none" disabled>
</p>
<button>登陸</button>
</form>
</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
* 模仿課堂案例, 實現(xiàn)圣杯布局,并寫出完整流程與布局思路
答：1、創(chuàng)建頁面模塊；
2、設(shè)置頁面屬性（如背景顏色、文本大小、行間距等）
3、將整個頁面劃分結(jié)構(gòu)（head、foot、aside等通過css設(shè)置浮動或定位等實現(xiàn)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
body{
width: 1000px;
margin: auto;
}
.head,.foot{
background-color: gray;
height: 50px;
}
.main{
border: 1px solid lightcoral;
padding-left: 200px;
padding-right: 200px;
box-sizing: border-box;
overflow: hidden;
}
.article{
float: left ;
box-sizing: border-box;
width: 100%;
min-height: 600px;
background-color: deepskyblue;
}
.asideleft{
box-sizing: border-box;
min-height: 600px;
width: 200px;
background-color: lightgreen;
float: left;
margin-left: -100%;
position: relative;
left:-200px;
}
.asideright{
float: left;
box-sizing: border-box;
min-height: 600px;
width: 200px;
background-color: lightgoldenrodyellow;
margin-left:-200px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<div class="head">頭部</div>
<div class="main">
<div class="article">內(nèi)容區(qū)</div>
<div class="asideleft">左側(cè)</div>
<div class="asideright">右側(cè)</div>
</div>
<div class="foot">底部</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
* (選做): 將圣杯布局中的左右二列,使用絕對定位來實現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
body{
width: 1000px;
margin: auto;
}
.head,.foot{
background-color: gray;
height: 80px;
}
.main{
border: 1px solid red;
padding-left: 200px;
padding-right: 200px;
box-sizing: border-box;
overflow: hidden;
position: relative
}
.article{
float: left ;
box-sizing: border-box;
width: 100%;
min-height: 600px;
background-color: deepskyblue;
}
.asideleft{
box-sizing: border-box;
min-height: 600px;
width: 200px;
background-color: lightgreen;
float: left;
position: absolute;
top: 0;
left: 0;
}
.asideright{
float: left;
box-sizing: border-box;
min-height: 600px;
width: 200px;
background-color: lightgoldenrodyellow;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">
<div class="article">main</div>
<div class="asideleft">left</div>
<div class="asideright">right</div>
</div>
<div class="foot">foot</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號