二级导航实例
<!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>