DIV+CSS中的滤镜和模糊
在div＋css中，经常会用到div和span
当内容比较多的时候，会用到div
当内容比较少的时候，会用到span
来看下面的代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
</head>
<body>
<span style="color:green;font-size:30px;">栏目一</span><br>
<span style="color:orange;font-size:16px;">栏目二</span><br>
<span style="color:blue;font-size:16px;font-style:italic;">栏目三</span><br>
<span style="color:green;font-size:16px;font-weight:bold;">栏目四</span><br>
<span style="color:navy;font-size:16px;font-weight:bold;">栏目五</span><br>
</body>
</html>
执行后的效果如下：
在这里设置了字体的粗细．
设置段落字体的粗细的属性：
font-weigth属性设置文本的粗细．
使用bold关键字可以将文本设置为粗体．
关键字100~900为字体指定了９级加粗度，如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别．
如果将元素的加粗设置为bolder,浏览器会设置比所继承值更粗的一个字体加粗．
与此相反，关键词lighter会导致浏览器将加粗度下移而不是上移．
p.normal{font-weight:normal;}
p.thick{font-weight:bold;}
p.thicker{font-weight:900}
看到上面的代码，是不是感觉很low.
假如现在想把上面的五行字都换成跟第一行字的效果一样，有什么好的办法呢？？？
来看下面的这段代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.style1{
color:green;
font-size:30px;
}
</style>
</head>
<body>
<span class="style1">栏目一</span><br>
<span class="style1">栏目二</span><br>
<span class="style1">栏目三</span><br>
<span class="style1">栏目四</span><br>
<span class="style1">栏目五</span><br>
</body>
</html>
刷新浏览器，效果如下：
这样想一次性修改五行的样式的话，就可以相接修改style里面的代码就可以了．
比如，现在想把五行的字体都变成斜体的话，就可以加上下面的属性就可以了．
font-style:italic;
修改后的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.style1{
color:green;
font-size:30px;
font-style:italic;
}
</style>
</head>
<body>
<span class="style1">栏目一</span><br>
<span class="style1">栏目二</span><br>
<span class="style1">栏目三</span><br>
<span class="style1">栏目四</span><br>
<span class="style1">栏目五</span><br>
</body>
</html>
刷新浏览器后得到的效果如下：
可以看到css可以统一网站的风格．
现在想把一个网站的所有图片都为成黑白色或者模糊，这个要怎么实现呢？？
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS的滤镜效果</title>
<style type="text/css">
a:link img {filter: grayscale(100%);}
a:hover img {filter: grayscale(10%);}
</style>
</head>
<body>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
</body>
</html>
当图片正常显示，鼠标没有放在图片上的时候，图片显示的是灰色的；
当鼠标放置在图片上的时候，图片就变成正常颜色的了．现在把鼠标放在第一张图片上，显示的效果如下：
再把鼠标移动到第四张图片上，显示的效果如下：
这就是滤镜的效果．
再来看看使用css达到图片模糊的效果．
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS的滤镜效果</title>
<style type="text/css">
a:link img {filter:blur(10px);}
a:hover img {filter:blur(0px);}
</style>
</head>
<body>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
</body>
</html>
现在图片正常显示，鼠标暂时没有放置到任何一张图片上，效果如下：
把鼠标放在第一张图片上，显示的效果如下:
再把鼠标放在第四张图片上,显示的效果如下:
这就达到想要的图片模糊的效果了.
DIV+CSS中的滤镜和模糊的更多相关文章
- div+css中常见的浏览器兼容性处理-兼容不同浏览器
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...
- 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法
div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- DIV+CSS 中的 overflow:hidden
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- CSS中filter滤镜学习笔记
1．CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...
- CSS中filter滤镜的学习笔记
1．CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...
- DIV+CSS中标签dl dt dd常用的用法
转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...
- css中的滤镜
前几天在做一个app应用的时候,用到了滤镜.在之前我只是知道有这么个东西,但是具体的知识点其实我是不太清楚的,所以为了让自己能深刻记忆,专门把它来记录一下.. 一.滤镜的标识符:“filter”;语法 ...
随机推荐
- KinectFusion解析
三维重建是指获取真实物体的三维外观形貌,并建立可复用模型的一种技术.它是当下计算机视觉的一个研究热点,主要有三方面的用途:1)相比于二维图像,可以获取更全面的几何信息:2)在VR/AR中,建立真实 ...
- 基于Xilinx FPGA的视频图像采集系统
本篇要分享的是基于Xilinx FPGA的视频图像采集系统,使用摄像头采集图像数据,并没有用到SDRAM/DDR.这个工程使用的是OV7670 30w像素摄像头,用双口RAM做存储,显示窗口为320x ...
- RPM包效验
- js实现深拷贝和浅拷贝
浅拷贝: 思路----------把父对象的属性,全部拷贝给子对象,实现继承. 问题---------如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,不会开辟新栈,不是 ...
- qt中moc的作用
Qt 将源代码交给标准 C++ 编译器,如 gcc 之前,需要事先将这些扩展的语法去除掉.完成这一操作的就是 moc. moc 全称是 Meta-Object Compiler,也就是"元对 ...
- sizeof与strlen的不同
sizeof操作符的结果类型是size_t,它在头文件中typedef为unsigned int类型. 该类型保证能容纳实现所建立的最大对象的字节大小. sizeof是算符,strlen是函数. si ...
- 【干货】平安打卡神器E行销刷脸考勤破解，是怎么做到的？
很多人好奇平安E行销打卡到底是怎么破解的,为什么明明需要连接公司职场WiFi才可以参会,才可以刷脸打卡.为什么不用去公司,在家里,或者外面只要有4G或WiFi的地方都可以.今天我就来给大家解密.把原理 ...
- 访问网时出现403 Forbidden错误的原因：
1.你的IP被列入黑名单.2.你在一定时间内过多地访问此网站(一般是用采集程序),被防火墙拒绝访问了.3.网站域名解析到了空间,但空间未绑定此域名.4.你的网页脚本文件在当前目录下没有执行权限.5.在 ...
- QQ邮箱开启SMTP服务的步骤
首先要确保你的QQ邮箱已经要开启超过一个月.对于新开启的邮箱,腾讯是不开放这些功能的. 方法/步骤 首先点QQ头像旁边的信封符号进入邮箱. 当然你也可以使用 mail.qq.com进邮箱 进入邮箱后点 ...
- dede被注入后台提示用户名不存在解决方法
如果已经发现/data,有很长一个txt记事本,说明已经被其他人SQL注入了,或是已经有人进行尝试SQL注入了了. 记事儿本如:75252sdaswfdfsfq538ef2ad3556_safe.tx ...