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=" ...
随机推荐
- IE8’s Substr() Bug
IE8不支持substr()函数, 第一个参数为负数,比如:var index = id.substr(-1, 1);替代:var index = id.substr(id.length-1, 1);
- Python django admin 替换表单控件
测试版本: Python 2.7 Django 1.6.2 models.py from django.db import models class Article(models.Model): ti ...
- Spring4.0学习笔记(12) —— JDBCTemplate 操作数据库
整体配置 1.配置xml文件 <beans:beans xmlns="http://www.springframework.org/schema/mvc" xmlns:xsi ...
- java使用json抛出org.apache.commons.lang.exception.NestableRuntimeException解决方案
出现这个问题,说明缺少jar包,将下面的jar引入即可 commons-beanutils-1.8.3 commons-lang-2.6 (注:导入最新的 3.1 版本会继续报如下错误) common ...
- Uncaught SyntaxError: Unexpected end of input
js报错 原因:输入的意外终止…… 页面代码写的不规范啊……其中的某条语句,没有正常结束…… 或者部分语句“‘’”双引号,单引号没有配对好,被转义了之类的……错误造成的 代码: <script ...
- 代码发布架构方案（SVN）
问题: 安装优化软件环境nginx,lvs 程序代码(不断更新) 配置更新(不断变更) 1.SVN介绍 1.1 什么是SVN(Subversion)? SVN(Subversion) ...
- 学生选课系统数据库SQL语句考试题
一. 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...
- NOIP[2015] 运输计划
传送门 题目描述 Description 公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n−1 条双向航道,每条航道建立在两个星球之间,这 n−1 条航道连通了 L 国的所有星球 ...
- 转：/etc/inittab文件的字段及其说明
/etc/inittab文件中每个登记项的结构都是一样的,共分为以冒号“:”分隔的4个字段.具体如下: identifier : run_level : action : pro ...
- More lumber is required
hdu4396:http://acm.hdu.edu.cn/showproblem.php?pid=4396 题意:一个无向带权图,然后给出起点s,终点e,让你求s到e的最短路径,但是这里的路径有要求 ...