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.效果图

css07家用电器分类的更多相关文章

  1. jquery之文档操作

    append(content|fn) 向每个匹配的元素内部添加内容(元素内部) appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部) prepend(content ...

  2. jquery之css操作

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. jquery属性的操作

    HTML示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. jquery筛选器

    1.过滤   eq(index|-index)  获取当前链式操作中第N个jquery对象,正数从0开始,负数从-1开始. first 获取当前链式操作中第1个jquery对象 last 获取当前链式 ...

  5. jquery选择器之属性选择器

    [attribute]   匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...

  6. jquery选择器之子元素

    HTML代码: :first-child 匹配第一个子元素,每个父元素的第一个子元素 :last-child 匹配最后一个子元素,每个父元素的最后一个子元素 <!DOCTYPE html> ...

  7. jquery选择器之内容选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. jquery选择器之基本筛选器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. jquery选择器之层级选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. linux c下几种定时器实现

    1.alarm n秒后触发一次,不是循环的2.setitimer 可以发出3种信号给自己,3.timerfd 这个接口基于文件描述符,通过文件描述符类似epoll那种的可读事件进行超时通知,能够被用于 ...

  2. Ajax的load方法演示

    load方法的参数形式为: load(url,[data],[callback]); 其中url为请求HTML页面的URL地址.[data]表示发送至服务器的key/value数据.callback表 ...

  3. jquery.cookie()方法

    jquery.cookie.js是一个轻量级的cookie 插件,可以读取.写入.删除 cookie. 首先包含jQuery的库文件,在后面包含 jquery.cookie.js 的库文件. < ...

  4. 大脑皮层是如何工作的 《人工智能的未来》（<On intelligence>）读书笔记

    PS:今年寒假的读书笔记,挖下的坑已无力再填...不过有关智能和人工智能的书还是要继续读的~ 正文: 我觉得书名翻译不是很确切,全书讨论的核心应该更是在“真”智能:讨论对人脑智能的理解,可以怎样帮助我 ...

  5. TCP回射客户程序：main函数

    创建套接字,装填网际网套接字地址结构 创建一个TCP套接字,用服务器的IP地址和端口号装填一个网际网套接字地址结构 我们可从命令行参数取得服务器的IP地址 从头文件unp.h取得服务器的众所周知端口号 ...

  6. ctags使用详解(转载)

    一．        ctags是干什么的 ctags的功能:扫描指定的源文件,找出其中所包含的语法元素,并将找到的相关内容记录下来. 我用的是Exuberant Ctags,在Windows上使用,就 ...

  7. HTML 表格、区块、其他常用控件

    1. HTML 表格 主要关键字: table:表格: table border 属性:定义边框 -- <table border="1">: caption:表名: ...

  8. mongodb教程二

    MongoDB 创建数据库: MongoDB 创建数据库的语法格式如下: use DATABASE_NAME 如果数据库不存在,则创建数据库,否则切换到指定数据库. 如果你想查看所有数据库,可以使用  ...

  9. Node.js 安装 初体验(1)

    1.安装nodejs http://nodejs.org/download/  自动根据系统下载自己的版本node.js 2.环境变量 windows 安装,不需要配置环境变量   mac安装后,会提 ...

  10. INKDIE

    ink die是指分割出来的芯片未能达到原装芯片要求的那些U盘芯片,也就是俗称的黑片. 一整块圆硅分割制成芯片之后需要对其质量进行筛选,根据筛选的要求不同分为三个等级:原装的(Original).白片 ...