css07家用电器分类

1.创建一个html页面

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>家用电器分类</title>
<link href="css/type.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="type"><div id="title">家用电器</div><div class="secondTitle"><a href="#">大家电</a></div><p><a href="#">平板电视</a>&nbsp;<a href="#">洗衣机</a>&nbsp;<a href="#">冰箱</a><br/><a href="#">空调</a>&nbsp;<a href="#">烟机/灶具</a>&nbsp;<a href="#">热水器</a><br/><a href="#">冷柜/酒柜</a>&nbsp;<a href="#">消毒柜</a>&nbsp;<a href="#">家庭影院</a></p><div class="secondTitle"><a href="#">生活电器</a></div><p><a href="#">电风扇</a>&nbsp;<a href="#">净化器</a>&nbsp;<a href="#">吸尘器</a><br/><a href="#">净水设备</a>&nbsp;<a href="#">挂烫机</a>&nbsp;<a href="#">电话机</a></p><div class="secondTitle"><a href="#">厨房电器</a></div><p><a href="#">榨汁机</a>&nbsp;<a href="#">电压力锅</a>&nbsp;<a href="#">电饭煲</a><br/><a href="#">豆浆机</a>&nbsp;<a href="#">微波炉</a>&nbsp;<a href="#">电磁炉</a></p><div class="secondTitle"><a href="#">五金家装</a></div><p><a href="#">淋浴/水槽</a>&nbsp;<a href="#">电动工具</a>&nbsp;<a href="#">手动工具</a><br/><a href="#">仪器仪表</a>&nbsp;<a href="#">浴霸/排气</a>&nbsp;<a href="#">灯具</a></p>
</div>
</body>
</html>

2.创建对应的type.css

#type{width: 300px;/*总div的宽度*/
}
a{text-decoration: none; /*设置超链接没有下划线*/
}
a:hover{text-decoration: underline; /*设置超链接鼠标悬浮有下划线*/
}
#title{font-size: 18px; /*字体大小*/font-weight:bold;/*字体粗细*/line-height: 35px;/*行高*/background-color: #0f7cbf;/*背景色*/color: white;/*字体颜色*/
}
.secondTitle{font-size: 14px;font-weight:bold;line-height: 30px;background-color: #e4f1fa;color: #0f7cbf;
}
p{font-size: 12px;line-height: 20px;color: #666666;text-align: left; /*对齐方式*/
}p a:hover{/*p标签下面的a标签悬浮时*/color:#f60;
}

3.效果图

转载于:https://www.cnblogs.com/999-/p/6047663.html

css07家用电器分类相关推荐

用html制作家用电器网页设计，个人网页，css
1.<div>通用分组 <div>这是一个通用分组</div> <div>这是又一个通用分组</div> 解释:<div>元素在 ...
jquery选择器之基本筛选器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
jquery 获取键值对中最大值_jquery属性的操作
HTML示例代码: 第一个标题家用电器分类家用电器价格 11 男: 女: 第一行第二行第三行第四行第二个标题第一段第二段属性: attr(n|k,v|p|f):设置或返回被选属性的值 ...
jquery选择器之属性选择器
[attribute] 匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...
MySQL使用大全和JDBC使用_五万字的详细笔记
文章目录导入数据库数据库介绍什么是DB 什么是DBMS 什么是SQL 数据库的分类(了解) 常见的关系型数据开源和闭源数据库使用打开客户端连接MySQL 和数据库相关的SQL SQL格式: ...
java从入门到精通----mysql05
一.数据库之前通过流去操作文件保存数据的弊端: 1. 执行效率低 2. 开发成本高 3. 一般只能保存小量数据 4. 只能保存文本数据什么是DB DataBase 数据库: 代表文件集合什么是D ...
html （第四本书第五章参考）
上机1 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8& ...
html家电分类,电器有哪些种类？家用电器都有哪些类型？
现在生活条件在不断的变好人们家庭条件也越来越好.在生活中每个家庭中到处都能够看到家电的存在.给生活提供了很多的方便.家用电器的种类和品牌也是多,在购买之前做个简单的了解还是挺有必要的.接下来,就来看看 ...
商城分类表-二级，内容较全
商城二级分类条目基本涵盖各行各业~ 还可以继续添加到三级 /* Navicat MySQL Data TransferSource Server : 121.41.47.40 Source Serv ...

css07家用电器分类

css07家用电器分类相关推荐

最新文章

热门文章