日星网 windows 中文论坛

 找回密码
 加入我们

QQ登录

只需一步,快速开始

查看: 1793|回复: 11

《精通CSS 高级Web标准解决方案 》-- 阅读笔记

[复制链接]
发表于 2012-6-19 04:08:06 | 显示全部楼层 |阅读模式
1. 子选择器和相邻同胞选择器
#nav > li {……}
h1 + p {……}

属性选择器
<abbr title="Cascading Style Sheets">CSS</abbr>
abbr[title] {border-bottom:1px dotted #999;}
abbr[title]:hover {cursor: help;} 鼠标指针改为问号
由于IE6不支持属性选择器可以通过以下办法修改
.intro {border-style:solid;}
[class="intro"] {border-style:dotted;}

a[rel~="friend"] {……} rel属性中包含关键字friend的任何连接。

CSS的特殊性排序
用style属性编写的规则总比其他任何规则特殊,具有ID选择器的规则比没有ID选择器的规则特殊,具有类选择器的规则比只有类选择器的规则特殊,最后,如果两个规则的特殊性相同,那么后定义的规则优先。
 楼主| 发表于 2012-6-20 05:07:35 | 显示全部楼层
固定宽度的圆角框

只需要两个图像,一个图像用于框的顶部,另一个用于底部。

灵活的圆角框
需要创建四个图像

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入我们

x
 楼主| 发表于 2012-6-21 04:12:10 | 显示全部楼层
链接
a 的伪类选择器
link *表示寻早没有访问过的链接
visited *表示用来寻找访问过的链接
hover *表示鼠标停留处的链接
active *表示鼠标激活的链接

创建奇特的链接下划线


给外部链接添加图片
.external {
background:url("images/externalLink.gif(外部链接图片)") no-repeat right top;
padding-right: 10px;
}
图片样式可以自己设计。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入我们

x
 楼主| 发表于 2012-6-21 04:25:57 | 显示全部楼层
Pixy样式的翻转

首先创建组合的按钮图像, 正面按钮图像和反面按钮图像保存在一个画面中

  1. a:link, a:visited{
  2. display:block;
  3. width:200px;
  4. height:40px;
  5. background:url(组合图片位置) no-repeat left top;
  6. text-indent:50px;
  7. }

  8. a:hover {
  9. background-color:#369;
  10. background-position:right top;
  11. }
复制代码
为了实现不闪烁的效果
可以给P添加组合按钮背景
 楼主| 发表于 2012-6-21 04:34:27 | 显示全部楼层
纯CSS工具提示

  1. <p><a href="xxxx.com" class="tooltip">Andy Budd<span>(this si websites)</span></a></P>
复制代码
需要把里面的<span>中的内容作为提示显示

  1. a.tooltip {
  2. position:relative;
  3. }
  4. a.tooltip span {
  5. display:none;
  6. }
  7. 鼠标放上去的时候
  8. a.tooltip:hover span {
  9. display:block;
  10. position:absolute;
  11. top:1em;
  12. left:2em;
  13. }

复制代码
IE6下实现此功能,在a.tooltip:hover { font-size:100%} 即可解决。
 楼主| 发表于 2012-6-28 04:41:49 | 显示全部楼层
1. summary 和 caption
summary 属性可以应用于表格标签,用来描述表格的内容
caption   基本上用作表格的标题

  1. <table summary=" Top 15 songs">
  2.     <caption>Top 15 playlist</caption>
  3. </table>
复制代码
2.thead tbody tfoot
thead 表头
tbody 表身
tfoot 表尾

3. col 和 colgroup
能够为多个列进行分组
<colgroup>
<col id="xxx" />
<col id="uuu" />
</colgroup>
 楼主| 发表于 2012-6-28 04:47:29 | 显示全部楼层
对表格应用样式
为了防止表格太宽,需要限制他的宽度,
border-collapse:collapse;

border-spacing 可以控制单元格之间的距离,IE6下使用cellspacing
文本缩进
text-indent:-1000em;

tr:hover {}

fieldset {}相关信息分组的元素

  1. fieldset {border:solid 0 transparent;} /*其中transparent表示透明的意思*/
复制代码
legend 元素,像是fieldset的标题

input:focus :focus表示获得焦点的时候
 楼主| 发表于 2012-6-29 04:46:09 | 显示全部楼层
使用自动空白让设计居中

  1. margin:0 auto;
复制代码
不过这个方法在IE6下不兼容
解决办法

  1. body {
  2.    text-align:center;
  3. }
  4. weaper {
  5.   width:720px;
  6.   margin:0 auto;
  7.   text-align:left;
  8. }
复制代码
即可

负白边定位居中法

  1. #weaper {
  2.   width:720px;
  3.   position:relative;
  4.   left:50%;
  5.   margin-left:-360px;
  6. }
复制代码
 楼主| 发表于 2012-6-29 04:55:24 | 显示全部楼层
overflow:hidden  表示图像元素会被截短,不会跟主元素伸缩

有时为了控制图片的大小还可以利用以下方法

  1. img {
  2.   width:25%;
  3.   max-width:200px;
  4. }
复制代码
发表于 2012-7-2 04:24:01 | 显示全部楼层
IE的有条件注释
使用方法

  1. <!--[if IE] (IE5 的情况下 输入 IE 5  5.5的情况下输入 IE 5.5000)
  2. <style type="text/css">
  3. @import  ("ie.css");
  4. </style>
  5. -->
复制代码
!important 和 下划线的招数
都是能够令IE6执行的功能。
发表于 2012-7-3 04:33:19 | 显示全部楼层
常见的CSSbug及修复方法。
1. 双空白边浮动bug

IE6,最容易出现此bug, 在任何浮动元素上的空白边加倍。
解决方法: display:inline; 即可

2.三像素文本偏移bug

IE6, 当文本与一个浮动元素相邻的时候,就会出现这个bug
解决方法:

  1. /* Hide from IE5-Mac. Only IE-Win sees this. \ */
  2. *html p {
  3.   height: 1%;
  4.   margin-left: 0;
  5. }
  6. * html .myFloat {
  7.   margin-right:-3px;
  8. }
  9. /* End hide from IE5 / Mac */
复制代码
3.IE6 重复字符bug

在IE6中,一系列浮动元素的最后几个字符会在浮动元素下面重复出现,这个主要是由于第一个和最后一个
浮动元素之间有很多个注释导致,
解决方法:
通过设置负值的右空白边,从最后一个浮动元素上去掉3像素,或是扩大3像素。 最好的方法就是删除注释。
发表于 2012-7-3 04:40:28 | 显示全部楼层
4. IE6 躲猫猫bug

一个浮动元素后面跟着一些浮动元素,然后是一个清理元素,那么中间的非浮动元素看起来就像消失了。
解决办法:
去掉父元素背景色或图像, 给容器元素添加特定的尺寸都可以。

5.IE6 相对容器中的绝对定位

解决办法:

  1. /*Hides from IE-Mac \*/
  2. * html .container {
  3.    height:1%;
  4. }
  5. /*End hide from IE-Mac*/
复制代码
使用Holly招数以及最小高度就可以解决。
您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

手机版|小黑屋|日星网 ( 黑ICP备07001742号 )

GMT, 2018-11-21 09:45 AM , Processed in 0.017444 second(s), 19 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表