第四_<html><body> < 1 2 ="4" 3 ="orange">

本文链接：https://blog.csdn.net/Lin_Zhi/article/details/87282655

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品分类列表</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			li{
				list-style: none;
				
			}
			.no1{
				/*外边框的元素*/
				border: 2px orangered solid;
				width: 260px;
				margin: 30px;
				border-radius: 10px;
			}
			img,span{
				vertical-align: middle;
			}
			li img{
				margin:5px 10px;
				
			}
			.no2{
				border-bottom: 1px #373B3C dotted;
			}
			.no3{
				width: 260px;
				
				border-bottom: 1px #000000 dotted;
			}
			a:link{
				text-decoration: none;
				color: #000000;
				font-weight: bold;
			}
			a:hover .no3{
				color: red;
			border-bottom: none;
			}
			 a:hover img{
				margin-bottom: 6px;
			}
		</style>
	</head>
	<body>
		<div class="no1">
			<ul>
					<li><a href="#"><div class="no3"><img src="img/icon_01.jpg"/><span>酒水、饮料</span></div></a></li>
					<li><a href="#"><div class="no3"><img src="img/icon_02.jpg"/><span>进口食品</span></div></a></li>
					<li><a href="#"><div class="no3"><img src="img/icon_03.jpg"/><span>休闲零食</span></div></a></li>
					<li><a href="#"><div class="no3"><img src="img/icon_04.jpg"/><span>地方特产</span></div></a></li>
					<li><a href="#"><div class="no3"><img src="img/icon_05.jpg"/><span>保健、冲调</span></div></a></li>
					<li><a href="#"><div class="no3"><img src="img/icon_06.jpg"/><span>粮油、生鲜</span></div></a></li>
					<li><a href="#"><div class="no3"><img src="img/icon_07.jpg"/><span>美容洗护</span></div></a></li>
					<li><a href="#"><div class="no3"><img src="img/icon_08.jpg"/><span>清洁洗涤</span></div></a></li>
					<li><a href="#"><div class="no3"><img src="img/icon_09.jpg"/><span>母婴、纸品</span></div></a></li>
					<li><a href="#"><img src="img/icon_10.jpg"/><span>家居百货</span></a></li>
			</ul>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>免费体验登入</title>
		<style>
			.no1{
				widows: 312px;
				height: 353px;
				background-image: url(img/bg.jpg);
				background-repeat: no-repeat;
			}
			.no2{
				padding-left: 20px;
				padding-top: 80px;
				color: #fff;
				
			}
			span{
				color: red;
			}
			input{
				border-radius: 5px;
			}
			select{
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div class="no1">
			<div class="no2">
				<form action="#" method="post">
					
					<p><span>*</span>姓名：<input type="text" name="姓名" value="" size="25"/></p>
					<p><span>*</span>邮箱：<input type="url" name="邮箱" value="" size="25"/></p>
					<p><span>*</span>电话：<input type="text"  name="电话" value="" size="25"/></p>
					<p>性别：<select name="性别">
						<option value="">请选择</option>
						<option value="男">男</option>
						<option value="女">女</option>
					   </select>
					</p>
					<p>年龄：<select name="年龄">
						<option value="">请选择</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
					   </select>
					</p>
					<p><a href="#"><img src="img/btn.jpg"/></a></p>
				</form>
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>开班信息页面</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.no1{/*底部背景元素*/
				width: 250px;
				
				border: 1px #7B7B7B solid;
				border-radius: 5%;
				background: linear-gradient(to bottom,#008BBF,#ffffff,#ffffff,#ffffff);
				margin: 30px;
			}
			img,p{/*使图片和文字剧中*/
				vertical-align: middle;
			}
			.no2 p{/*设置文字的元素*/
				color: #FFFFFF;
				margin-left:10px;
				line-height: 45px;
				font-weight: bold;
				font-size: 14px;
			}
			.no2{
				border-bottom: #FFFFFF 1px solid;
			}
			li{
				list-style: none;
				background-image: url("img/dotBg.gif");
				background-repeat: no-repeat;
				line-height: 30px;
				margin-right:10px;
				font-size: 14px;
				margin-bottom: 5px;
			}
			li a:link{/*鼠标悬浮前*/
				text-decoration: none;
				color: blue;
			}
			li a:hover{/*鼠标悬浮时*/
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="no1">
			<div class="no2">
				<p><img src="img/bg.gif" />中心开班信息</p>
			</div>
			<div>
				<ul>
					
					<li><a href="#">8月12日：学历+技能班</a></li>
					<li><a href="#">8月16日：高考特招班</a></li>
					<li><a href="#">8月23日：Java精英班</a></li>
					<li><a href="#">8月31日：学士后强化班</a></li>
					<li><a href="#">9月5日：大学生就业班</a></li>
					<li><a href="#">9月9日：企业定向委培班</a></li>
					<li><a href="#">9月16日：网络营销强化班</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>