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=" ...
随机推荐
- 如果使用的是orm，是否还需要关系索引
简而言之:是的,仍然需要理解索引,即使是使用对象关系映射(ORM)工具. ORM工具能够产生符合逻辑的,合法的查询(多数的时候),除非只是生成非常基本的查询(例如仅是根据主键查询的),否则它很难生成适 ...
- winform 剔除空格与换行显示
string strTeachingPlan = this.txtTeachingPlan.Text.ToString().Trim(); string[] maarr = strTeachingP ...
- Yii2的相关学习记录，初始化Yii2（二）
前面已经将Yii2下载下来了,那我们就需要能实际的使用. 一.初始化,因为我都是在windows系统下,所以用cmd命令打开下载下来的Yii2的根目录.然后运行下面命令: init 会提示选择0为开发 ...
- mongodb 教程一
mongodb是nosql(not only sql)的一种方式 .是对不同于传统的关系型数据库的数据库管理系统的统称. NoSQL - 代表着不仅仅是SQL- 没有声明性查询语言- 没有预定义的模式 ...
- 转：Node.js异步处理CPU密集型任务的新思路
原文来自于:http://www.infoq.com/cn/articles/new-idea-of-nodejs-asynchronous-processing-tasks?utm_source=i ...
- 把 图片 资源文件 编译到dll
今天盘古 lucene的改了下.然后 里面有很多文件 . 还有一些 生成多音字的 汉语词典等. 索性一下子编译到dll里面 . 就不在项目里面设置 这些文件的目录了 然后找了下.愣是没找到. 后来发现 ...
- VS2013程序打包部署（图解），vs2013部署
VS2013程序打包部署(图解),vs2013部署 首先要说明的是VS解决方案配置下的Debug模式和Release模式有什么区别.Debug模式通常称为调试模式,它包含调试信息,未对代码进行优化,方 ...
- PKUSC2016滚粗记
Day0 坐飞机来北京,地铁上接到电话,以为是诈骗电话马上就挂了,然后看了一下是北京的电话,赶脚有点不对...打回去居然是报到处老师的电话..走了几个小时,到勺园和其他学校的神犇合住.TAT,感觉第二 ...
- h.264参考图像列表、解码图像缓存
1.参考图像列表(reference picture list) 一般来说,h.264会把需要编码的图像分为三种类型:I.P.B,其中的B.P类型的图像由于采用了帧间编码的这种编码方式,而帧间编码又是 ...
- 禁止ultraedit自动检查更新的方法
菜单栏: 高级->配置->应用程序布局->其他 取消勾选“自动检查更新”