CSS自学笔记（9）:CSS拓展（二）
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 | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
注：媒介类型名称对大小写不敏感。
媒介类型的定义通过使用@media实现。
@media screen
{
p{font-family:verdana,sans-serif; font-size:14px}
}@mediaprint
{
p{font-family:times,serif; font-size:10px}
}@mediascreen,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拓展（二）的更多相关文章
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- DIV+CSS学习笔记（CSS）
css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
- CSS学习笔记02 CSS选择器
1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...
- CSS学习笔记01 CSS简介
1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
- TypeScript 入门自学笔记 — 类型断言（二）
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- CSS自学笔记（8）:CSS拓展（一）
CSS元素对齐 可以使用margin属性类进行元素的水平对齐 水平对齐块元素时,可以将块元素的margin属性定义为"auto",这里需要注意的是,应该要声明!DOCTYPE,否则 ...
- CSS自学笔记（5）:CSS的样式
CSS中拥有各种各样的样式表,而基本的样式有背景,文本,字体,链接,列表,表格,轮廓. 一.CSS-背景 CSS中允许用纯色背景,也允许用图片来创建复杂的个性背景. p {background-col ...
- CSS自学笔记（1）:CSS简介
一.什么是CSS CSS(Cascading Style Sheet(级联样式表))是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
随机推荐
- CDZSC_2015寒假新人（1）——基础 e
Description Julius Caesar lived in a time of danger and intrigue. The hardest situation Caesar ever ...
- easyui控件的加载顺序
使用easyui做布局时,会模仿窗口程序界面,做出一些较复杂的布局.按由外层到内层的顺序: (最外层)panel->tabs->tabs1 ->tabs2->layout-&g ...
- shopnc 商家中心添加打印商品二维码功能
需求中提到需要增加每一件商品可以打印,用于线下体验店实体商品的二维码标签,客人可以根据手机扫二维码功能进行购买 任务描述: 1.如附件实现”批量打印标签“和单个商品”打印“标签功能. 2.标签有两种” ...
- 再次优化NGINX+php-fpm上传
上次写了一篇nginx+php-fpm优化上传,一位博友留言介绍了,第三方nginx upload module http://www.grid.net.ru/nginx/upload.en.html ...
- 浅谈标签构建——TagBuilder
在很多项目中,可能我们需要写一些通用的控件标签,今天来简单的学习一下吧. 在前文中已经学习了 如何自定义MVC控件标签 ,感兴趣的朋友可以去看看. 今天主要还是讲解一下TagBuilder 我们打开源 ...
- 原生应用native、Web应用、混合应用hybrid：3者的优缺点解析
最近原生应用.Web应用.混合应用的名字让我们听得比较熟悉了,现在我们就通过评析各种应用的优缺点来更进一步看看这三者的区别. 一. 原生应用: 你使用过微软PowerPoint 或者 Word吧?这些 ...
- JIRA官方：JIRA定制工作流
定制适合项目的工作流 JIRA提供了一个缺省工作流和一系列问题类型,非常适合缺陷追踪和软件开发.在使用中你可以随时根据实际情况对流程进行调整,确保流程能够快速的适应坏境变化. 使你的工作流图形化 使用 ...
- 11.2.0.3.7 PSU补丁升级
说明:这是新上线主机,还没有建库的.如果库已经存在,那么最后还要进行刷库操作呢! 环境:SUSE Linux Enterprise Server 11 sp1 (x86_64) 要求将数据库从11.2 ...
- ok6410驱动usb摄像头
为了做图像处理,须要用摄像头,搜到实验室仅仅有一个摄像头,是国安的.详细參数在终端中看到: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGluZzEyM ...
- 求链表的倒数第k个节点
问题描述:给定一个链表的头节点,求出链表的倒数第k个节点. 分析:这是链表里的经典问题,存在多种解法,下面给大家分享下我的想法. 解法一:很直观的一种做法是从头到尾扫描链表,然后求倒数第k个,但是由于 ...