
批改狀態(tài):合格
老師批語:寫的很認(rèn)真仔細(xì),也很漂亮!
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>購物車</title>
<style>
* {
font-size: 16px;
/* 設(shè)置全局字體大小 */
}
/* 設(shè)置表格寬度,居中顯示在網(wǎng)頁上,并且內(nèi)部居中對(duì)齊 */
table {
width: 70%;
margin: auto;
text-align: center;
}
/* 設(shè)置標(biāo)題字體大小,字體顏色,位置 */
caption {
font-size: 2rem;
color: lightgreen;
margin: 20px 0;
}
/* 設(shè)置單元格的下邊框,內(nèi)邊距 */
td,
th {
border-top: 2px solid #ccc;
padding: 10px;
}
/* 設(shè)置最后一個(gè)div標(biāo)簽,用偽類表示 ,寬度70%,為了和表格對(duì)齊,在頁面居中*/
div:last-of-type {
width: 70%;
margin: auto;
}
/* 設(shè)置結(jié)算按鈕的樣式,浮動(dòng),寬高,背景顏色,去掉默認(rèn)邊框,相對(duì)定位 */
div:last-of-type button {
float: right;
width: 150px;
height: 50px;
background: lightgreen;
border: none;
position: relative;
top: 20px;
}
/* 設(shè)置button的鼠標(biāo)點(diǎn)擊狀態(tài)為小手,字體為藍(lán)色,背景為淺橘色,字體為25px; */
div:last-of-type button:hover {
font-size: 25px;
color: blue;
background: lightsalmon;
cursor: pointer;
}
/* 設(shè)置thead的背景顏色, */
thead {
background: lightskyblue;
}
/* 設(shè)置表格主體的偶數(shù)行背景顏色 */
tbody > tr:nth-of-type(even) {
background: #e1d5d5;
}
/* 設(shè)置表格尾部字體大小,顏色,字寬 */
tfoot {
font-size: 1.2rem;
color: #ff2913;
font-weight: bolder;
}
/* 設(shè)置鼠標(biāo)滑過表格主體內(nèi)容時(shí)的背景顏色 */
tbody > tr:hover {
background: mediumaquamarine;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<caption>
購物車
</caption>
<thead>
<tr>
<th>ID</th>
<th>品名</th>
<th>單價(jià)/元</th>
<th>單位</th>
<th>數(shù)量</th>
<th>金額/元</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>HUAWEI MateBook X Pro 2020</td>
<td>9988.00</td>
<td>臺(tái)</td>
<td>1</td>
<td>9988.00</td>
</tr>
<tr>
<td>2</td>
<td>HUAWEI Mate 30 Pro 5G</td>
<td>6399.00</td>
<td>部</td>
<td>2</td>
<td>12798.00</td>
</tr>
<tr>
<td>3</td>
<td>小度在家X8智能音箱</td>
<td>589.00</td>
<td>件</td>
<td>1</td>
<td>589.00</td>
</tr>
<tr>
<td>4</td>
<td>小米全面屏65英寸 E65A</td>
<td>2599.00</td>
<td>臺(tái)</td>
<td>1</td>
<td>2599.00</td>
</tr>
<tr>
<td>5</td>
<td>小米AloT路由器 AX3600</td>
<td>599.00</td>
<td>個(gè)</td>
<td>1</td>
<td>599.00</td>
</tr>
<tr>
<td>6</td>
<td>iPhone Xs Max 4G</td>
<td>5599.00</td>
<td>部</td>
<td>1</td>
<td>5599.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">總計(jì):</td>
<td>數(shù)量:7</td>
<td>32172.00</td>
</tr>
</tfoot>
</table>
<div class=""><button>去結(jié)算</button></div>
</body>
</html>
顯示結(jié)果:
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>注冊(cè)</title>
<style>
body {
color: #555;
/* 設(shè)置全部字體顏色 */
}
h2 {
text-align: center;
/* 把h3居中 */
}
form {
width: 450px;
margin: 30px auto;
border-top: 1px solid #aaa;
/*設(shè)置表單寬度 外邊距且居中顯示,上邊框?yàn)?像素*/
}
form fieldset {
border: 1px solid seagreen;
background-color: lightcyan;
box-shadow: 2px 2px 4px #bbb;
border-radius: 10px;
margin: 20px;
/*設(shè)置控件樣式,邊框?yàn)?px,背景顏色,邊框陰影,圓角,外邊距*/
}
form fieldset legend {
background-color: rgb(178, 231, 201);
border-radius: 10px;
color: seagreen;
padding: 5px 15px;
/*設(shè)置legend元素背景顏色,圓角,字體顏色,內(nèi)邊距*/
}
form div {
margin: 5px; /*div外邊距*/
}
form > div:last-of-type {
text-align: center; /*字體居中*/
}
form .btn {
width: 80px;
height: 30px;
border: none;
background-color: seagreen;
color: #ddd;
/*按鈕寬高,邊框,背景顏色,字體顏色*/
}
form .btn:hover {
background-color: coral;
color: white;
cursor: pointer;
/*當(dāng)鼠標(biāo)停留在按鈕上時(shí)背景顏色,字體顏色,鼠標(biāo)樣式*/
}
input:focus {
background-color: rgb(226, 226, 175);
/*光標(biāo)在輸入框時(shí),輸入框的背景顏色*/
}
</style>
</head>
<body>
<h2>用戶注冊(cè)</h2>
<form action="" method="POST">
<!-- 控件組 -->
<fieldset>
<legend>基本信息(必填)</legend>
<div>
<label for="username">賬號(hào):</label>
<input
type="text"
id="username"
name="username"
placeholder="6到15位字符"
autofocus
required
/>
</div>
<div>
<label for="email">郵箱:</label>
<input
type="email"
id="email"
name="email"
placeholder="demo@example.com"
required
/>
</div>
<div>
<label for="password">密碼:</label>
<input
type="password"
name="password"
id="password"
required
placeholder="不少于6位,且字母加數(shù)字"
/>
<button onclick="showpwd()" id="btn" type="button">顯示密碼</button>
</div>
<div>
<label for="password1">確認(rèn):</label>
<input
type="password"
name="password1"
id="password1"
required
placeholder="不少于6位,且字母加數(shù)字"
/>
</div>
</fieldset>
<fieldset>
<legend>擴(kuò)展信息(選填)</legend>
<div>
<label for="date">生日:</label>
<input type="date" id="date" name="date" />
</div>
<div>
<label for="baomi">性別:</label>
<input type="radio" name="gender" value="man" id="man" />
<label for="man">男</label>
<input type="radio" name="gender" value="woman" id="woman" />
<label for="woman">女</label>
<input type="radio" name="gender" value="baomi" id="baomi" checked />
<label for="baomi">保密</label>
</div>
<div>
<!-- 因?yàn)閺?fù)選框返回的是一個(gè)值或多個(gè)值,最方便用后端數(shù)組來處理,所有將name名稱設(shè)置為數(shù)組形式便于后端腳本處理 -->
<label for="biancheng">愛好:</label>
<input type="checkbox" name="hobby[]" id="game" value="game" />
<label for="game">打游戲</label>
<input type="checkbox" name="hobby[]" id="sheying" value="sheying" />
<label for="sheying">攝影</label>
<input
type="checkbox"
name="hobby[]"
id="biancheng"
value="biancheng"
checked
/>
<label for="biancheng">編程</label>
</div>
<div>
<!-- 選項(xiàng)列表 -->
<label for="">手機(jī):</label>
<input type="search" list="phone" name="brand" />
<datalist id="phone">
<option value="apple"></option>
<option value="huawei"></option>
<option value="xiaomi"></option>
<option value="oppo"></option>
<option value="vivo"></option>
</datalist>
</div>
</fieldset>
<fieldset>
<legend>其它信息(選填)</legend>
<div>
<label for="uploads">上傳頭像</label>
<input
type="file"
id="uploads"
name="user_pic"
accept="image/png,image/jpeg,image/gif"
/>
</div>
<div>
<label for=""></label>
<textarea
name="resume"
id="resume"
cols="30"
rows="5"
placeholder="不超過100字??!"
></textarea>
</div>
</fieldset>
<!-- 隱藏域 hidden 不需要用戶填寫,可以將用戶注冊(cè)時(shí)間,用戶id,登錄時(shí)間隨表單上傳到服務(wù)器-->
<input type="hidden" name="user_id" value="123" />
<div>
<button class="btn">提交</button>
<input type="submit" value="提交" class="btn" />
</div>
</form>
</body>
<script>
function showpwd() {
document.querySelector("#password").type = "text";
const btn = document.querySelector("#btn").innerHTML;
console.log(btn);
if (btn == "顯示密碼") {
document.querySelector("#btn").innerHTML = "隱藏密碼";
}
if (btn == "隱藏密碼") {
document.querySelector("#password").type = "password";
document.querySelector("#btn").innerHTML = "顯示密碼";
}
}
</script>
</html>
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>換個(gè)姿勢(shì)玩表格</title>
<style>
* {
font-size: 20px;
}
/* 表格 */
.table {
display: table;
border: 1px solid #000;
width: 500px;
text-align: center;
}
/* 標(biāo)題 */
.table-caption {
display: table-caption;
}
/* 表頭 */
.table-thead {
display: table-header-group;
}
/* 行 */
.table-row {
display: table-row;
}
/* 列 */
.table-cell {
display: table-cell;
border: 1px solid #000;
padding: 10px;
}
/* 主體 */
.table-tbody {
display: table-row-group;
}
/* 底部 */
.table-tfoot {
display: table-footer-group;
}
/* 列分組樣式 */
.table-colgroup {
display: table-column-group;
}
.table-colgroup .table-col:first-of-type {
display: table-column;
background-color: cyan;
}
</style>
</head>
<body>
<!-- 表格 -->
<div class="table">
<!-- 表格標(biāo)題 -->
<div class="table-caption">員工信息表</div>
<!-- 列分組 -->
<div class="table-colgroup">
<div class="table-col"></div>
<div class="table-col"></div>
<div class="table-col"></div>
</div>
<!-- 表頭:thead -->
<div class="table-thead">
<!-- 行 -->
<div class="table-row">
<div class="table-cell">ID</div>
<div class="table-cell">姓名</div>
<div class="table-cell">職務(wù)</div>
</div>
</div>
<!-- 表格主體 -->
<div class="table-tbody">
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">張三</div>
<div class="table-cell">程序員</div>
</div>
</div>
<div class="table-tbody">
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell">李四</div>
<div class="table-cell">組長(zhǎng)</div>
</div>
</div>
<div class="table-tbody">
<div class="table-row">
<div class="table-cell">3</div>
<div class="table-cell">王五</div>
<div class="table-cell">程序員</div>
</div>
</div>
<!-- 表格尾部 -->
<div class="table-tfoot">
<div class="table-row">
<div class="table-cell">a</div>
<div class="table-cell">b</div>
<div class="table-cell">c</div>
</div>
</div>
</div>
</body>
</html>
顯示結(jié)果:
<table></table>:表格
<caption></caption>:表格標(biāo)題
<thead></thead>:表格頭部
<tr></tr>:表示行
<th></th>:表格頭部單元格
<tbody></tbody>:表格主體內(nèi)容
<td></td>:單元格
<tfoot></tfoot>:表格尾部?jī)?nèi)容
用css樣式與div結(jié)合來表示
.table:就表示<table>標(biāo)簽,并設(shè)置display:table
.table-caption:就表示<caption>標(biāo)簽,并設(shè)置display:table-caption
.table-thead:就表示<thead>標(biāo)簽,并設(shè)置display:table-header-group
.table-row:就表示<tr>標(biāo)簽,并設(shè)置display:table-row
.table-cell:就表示單元格,并設(shè)置display:table-cell
.table-tbody:就表示<tbody>標(biāo)簽,并設(shè)置display:table-row-group
.table-tfoot:就表示<tfoot>標(biāo)簽,并設(shè)置display:table-footer-group
.table-colgroup:表示列分組樣式,設(shè)置display: table-column-group;
<form action="跳轉(zhuǎn)地址" method="get/post">表單內(nèi)容</form>
<fieldset><legend>信息</legend></fieldset>: 控件組
<label for="#id">名稱:</label>:綁定到input標(biāo)簽
<input type="text" id="" name="變量名稱" placeholder="占位符" autofocuse required/> 文本框
autofocuse輸入框默認(rèn)顯示光標(biāo),required提交時(shí)對(duì)輸入框內(nèi)容進(jìn)行判斷是否符合要求
<input type="password" id="" name="變量名稱" placeholder="占位符"> 密碼框
<input type="email" id="" name="" /> 郵箱
<input type="radio" id="" name="name" value="" /> 單選框
<input type="radio" id="" name="name" value="" /> 單選框
radio屬性name必須是相同的
<input type="checkbox" id="" name="name[]" value="" /> 多選框
因?yàn)閺?fù)選框返回的是一個(gè)值或多個(gè)值,最方便用后端數(shù)組來處理,所有將name名稱設(shè)置為數(shù)組形式便于后端腳本處理
<input type="file" id="" name="" accept="image/png,image/jpeg" />上傳文件
<input type="search" list="" name="name" />選項(xiàng)列表
選項(xiàng)列表與datalist綁定<datalist id="name"><option value=""></option></datalist>
<textarea name="" id="" rows="" cols=""></textarea>多行文本框
<input type="hidden" name="" value="" />隱藏域,用于提交用戶信息,登錄時(shí)間
<input type="submit" value="提交" />提交按鈕,用于向服務(wù)端提交數(shù)據(jù)
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)