<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>家用电器分类</title>
<style type="text/css">
.box {
width: 260px;
}
.box1 {
position: absolute;
margin-left: -40px;
margin-top: -2.6%;
width: 300px;
}
.box h2 {
font-size: 20px;
color: #fff;
line-height: 35px;
background: linear-gradient(to bottom, #0467AC, #63A7D6, #B6DBF5);
text-indent: 1em;
}
.box ul li {
list-style-type: none;
font-size: 0;
}
span {
font-size: 12px;
}
.box ul li h3 {
font-size: 14px;
line-height: 30px;
background: linear-gradient(to top, #CEE7F9, #BDDFF7, #CEE7F9);
}
.box ul li h3 a {
text-decoration: none;
color: #0565C6;
}
.box ul li h3 a:hover {
text-decoration: underline;
}
.box ul li p {
font-size: 12px;
line-height: 26px;
}
.box ul li p a {
color: #666;
text-decoration: none;
}
.box ul li p a:hover {
color: #F60;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h2>家用电器</h2>
<div class="box1">
<ul>
<li>
<h3><a href="#">大家电</a></h3>
<p>
<a href="#">平板电视</a>
<a href="#">洗衣机</a>
<a href="#">冰箱</a>
</p>
<p>
<a href="#">空调</a>
<a href="#">烟机</a>
<span>/</span>
<a href="#">灶具</a>
<a href="#">热水器</a>
</p>
<p>
<a href="#">冷柜</a>
<span>/</span>
<a href="#">酒柜</a>
<a href="#">消毒柜</a>
<a href="#">家庭影院</a>
</p>
</li>
<li>
<h3><a href="#">生活电器</a></h3>
<p>
<a href="#">电风扇</a>
<a href="#">净化器</a>
<a href="#">吸尘器</a>
</p>
<p>
<a href="#">净水设备</a>
<a href="#">挂烫机</a>
<a href="#">电话机</a>
</p>
</li>
<li>
<h3><a href="#">厨房电器</a></h3>
<p>
<a href="#">榨汁机</a>
<a href="#">电压力锅</a>
<a href="#">电饭煲</a>
</p>
<p>
<a href="#">豆浆机</a>
<a href="#">微波炉</a>
<a href="#">电磁炉</a>
</p>
</li>
<li>
<h3><a href="#">五金家装</a></h3>
<p>
<a href="#">淋浴</a>
<span>/</span>
<a href="#">水槽</a>
<a href="#">电动工具</a>
<a href="#">手动工具</a>
</p>
<p>
<a href="#">仪器仪表</a>
<a href="#">浴霸</a>
<span>/</span>
<a href="#">排气</a>
<a href="#">灯具</a>
</p>
</li>
</ul>
</div>
</div>
</body>
</html>运行结果如下图所示：
1：内联式css样式
内联式css样式表就是把css代码直接写在现有的HTML标签中:
采用style属性。范围只针对此标签适用。
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
2：嵌入式css样式
在HTML文档中的< head >中使用< style >标记，，被称为内嵌式。
在head标签中加入< style >标签，对多个标签进行统一修改，范围针对此页面。