收藏
PHPz批改狀態(tài)：合格
老師批語：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>用戶注冊界面</title>
<style>
h1{
color: violet;
}
fieldset{
background-color: lightgreen;
}
legend{
color: tomato;
}
input[type="submit"]{
width: 100%;
}
#username{
font-weight: bolder;
color:blueviolet
}
.gender{
font-size: 20px;
color: brown;
}
#read ~ label {
font-size: 16px;
font-weight: bolder;
}
body>#verse>article>span{
color: red;
}
input[value="pig"] + label{
font-size: 26px;
font-weight: bolder;
}
</style>
</head>
<body>
<h1>用戶注冊界面</h1>
<div id="verse">
<article>
<span>書山有路勤為徑，學(xué)海無涯苦做舟</span>
</article>
</div>
<form action="" method="get">
<fieldset>
<legend>必填項(xiàng)</legend>
<div>
<label for="username" id="username">賬號(hào)：</label>
<input type="text" name="username" autofocus required placeholder="首位必須為字母"/>
</div>
<div>
<label for="password">密碼：</label>
<input type="password" name="password" id="password" requierd placeholder="6-12位大小寫字母加數(shù)字"/>
</div>
<div>
<label for="email">郵箱：</label>
<input type="email" name="email" id="email" required placeholder="chao@ccdhs.cn"/>
</div>
<div>
<label for="secret" class="gender">性別</label>
<input type="radio" name="gender" value="male" /><label for="" class="gender">男</label>
<input type="radio" name="gender" value="female" /><label for="" class="gender">女</label>
<input type="radio" name="gender" value="secret" checked id="secret" /><label for="" class="gender">保密</label>
</div>
<div>
<label for="">愛好</label>
<input type="checkbox" name="hobby[]" value="read" /><label id="read">看書</label>
<input type="checkbox" name="hobby[]" value="run"/><label id="run">跑步</label>
<input type="checkbox" name="hobby[]" value="shopping" /><label id="shopping">購物</label>
<input type="checkbox" name="hobby[]" value="joking" checked /><label id="joking">擼代碼</label>
</div>
<div>
<label for="">可勝任崗位</label>
<input type="checkbox" name="work[]" value="god" checked/><label id="god">掃地僧</label>
<input type="checkbox" name="work[]" value="gun"/><label id="gun">槍神</label>
<input type="checkbox" name="work[]" value="pig" /><label id="pig">豬</label>
<input type="checkbox" name="work[]" value="php" checked /><label id="php">php工程師</label>
</div>
<div>
<label for="">會(huì)員等級(jí)</label>
<select name="level" id="level">
<option value="1">銅牌會(huì)員</option>
<option value="2">銀牌會(huì)員</option>
<option value="3">金牌會(huì)員</option>
<option value="4" selected>鉆石會(huì)員</option>
</select>
</div>
<div>
<label for="">搜索關(guān)鍵字</label>
<input type="search" name="search" id="search" list="keywords">
<datalist id="keywords">
<option value="html">html</option>;
<option value="css">css</option>;
<option value="javascript">javascript</option>;
<option value="php">php</option>;
</datalist>
</div>
<div>
<input type="submit" value="提交">
</div>
</fieldset>
</form>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
使用子選擇器">"時(shí)，是可以無限往下查找子元素的，且其中的內(nèi)容可以是元素、id、class等
使用同級(jí)相鄰選擇器"+"時(shí)，需要注意：
一，+前面的元素需要唯一，如果不是唯一，首先會(huì)默認(rèn)選中所有的符合+前面的所有元素，然后全部執(zhí)行+后面符合條件的情況；
二：+后面的元素標(biāo)簽必須是+前面元素的下一級(jí)相鄰元素的標(biāo)簽，否則將會(huì)無效
微信掃碼
關(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)