二級導航實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #ccc;
}
.box{
width: 190px;
height: 522px;
border: 1px solid #FF5000;
background-color: #fff;
margin: 100px 0px 0px 200px;
position: relative;
}
.box ul li{
width: 100%;
height: 32px;
list-style: none;
line-height: 32px;
color: #666;
text-indent: 1.5em;
}
.box ul li:hover{
background-color: #ffe4dc;
color: #ff5000;
}
.none{
width: 500px;
height: 522px;
border: 3px solid #FF5000;
position: absolute;
top: 0px;
left: 190px;
display: none;
background-color: #fff;
}
.none p{
font-size: 50px;
font-weight: bold;
}
.box ul li:hover .none{
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1號 / 男裝 / 內衣
<div class="none">
<p>一號盒子</p>
</div>
</li>
<li>2號 / 男裝 / 內衣
<div class="none">
<p>二號盒子</p>
</div>
</li>
<li>3號 / 男裝 / 內衣
<div class="none">
<p>三號盒子</p>
</div>
</li>
<li>4號 / 男裝 / 內衣
<div class="none">
<p>四號盒子</p>
</div>
</li>
<li>5號 / 男裝 / 內衣
<div class="none">
<p>五號盒子</p>
</div>
</li>
<li>6號 / 男裝 / 內衣
<div class="none">
<p>六號盒子</p>
</div>
</li>
<li>7號 / 男裝 / 內衣
<div class="none">
<p>七號盒子</p>
</div>
</li>
<li>8號 / 男裝 / 內衣
<div class="none">
<p>八號盒子</p>
</div>
</li>
<li>9號 / 男裝 / 內衣
<div class="none">
<p>九號盒子</p>
</div>
</li>
</ul>
</div>
</body>
</html>
表單標籤及屬性等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<!--
form表單裏面包含的標籤
input 輸入框
select 下拉列表
optgroup 給下拉列表的分組
option 下拉列表的選項
textarea 多行文本輸入框
progress 進度條
button 按鈕
-->
<!--
表單的一些屬性
name="" 標籤的名字
value="" 標籤的值
placeholder="" 提示用戶信息
-->
<!--
input的標籤的type屬性
type="text" 文本輸入框
type="password" 密碼輸入框
type="email" 郵箱輸入框
type="radio" 單選輸入框（必須要加name）
type="checkbox" 多選輸入框
type="button" 普通按鈕
type="reset" 重置按鈕
type="submit" 提交按鈕
-->
<!-- 表單 ，所有的表單信息都要寫在表單標籤裏-->
<form>
<fieldset>
<legend>賬戶信息：</legend>
<p>
<label>賬戶：<input type="text" name="username" value="滴滴答"></label>
</p>
<p>
<label>密碼：<input type="password" name="psw" placeholder="請輸入密碼"></label>
</p>
<p>
<label>郵箱：<input type="email" name="em"></label>
</p>
</fieldset>
<fieldset>
<legend>個人信息：</legend>
<p>
性別：
<label>
<input type="radio" name="gender">男
</label>
<label>
<input type="radio" name="gender">女
</label>
</p>
<p>
愛好：
<label><input type="checkbox" name="eat">喫飯</label>
<label><input type="checkbox" name="sleep">睡覺</label>
<label><input type="checkbox" name="play">打豆豆</label>
</p>
<p>
城市：
<select name="city">
<optgroup label="河南省">
<option>鄭州</option>
<option>商丘</option>
<option>新鄉</option>
</optgroup>
<optgroup label="山東省">
<option>青島</option>
<option>日照</option>
<option>泰安</option>
</optgroup>
<optgroup label="浙江省">
<option>寧波</option>
<option>溫州</option>
<option>金華</option>
</optgroup>
</select>
</p>
<p>
備註：<br>
<textarea cols="30" rows="10"></textarea>
</p>
<p>
<progress value="90" max="100">
</p>
<input type="button" name="" value="普通按鈕">
<input type="reset" name="" value="重置按鈕">
<input type="submit" name="" value="提交按鈕">
<br>
<button value="button">普通按鈕</button>
<button value="reset">重置按鈕</button>
<button value="submit">提交按鈕</button>
</fieldset>
</form>
</body>
</html>
