CSS图片

当一个网页上有一张或多张图片，而且这些图片的尺寸比较大时，为了是网页布局更紧凑合理，我们可以将这些图片放到一个图片库里，可以有效的防止图片过大可能会对网页布局造成的不良影响。

通过CSS我们就可以实现这些操作，下面是一个简单的例子：

内马尔破门瞬间
街舞助兴
激情墨西哥
梅西的任意球来
源代码是： 
 1 <!doctype html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8"/>

 5 <style>

 6 div.img

 7   {

 8   margin:3px;

 9   border:1px solid #bebebe;

10   height:auto;

11   width:auto;

12   float:left;

13   text-align:center;

14   }

15 div.img img.img

16   {

17   display:inline;

18   margin:3px;

19   border:1px solid #bebebe;

20   }

21 div.img a.img:hover img.img

22   {

23   border:1px solid #333333;

24   }

25 div.desc

26   {

27   text-align:center;

28   font-weight:normal;

29   width:150px;

30   font-size:12px;

31   margin:10px 5px 10px 5px;

32   }

33 </style>

34 </head>

35 <body>

36 <div class="img">

37     <a class="img" target="_blank" href="">

38         <img class="img" src="http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=7b09810d6d061d95794633384bc431a0/ca1349540923dd5484465f5dd209b3de9c8248ca.jpg" alt="Ballade" width="160" height="160">

39     </a>

40     <div class="desc">内马尔破门瞬间</div>

41 </div>

42 <div class="img">

43     <a class="img" target="_blank" href="http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=ccd964e98913632711edc633a1bf9b9d/6d81800a19d8bc3e6c33feff818ba61ea8d345c8.jpg">

44         <img class="img" src="http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=ccd964e98913632711edc633a1bf9b9d/6d81800a19d8bc3e6c33feff818ba61ea8d345c8.jpg" alt="Ballade" width="160" height="160">

45     </a>

46     <div class="desc">街舞助兴</div>

47 </div>

48 <div class="img">

49     <a  class="img" target="_blank" href="http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=42b7c421a818972ba73a04cad6fd40f8/342ac65c1038534369537f149013b07eca808863.jpg">

50         <img class="img" src="http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=42b7c421a818972ba73a04cad6fd40f8/342ac65c1038534369537f149013b07eca808863.jpg" alt="Ballade" width="160" height="160">

51     </a>

52     <div class="desc">激情墨西哥</div>

53 </div>

54 <div class="img">

55     <a class="img" target="_blank" href="http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=3ea85b2ed70735fa95f04ab9ae6134c2/11385343fbf2b21106a37c7bc98065380cd78e72.jpg">

56         <img class="img" src="http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=3ea85b2ed70735fa95f04ab9ae6134c2/11385343fbf2b21106a37c7bc98065380cd78e72.jpg" alt="Ballade" width="160" height="160">

57     </a>

58     <div class="desc">梅西的任意球来</div>

59 </div>

60 </body>

61 </html>

通过CSS我们也可以调整图片的透明度。

通过CSS的透明效果属性(opacity属性)来完成这些操作。

CSS 媒介

CSS媒介就是定义文档以何种方式“显示”，文档可以“显示”在显示器、纸、音频等媒介上

不同的媒介类型

媒介类型 描述
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示，比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv 用于电视机类型的设备。

注：媒介类型名称对大小写不敏感。

媒介类型的定义通过使用@media实现。

@media screen

{

p{font-family:verdana,sans-serif; font-size:14px}

}

@media print

{

p{font-family:times,serif; font-size:10px}

}

@media screen,print

{

p{font-weight:bold}

}

上面的样式是p元素的内容在显示器上以(font-family:verdana,sans-serif; font-size:14px)效果显示，如果打印到纸张的话显示效果是(font-family:times,serif; font-size:10px)，显示效果(font-weight:bold)是在浏览器和打印到纸张上元素的字体都为粗体。

CSS的一些注意事项

在一个html文档中，应该要声明!DOCTYPE，因为CSS的有些属性在IE8以及一下版本时，可能无法打到逾期的效果。

尽可能避免使用behavior属性，因为behavior属性只在IE浏览器中支持，在其他浏览器不支持该属性。在需要适应behavior属性时，应该使用JavaScript和html DOM代替。

其他应注意的地方，以后遇到在做总结。

CSS自学笔记（9）:CSS拓展（二）的更多相关文章

  1. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  2. DIV+CSS学习笔记（CSS）

    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...

  3. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  4. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  5. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

  6. TypeScript 入门自学笔记 — 类型断言（二）

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  7. CSS自学笔记（8）:CSS拓展（一）

    CSS元素对齐 可以使用margin属性类进行元素的水平对齐 水平对齐块元素时,可以将块元素的margin属性定义为"auto",这里需要注意的是,应该要声明!DOCTYPE,否则 ...

  8. CSS自学笔记（5）:CSS的样式

    CSS中拥有各种各样的样式表,而基本的样式有背景,文本,字体,链接,列表,表格,轮廓. 一.CSS-背景 CSS中允许用纯色背景,也允许用图片来创建复杂的个性背景. p {background-col ...

  9. CSS自学笔记（1）:CSS简介

    一.什么是CSS CSS(Cascading Style Sheet(级联样式表))是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

随机推荐

  1. java poi 导入excel

    最近项目需要导入excel,网上有很多例子,自己整合记录下,兼容2003和2007,暂时没有添加图片处理功能. 所需jar包  http://pan.baidu.com/s/1sjPuWDR pack ...

  2. nginx+webpy 出现 upstream timed out

    关于nginx配置webpy应用出现的错误 upstream timed out (: Connection timed out) while reading response header from ...

  3. Android 上传库到Binary的操作

    第一次,按照网上教程配置需要的配置文件,上传成功 1.0版本. 以后更新的时候 输入 : install ,执行task 然后再输入:bintrayUpload ,执行task,看下面控制台输出信息, ...

  4. Yii console 创建命令行应用

    大家都知道PHP的程序没有进程概念,而且生命周期极短,无法实现一些定时计划或者是计划任务,今天我们看看在YII框架中如何使用计划任务创建命令行应用. 1.在 console/controllers 文 ...

  5. python操作csv-xls完善后的代码

    #coding:utf-8 #导入相应模块 import csv,xlwt,sys,os,fnmatch,xlrd from xlutils.copy import copy #对xls文件中的绝对值 ...

  6. Doubles water！！！！！！只会水题怎么破

    Doubles Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  7. CLR读书笔记——委托

    协变性和逆变性 协变性是指方法能返回从委托返回类型派生的一个类型. 逆变性是指获取的参数可以是委托参数类型的基类. 举个例子吧,看以下定义的委托,以及方法. delegate Object MyCal ...

  8. Linux系统中“动态库”和“静态库”那点事儿

    摘自http://blog.chinaunix.net/uid-23069658-id-3142046.html 今天我们主要来说说Linux系统下基于动态库(.so)和静态(.a)的程序那些猫腻.在 ...

  9. 胜利大逃亡(续)（状态压缩bfs）

    胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  10. 依赖注入及AOP简述（九）——单例和无状态Scope .

    三.依赖注入对象的Scope及其生命周期 在前面的章节我们讲到,依赖注入容器之所以能够区别于以往的ServiceLocator等容器,是在于其不但能够自动构建多层次的.完整的依赖关系图,并且可以管理依 ...