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> <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 class="secondTitle"><a href="#">生活电器</a></div>
<p><a href="#">电风扇</a> <a href="#">净化器</a> <a href="#">吸尘器</a><br/>
<a href="#">净水设备</a> <a href="#">挂烫机</a> <a href="#">电话机</a></p>
<div class="secondTitle"><a href="#">厨房电器</a></div>
<p><a href="#">榨汁机</a> <a href="#">电压力锅</a> <a href="#">电饭煲</a><br/>
<a href="#">豆浆机</a> <a href="#">微波炉</a> <a href="#">电磁炉</a></p>
<div class="secondTitle"><a href="#">五金家装</a></div>
<p><a href="#">淋浴/水槽</a> <a href="#">电动工具</a> <a href="#">手动工具</a><br/>
<a href="#">仪器仪表</a> <a href="#">浴霸/排气</a> <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.效果图
css07家用电器分类的更多相关文章
- jquery之文档操作
append(content|fn) 向每个匹配的元素内部添加内容(元素内部) appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部) prepend(content ...
- jquery之css操作
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jquery属性的操作
HTML示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jquery筛选器
1.过滤 eq(index|-index) 获取当前链式操作中第N个jquery对象,正数从0开始,负数从-1开始. first 获取当前链式操作中第1个jquery对象 last 获取当前链式 ...
- jquery选择器之属性选择器
[attribute] 匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...
- jquery选择器之子元素
HTML代码: :first-child 匹配第一个子元素,每个父元素的第一个子元素 :last-child 匹配最后一个子元素,每个父元素的最后一个子元素 <!DOCTYPE html> ...
- jquery选择器之内容选择器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jquery选择器之基本筛选器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jquery选择器之层级选择器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- 【USACO 3.2.3】纺车的轮子
[描述] 一架纺车有五个纺轮,这五个不透明的轮子边缘上都有一些缺口.这些缺口必须被迅速而准确地排列好.每个轮子都有一个起始标记(在0度),这样所有的轮子都可以在统一的已知位置开始转动.轮子按照角度变大 ...
- JavaScript 的setAttribute兼容性解决
setAttribute各个浏览器都支持,但在IE7以下版本中,有些属性值还是有差异的,比如 obj.setAttribute("class","classname&qu ...
- Highcharts中文网
官网地址: http://www.hcharts.cn/ http://www.hcharts.cn/p/highchartTable.php 名词解释 英文名 中文名 描述 更多 lang 语言 ...
- sencha Touch 的 DatePickerField等时间的汉化
对于datepickerfiled dateFormat 时间格式 Y-m-d w星期几 W 一年第多少周 时间的初始化 mydatefield.setValue( { year:2013, m ...
- POJ 2250(LCS最长公共子序列)
compromise Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Descri ...
- 使用cglib动态创建java类
转至:http://ckwang17.iteye.com/blog/963881 cglib 是一个开源项目! 是一个强大的,高性能,高质量的Code生成类库,它可以在运行期扩展Java类与实现Jav ...
- 构建高可用web站点（四）
首先我们来了解负载均衡的概念:英文名称为Load Balance,其意思就是将负载(工作任务)进行平衡.分摊到多个操作单元上进行执行,例如Web服务器.FTP服务器.企业关键应用服务器和其它关键任务服 ...
- 【HDOJ】1547 Bubble Shooter
两次BFS,一次扫描关联点.一次扫描可能掉落的情况(即再次扫描所有非爆炸的联通点).余下未被扫描的点均爆炸. #include <cstdio> #include <cstring& ...
- spring framework 4 源码阅读
前面写了几篇spring 的介绍文章,感觉与主题不是很切合.重新整理下思路,从更容易理解的角度来写下文章. spring 的骨架 spring 的骨架,也是spring 的核心包.主要包含三个内容 1 ...
- （2015年郑州轻工业学院ACM校赛题） C 数列
在我们做完B题之后就去看C题了, 发现很多人都已经做出来了, 并且一血还是我们学弟拿的, 感觉这题不难, 我们举了几个例子之后发现全是Alice 然后我们就决定意淫一下,试试看! 没想到就A了 - . ...