收藏
批改狀態(tài)：未批改
老師批語：
利用常用標(biāo)簽實(shí)現(xiàn)表格制作和跨行合并。
<html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <h2>購物車</h2> <ul> <li>1.有備無患的奔馳專用機(jī)油，1個(gè)，800元</li> <li>2.能看清鞋子的京東攝像頭，2個(gè)，300元</li> <li>3.帶暖手寶功能的筆記本電腦，2臺(tái)，9000元</li> </ul> <hr> <table border="1" cellspacing="0" cellpadding="5" width="610" align="left"> <caption>購物車</caption> <thead> <tr border="lightblue"> <th>編號(hào)</th> <th>名稱</th> <th>類別</th> <th>單價(jià)</th> <th>數(shù)量</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td width="100">1</td> <td width="300">有備無患的奔馳專用機(jī)油</td> <td width="100">汽車用品</td> <td width="100">800元</td> <td width="60">1</td> <td width="100">800元</td> </tr> <tr> <td>2</td> <td>能看清楚鞋子的京東攝像頭</td> <td rowspan="2">數(shù)碼產(chǎn)品</td> <td>150元</td> <td>2</td> <td>300元</td> </tr> <tr> <td>3</td> <td>帶暖手寶功能的筆記本電腦</td> <td>4500元</td> <td>2</td> <td>9000元</td> </tr> </tbody> <tfoot> <tr> <td colspan="4" align="center">總價(jià)</td> <td>5</td> <td>10100元</td> </tr> </tfoot> </table> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
因?yàn)轭悇e放在最右一列的話，第五行第六列會(huì)出現(xiàn)空格不***，所以把類別調(diào)整到第三列顯示。
一個(gè)簡(jiǎn)易的用戶注冊(cè)界面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用戶注冊(cè)</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
margin:0 auto;
}
</style>
</head>
<body>
<div>
<h2>用戶注冊(cè)</h2>
<!-- from暫時(shí)沒學(xué)到Php所以沒有寫上定義 -->
<form action="" method="post">
<p>
<label for="username">賬號(hào)：</label>
<input type="text" name="username" id="username" placeholder="不能超過8個(gè)字符" autofocus="username" required>
</p>
<p>
<label for="password">密碼：</label>
<input type="password" name="password" id="password" placeholder="6-12的字母和數(shù)字組成" required>
</p>
<p>
<label for="email">郵箱：</label>
<input type="email" name="email" id="email" placeholder="123abc@sina.com" required>
</p>
<p>
<label for="age">年齡：</label>
<input type="number" name="age" id="age" placeholder="18~80" max="80" min="18" required>
</p>
<p>
<label for="brithday">生日：</label>
<input type="date" name="brithday" id="brithday" required>
</p>
<p>
<label for="course">課程：</label>
<select name="course" id="course" size="1" required>
<option value="0" selected>請(qǐng)選擇</option>
<optgroup label="前端：">
<option value="1">HTML5</option>
<option value="2">CSS3</option>
<option value="3">JavaScript</option>
</optgroup>
<optgroup label="后端：">
<option value="4">PHP</option>
<option value="5">ThinkPHP</option>
<option value="6">Mysql</option>
</optgroup>
</select>
</p>
<p>
<label for="porgramme">愛好：</label>
<input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">打游戲</label>
<!-- []為php的數(shù)組框 -->
<input type="checkbox" name="hobby[]" id="porgramme" value="porgramme"><label for="porgramme">擼代碼</label>
<input type="checkbox" name="hobby[]" id="movies" value="movies"><label for="movies">看電影</label>
</p>
<p>
<label for="secrecy">性別：</label>
<input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
<input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
<input type="radio" name="gender" id="secrecy" value="secrecy"><label for="secrecy">保密</label>
</p>
<p>
<label for="comment">簡(jiǎn)介：</label>
<textarea name="comment" id="comment" cols="23" rows="10" maxlength="100" style="resize:none" required></textarea>
</p>
<p>
<button type="submit">提交</button>
<button type="reset">重置</button>
</p>
</form>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
利用<div>定義寬高和邊緣為0實(shí)現(xiàn)網(wǎng)頁主體部分居中；利用<required>設(shè)置提交前，除了愛好和性別外的資料全部都需要填寫才能提交，按鈕用的是<button>標(biāo)簽來定義。
利用標(biāo)簽<iframe>實(shí)現(xiàn)一個(gè)簡(jiǎn)易的后臺(tái)管理
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>學(xué)習(xí)系統(tǒng)后臺(tái)管理</title> </head> <body> <h2>學(xué)習(xí)系統(tǒng)后臺(tái)管理</h2> <ul style="float: left;"> <li><a href="index.html" target="main">用戶管理</a></li> <li><a href="form.html" target="main">分類管理</a></li> <li><a href="user.html" target="main">商品管理</a></li> <li><a href="image.html" target="_blank">系統(tǒng)設(shè)置</a></li> </ul> <iframe srcdoc="<h3>網(wǎng)站管理后臺(tái)</h3>" frameborder="1" width="800" height="500" style="float: left" name="main"></iframe> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
這是訪問后臺(tái)管理頁面的主頁顯示。
這是按下左邊用戶管理鏈接顯示出的界面
這是按下左邊分類管理鏈接后的界面。
這是按下左邊商品管理鏈接后的界面。
這是按下左邊系統(tǒng)設(shè)置鏈接后，在新建窗口中顯示的界面。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)