1.<div>通用分组 <div>这是一个通用分组</div> <div>这是又一个通用分组</div> 解释：<div>元素在早期的版本中非常常用，通过<div>这种一般性分组元素进 行布局。而在HTML5 中，由于语义的缘故，被其他各种文档元素所代替。和 <p>段落的区别就是，两段文本的上下空隙是没有的，空隙间隔和<br>换行一 样。 2.<pre>展现格式化内容 <pre>           #####                 #####                         #####                         #####          ##### </pre> 解释：<pre>元素实际作用就是编辑器怎么排版的，原封不动的展现出来。当然， 这种只适合简单的排版，复杂的排版就无法满足要求了。

html制作家用电器排行榜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			hr{
				width: 600px;
			}
			*{
				padding: 0;
				margin: 0;
			}
			span{
				line-height: 50px;
			}
			h2{
				line-height: 80px;
			}
		</style>
	</head>
	<body>
		<h2>家用电器排行榜</h2>
		<span>
			<img src="tv01.jpg" />
			<a href="#">创维42E5CHR</a>    42英寸    ￥2799.00
			<hr />
		</span>
		<span>
			<img src="tv02.jpg" />
			<a href="#">海信LED42EC260JD</a>    42英寸  ￥2848.00
			<hr />
		</span>
		<span>
			<img src="tv03.jpg" />
			<a href="#">索尼 KLV-40R476A</a>    40英寸  ￥3599.00
			<hr />
		</span>
		<span>
			<img src="tv04.jpg" />
			<a href="#">创维42R83RE</a>    42英寸   ￥3699.00
			<hr />
		</span>
		<span>
			<img src="tv05.jpg" />
			<a href="#">创维42E7BRE</a>    42英寸  ￥3299.00
			<hr />
		</span>
	</body>
</html>

 html制作家用电器分类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				background-color: #0f7cbf;
				width: 300px;
				line-height: 45px;
			}

			.box a {
				color: #ffffff;
				padding-left: 20px;
				font-size: 20px;
				letter-spacing: 2px;
			}

			.box1 {
				background-color: #e4f1fa;
				width: 300px;
				line-height: 45px;
				margin: 0;
			}

			.box1 a {
				color: #2075ab;
				font-size: 20px;
				padding-left: 20px;
				letter-spacing: 2px;
			}

			a {
				text-decoration: none;
			}

			[href="#"] {
				color: #8F8F8F;
				padding-left: 15px;
				letter-spacing: 1px;
			}

			[href="#"]:hover {
				color: #F60;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="#">家用电器</a>
		</div>
		<div>
			<p class="box1">
				<a href="#">大家电</a>
			</p>
			<p>
				<a href="#">平版电视</a>
				<a href="#">洗衣机</a>
				<a href="#">冰箱</a>
				<br>
				<a href="#">空调</a>
				<a href="#">烟机/灶具</a>
				<a href="#">热水器</a>
				<br>
				<a href="#">冷柜/酒柜</a>
				<a href="#">消毒柜</a>
				<a href="#">家庭影院</a>
			</p>
		</div>
		<div>
			<p class="box1">
				<a href="#">生活电器</a>
			</p>
			<p>
				<a href="#">电风扇</a>
				<a href="#">净化器</a>
				<a href="#">吸尘器</a>
				<br>
				<a href="#">净水设备</a>
				<a href="#">挂烫机</a>
				<a href="#">电话机</a>
			</p>
		</div>
		<div>
			<p class="box1">
				<a href="#">厨房电器</a>
			</p>
			<p>
				<a href="#">榨汁机</a>
				<a href="#">电压力锅</a>
				<a href="#">电饭煲</a>
				<br>
				<a href="#">豆浆机</a>
				<a href="#">微波炉</a>
				<a href="#">电磁炉</a>
			</p>
		</div>
		<div>
			<p class="box1">
				<a href="#">五金家装</a>
			</p>
			<p>
				<a href="#">沐浴/水槽</a>
				<a href="#">电动工具</a>
				<a href="#">手动工具</a>
				<br>
				<a href="#">仪器仪表</a>
				<a href="#">浴霸/排气</a>
				<a href="#">灯具</a>
			</p>
		</div>
	</body>
</html>

 

更多推荐

用html制作家用电器网页设计,个人网页,css