当前位置: 澳门新濠3559 > 服务器运维 > 正文

not() 伪类来应用元素,所以tip下面的三角形也有

时间:2019-12-26 07:51来源:服务器运维
今天又回顾了一下这个插件,然后发现它在IE6下面工作的时候,显示起来是不正常的,tip经常出现在很离谱的位置。问题还有,由于tip的显示效果没有用到任何图像,都是纯的CSS,所以

今天又回顾了一下这个插件,然后发现它在IE6下面工作的时候,显示起来是不正常的,tip经常出现在很离谱的位置。问题还有,由于tip的显示效果没有用到任何图像,都是纯的CSS,所以里面用CSS实现的三角形在IE6下是无法工作的,会显示一块有色区域,很丑,所以我就想动手改它一下。先上一张对比图好了:

  1. 黑白图像

js方面的代码肯定是没问题的,问题出CSS上,Colortip用的是position进行定位,在IE6下面可能存在着一点问题。而且由于IE6不支持border-color:transparent的属性,所以tip下面的三角形也有问题。下面修正它吧。 打开插件的colortip-1.0-jquery.css这个文件,在里面找到如下代码: 复制代码 代码如下: .pointyTip,.pointyTipShadow{ /* Setting a thick transparent border on a 0x0 div to create a triangle */ border:6px solid transparent; _border:6px solid #123456; /*指定一个特别的颜色值,为使用chroma滤镜作准备*/ bottom:-12px; height:0; left:50%; margin-left:-6px; position:absolute; width:0; font-size:0; /*IE下空标签会有一个高度,把font-size设为0可以清除这个高度*/ _filter:chroma; /*为IE6使用chroma滤镜将颜色#123456过滤成透明的*/ } 如果大家自行看一下代码的话,可能会发现我贴出来的代码和原来相比有点不同,但是我已经把注释写在里面了,应该可以理解吧。 下面继续: 复制代码 代码如下: .pointyTipShadow{ /* The shadow tip is 1px larger, so it acts as a border to the tip */ border-width:7px; bottom:-14px; _bottom:-15px; /*将小三角形的位置微调一下更准确*/ margin-left:-7px; } .colorTipContainer{ position:relative; text-decoration:none !important; _zoom:1; /*不知道为什么,这里加上zoom:1后IE6下使用left:50%才能得到正确的位置,难道内联的元素没有layout?无法准确表达……*/ } 好了,到这里就修正完毕了,在我的机器上,用IEtester和VMware虚拟机的XP+IE6都测试通过,你也可以试试效果。有任何问题可以向我反馈,我能改则改。代码好理解,不能理解的直接用插件就行了。 插件网站 | 原版DEMO | 改后DEMO | 修正后的插件下载 再补充一句,原版和改后的DEMO在高级浏览器里面的效果是一样的,没区别,但是用IE6试试就知道了。希望我做的这一点点微不足道的工作,为喜欢这款插件的朋友们带来方便,^_^ 关于纯CSS的方法实现三角形的效果,可以参看Mr.Think的这篇文章,很详细很不错的技巧CSS技巧之圆角背景与三角形。

这段代码会让你的彩色照片显示为黑白照片,是不是很酷?

img.desaturate {

   filter: grayscale(100%);

   -webkit-filter: grayscale(100%);

   -moz-filter: grayscale(100%);

   -ms-filter: grayscale(100%);

   -o-filter: grayscale(100%);

}

2. 使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

/* add border */

.nav li {

 border-right: 1px solid #666;

}

……然后再除去最后一个元素……

// remove border /

.nav li:last-child {

 border-right: none;

}

……可以直接使用 :not() 伪类来应用元素:

.nav li:not(:last-child) {

 border-right: 1px solid #666;

}

这样代码就干净,易读,易于理解了。

当然,如果你的新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):

..nav li:first-child ~ li {

 border-left: 1px solid #666;

}

3. 页面顶部阴影

下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果:

body:before {

         content: "";

         position: fixed;

         top: -10px;

         left: 0;

         width: 100%;

         height: 10px;

         -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

         -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

         box-shadow: 0px 0px 10px rgba(0,0,0,.8);

         z-index: 100;

}

4. 给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:

body {

 line-height: 1;

}

这样文本元素就可以很容易地从 body 继承。

5. 所有一切都垂直居中

要将所有元素垂直居中,太简单了:

html, body {

 height: 100%;

 margin: 0;

}

body {

 -webkit-align-items: center; 

 -ms-flex-align: center; 

 align-items: center;

 display: -webkit-flex;

 display: flex;

}

看,是不是很简单。

注意:在IE11中要小心flexbox。

6. 逗号分隔的列表

让html列表项看上去像一个真正的,用逗号分隔的列表:

ul > li:not(:last-child)::after {

 content: ",";

}

对最后一个列表项使用 :not() 伪类。

7. 使用负的 nth-child 选择项目

在CSS中使用负的 nth-child 选择项目1到项目n。

li {

 display: none;

}

/* select items 1 through 3 and display them */

li:nth-child(-n+3) {

 display: block;

}

8. 对图标使用 SVG

我们没有理由不对图标使用SVG:

.logo {

 background: url("logo.svg");

}

SVG对所有的分辨率类型都具有良好的扩展性,并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。

9. 优化显示文本

有时,字体并不能在所有设备上都达到最佳的显示,所以可以让设备浏览器来帮助你:

html {

 -moz-osx-font-smoothing: grayscale;

 -webkit-font-smoothing: antialiased;

 text-rendering: optimizeLegibility;

}

注:请负责任地使用 optimizeLegibility。此外,IE /Edge没有 text-rendering 支持。

10. 对纯 CSS 滑块使用 max-height

使用 max-height 和溢出隐藏来实现只有CSS的滑块:

.slider ul {

 max-height: 0;

 overlow: hidden;

}

.slider:hover ul {

 max-height: 1000px;

 transition: .3s ease;

}

11. 继承 box-sizing

让 box-sizing 继承 html:

html {

 box-sizing: border-box;

}

*, *:before, *:after {

 box-sizing: inherit;

}

这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。

12. 表格单元格等宽

表格工作起来很麻烦,所以务必尽量使用 table-layout: fixed 来保持单元格的等宽:

.calendar {

 table-layout: fixed;

}

13. 用 Flexbox 摆脱外边距的各种 hack

当需要用到列分隔符时,通过flexbox的 space-between 属性,你就可以摆脱nth-,first-,和 last-child 的hack了:

.list {

 display: flex;

 justify-content: space-between;

}

.list .person {

 flex-basis: 23%;

}

现在,列表分隔符就会在均匀间隔的位置出现。

14. 使用属性选择器用于空链接

当a元素没有文本值,但 href 属性有链接的时候显示链接:

a[href^="http"]:empty::before {

 content: attr(href);

}

相当方便。

15. 检测鼠标双击

HTML:

CSS:

.test3 span {

 position: relative;

}

.test3 span a {

 position: relative;

 z-index: 2;

}

.test3 span a:hover, .test3 span a:active {

 z-index: 4;

}

.test3 span input {

 background: transparent;

 border: 0;

 cursor: pointer;

 position: absolute;

 top: -1px;

 left: 0;

 width: 101%; /* Hacky */

 height: 301%; /* Hacky *澳门新濠3559,/

 z-index: 3;

}

.test3 span input:focus {

 background: transparent;

 border: 0;

 z-index: 1;

}

16. CSS 写出三角形

利用border来写三角形代码,并且兼容IE6.

/* create an arrow that points up */

div.arrow-up {

 width:0px;

 height:0px;

 border-left:5px solid transparent; /* left arrow slant */

 border-right:5px solid transparent; /* right arrow slant */

 border-bottom:5px solid #2f2f2f; /* bottom, add background color here */

 font-size:0px;

 line-height:0px;

}

/* create an arrow that points down */

div.arrow-down {

 width:0px;

 height:0px;

 border-left:5px solid transparent;

 border-right:5px solid transparent;

 border-top:5px solid #2f2f2f;

 font-size:0px;

 line-height:0px;

}

/* create an arrow that points left */

div.arrow-left {

 width:0px;

 height:0px;

 border-bottom:5px solid transparent; /* left arrow slant */

 border-top:5px solid transparent; /* right arrow slant */

 border-right:5px solid #2f2f2f; /* bottom, add background color here */

 font-size:0px;

 line-height:0px;

}

/* create an arrow that points right */

div.arrow-right {

 width:0px;

 height:0px;

 border-bottom:5px solid transparent; /* left arrow slant */

 border-top:5px solid transparent; /* right arrow slant */

 border-left:5px solid #2f2f2f; /* bottom, add background color here */

 font-size:0px;

 line-height:0px;

}

17. CSS3 calc() 的使用

calc() 用法类似于函数,能够给元素设置动态的值:

/* basic calc */

.simpleBlock {

 width: calc(100% - 100px);

}

/* calc in calc */

.complexBlock {

 width: calc(100% - 50% / 3);

 padding: 5px calc(3% - 2px);

 margin-left: calc(10% + 10px);

}

18. 文本渐变

文本渐变效果很流行,使用 CSS3 能够很简单就实现:

h2[data-text] {

 position: relative;

}

h2[data-text]::after {

 content: attr(data-text);

 z-index: 10;

 color: #e3e3e3;

 position: absolute;

 top: 0;

 left: 0;

 -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

19. 禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

20. 模糊文本

简单但很漂亮的文本模糊效果,简单又好看!

.blur {

  color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);

}

原文:

编辑:服务器运维 本文来源:not() 伪类来应用元素,所以tip下面的三角形也有

关键词: