div+css中,经常会用到divspan

当内容比较多的时候,会用到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为字体指定了9级加粗度,如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别.
如果将元素的加粗设置为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中的滤镜和模糊的更多相关文章

  1. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  2. 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  3. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  4. DIV+CSS 中的 overflow:hidden

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...

  5. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  6. CSS中filter滤镜学习笔记

    1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...

  7. CSS中filter滤镜的学习笔记

    1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...

  8. DIV+CSS中标签dl dt dd常用的用法

    转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...

  9. css中的滤镜

    前几天在做一个app应用的时候,用到了滤镜.在之前我只是知道有这么个东西,但是具体的知识点其实我是不太清楚的,所以为了让自己能深刻记忆,专门把它来记录一下.. 一.滤镜的标识符:“filter”;语法 ...

随机推荐

  1. Oracle实战笔记(第二天)

    导读 今日主要内容:表管理.表操作(增删改查).表查询(简单查询&复杂查询).创建数据库. 一.表管理 1.表命名规范 必须以字母开头: 长度不能超过30个字符: 不能使用Oracle保留字: ...

  2. 更换HomeBrew源

    比较少用brew,只有之前安装Opencv的时候用过一次,后面有人问我怎么装,于是帮他研究了一下.MacOS的brew其实就是通过两个git仓库(brew和homebrew-core)来实现的源更新机 ...

  3. 【Java学习笔记之二十】final关键字在Java继承中的用法小结

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法. ...

  4. 最新版Sublime Text Build 3156 x64 的下载 + 注册码 + Install Package Control + 汉化教程

    一.Sublime Text  下载 神器 Sublime Text 最近开始更新到开发版本 Build 3156,本身英语不是太6,汉化党自然各种百度汉化教程,网上不是一堆绿色汉化包,就是让你下载汉 ...

  5. linux 内核提权

    不经意间找到了大牛总结的一些Linux提权exp 我直接借花献佛分享给大家 #CVE #Description #Kernels CVE-2017-1000367 [Sudo] (Sudo 1.8.6 ...

  6. 【Python】爬虫-Scrapy

    [Scrapy] Python开发的一个快速,高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据. Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试. Scrapy ...

  7. 我的第一个python web开发框架(20)——产品发布(部署到服务器)

    首先按上一章节所讲述的,将服务器环境安装好以后,接下来就是按步骤将网站部署到服务器上了. 我们的站点是前后端分离的,所以需要部署两个站点.首先来发布前端站点. 部署前端站点 输入命令进入svn管理文件 ...

  8. iframe及与页面之间的通信

    获取iframe对象 iframe元素本身是位于父级页面中的,所以你可以像一个普通元素一样的使用和操作它 代表了iframe内容window对象是作为一个页面的属性加入到iframe中的, 为了让父级 ...

  9. Use LiveCD to acquire images from a VM

    Forensic examiners usually acquire images from suspect's PC or Laptop. What if the target computer i ...

  10. php artisan 命令报错,什么命令都是这个错误,cmd下运行也不行,又没看到语法错误

    Laravel 5.1 以上的版本的框架需求PHP的版本是5.5以上的版本.如果你的PHP版本等级太低,将会出现上述的问题. 估计你要升级你的PHP版本了.