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=" ...
随机推荐
- HDU 4632 CF 245H 区间DP（回文）
先说HDU 4632这道题,因为比较简单,题意就是给你一个字符串,然后给你一个区间,叫你输出区间内所有的回文子序列,注意是回文子序列,不是回文字串. 用dp[i][j]表示区间[i,j]内的回文子序列 ...
- 巧用C#做中间语言 实现Java调用.net DLL
本文将详细为大家介绍一个java调用.net DLL的方法,以实现特殊的客户的特殊要求:“在Java项目中必须使用其提供的用.net写的DLL加密机制!” 环境与工具: ◆.net framework ...
- 2.2.5 NIO.2 Path 和 Java 已有的 File 类
NIO与IO交互 toPath() File -- Path toFile() Path -- File Demo: import java.io.File; import java.nio.file ...
- C++ 性能剖析 （一）
C++ 性能剖析 (一) 性能问题也不是仅仅用“技术”可以解决的,它往往是架构,测试,假设等综合难题.不过,对于一个工程师来说,必须从小做起,把一些“明显”的小问题解决.否则的话积小成多,千里堤坝,溃 ...
- Nginx源码研究七：nginx的location指令分析
在nginx的配置文件nginx.conf中,我们在配置server的时候,会配置一下location指令,这个location指令是提供给用户来配置对于符合指令的http请求,采用该指令内部的处理方 ...
- [Struts2学习笔记] -- 简单的类型转换
接下来学习一下Struts2简单的类型转换,Struts2基于ognl.jar实现了简单类型的数据转换.比如jsp页面中的form值与字段值的转换,下面写一个例子. 1.创建一个jsp页面,编写一个f ...
- 使用Gson进行json数据转换（list to json 和json to list）
文章借鉴自:http://blog.csdn.net/binyao02123202/article/details/7540407 下面是一个简单的例子: Java代码 public class Pe ...
- laravel框架——composer导入laravel
第一种: composer create-project --prefer-dist laravel/laravel 名称 "5.2.*"第二种: composer global ...
- iOS 写入文件保存数据的方式
在iOS开发过程中,不管是做什么应用,都会碰到数据保存的问题.将数据保存到本地,能够让程序的运行更加流畅,不会出现让人厌恶的菊花形状,使得用户体验更好.下面介绍一下数据保存的方式: 1.NSKeye ...
- C语言学习--可变数组
#ifndef _ARRAY_ #define _ARRAY_ typedef struct { int *array; int size; } Array; //此处定义结构数据类型 Array,虽 ...