代码
1.HTML文件
<title>家用电器</title>
<style type="text/css">
h1{
width:200px;
line-height:35px;
font-size:18px;
color:#fff;
font-weight:bold;
text-indent:1em;
background-color:#0f7cbf;}
h3{
width:200px;
line-height:30px;
font-size:14px;
font-weight:bold;
background-color:#e4f1fa;
text-indent:2em;}
h3 a{
color:#0f7cbf;}
div{
width:200px;
line-height:20px;
font-size:12px;}
div a{
color:#666;}
a{
text-decoration:none;}
div a:hover{
text-decoration:underline;
color:#f60;}
h3 a:hover{
text-decoration:underline;}
</style>
</head>
<body>
<h1>家用电器</h1>
<h3><a href="#">大家电</a></h3>
<div>
<a href="#">平板电视</a>
<a href="#">洗衣机</a>
<a href="#">冰箱</a>
<a href="#">空调</a>
<a href="#">烟机/灶具</a>
<a href="#">热水器</a>
<a href="#">冷柜/酒柜</a>
<a href="#">消毒柜</a>
<a href="#">家庭影院</a>
</div>
<h3><a href="#">生活电器</a></h3>
<div>
<a href="#">电风扇</a>
<a href="#">净化器</a>
<a href="#">吸尘器</a>
<a href="#">净水设备</a>
<a href="#">挂烫机</a>
<a href="#">电话机</a>
</div>
<h3><a href="#">厨房电器</a></h3>
<div>
<a href="#">榨汁机</a>
<a href="#">电压力锅</a>
<a href="#">电饭煲</a>
<a href="#">豆浆机</a>
<a href="#">微波炉</a>
<a href="#">电磁炉</a>
</div>
<h3><a href="#">五金家装</a></h3>
<div>
<a href="#">淋浴/水槽</a>
<a href="#">电动工具</a>
<a href="#">手动工具</a>
<a href="#">仪器仪表</a>
<a href="#">浴霸/排气</a>
<a href="#">灯具</a>
</div>
</body>
效果
