博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
经典的CSS代码(转)
阅读量:5830 次
发布时间:2019-06-18

本文共 1786 字,大约阅读时间需要 5 分钟。

Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。

分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。

1. CSS Resets

网络上关于CSS重置的代码非常多。本段代码是根据进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。

 
View Code

 

2.经典的CSS Clearfix

这个clearfix代码已在Web开发者之间广泛流传,这段类选择器要应用到持有浮动元素的容器中,确保后面的内容都不会浮动,但会被下推和清除。

 
View Code

 

3.升级版的Clearfix

在表现上,新版本和经典版本不存在什么差异,这些类可以有效地清除所有floats,但它们只兼容现代浏览器和传统的IE 6-8。

 
View Code

 

4. Cross-Browser Transparency 

CSS3里的许多属性都与浏览器相兼容,但也有特例,比如opacity,需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。

 
View Code

源码地址: 

 

5. CSS Blockquote模板

这段代码主要用在页面上进行分离引用或复制内容,并且给页面文字提供了默认样式。 

 
View Code

查看源码: 

 

6. 个性化的圆角代码

许多CSS开发者都非常熟悉圆角语法,但如何为每个角设置不同的值?不如看看下面这段代码吧!

 
View Code

 

7. 一般媒体查询

这是一段非常好的模板,用于各种零零碎碎的媒体查询,在移动设备上也可以使用,这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。

 
View Code

源码地址: 

 

8. 现代字体栈

在新网页上设计属于自己的字体栈还是件比较困难的事情,希望下面这段代码能给你带来启发和开发模板,关于更多字体栈源码,你可以访问。

 
View Code

 源码地址: 

 

9. 自定义文本选择

一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色,下面代码的默认颜色是浅蓝色,当然,你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。

 
View Code

 

10.隐藏Logo上的H1文本

 
View Code

 

11. 为图片创建拍立得效果边框

运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。

 
View Code

源码地址: 

 

12. 锚链接伪类选择器

 
View Code

源码地址: 

 

13. 花俏地CSS3 Pull-Quotes

Pull-quotes不同于页面里的blockquote,它们通常用在文章中来引用文本。

 
View Code

源码地址: 

 

14. CSS3的全屏背景效果

如果你想使用大图片作为网站背景,并希望在页面滚动时保持固定,该代码片段非常适合,不过这段代码无法在旧的浏览器上工作。

 
View Code

源码: 

 

15. 内容垂直集中

相对于内容在水平位置,内容在垂直方向是不好把控的,尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。

 
View Code

源码地址: 

 

16. 垂直滚动条

这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。 

 
View Code

 

17. CSS3 Gradients模板

 
View Code

 

18. @Font-Face模板

使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站,并生成自定义font families。

 
View Code

源码地址: 

 

19.创建缝合效果

 
View Code

 

20. CSS3 斑马线效果

当用户在浏览许多行数据时,很难分清哪一个单元格是属于哪一行的。默认情况下,通过添加斑马线,用户可以给奇偶行更新不同的背景色。

 
View Code

 

源码地址: 

来自: 

转载于:https://www.cnblogs.com/lianghong/p/7989439.html

你可能感兴趣的文章
iis 6.0上部署.net 2.0和4.0网站
查看>>
hdu 3665(最短路)
查看>>
HTML <iframe> 标签
查看>>
JSON(Ajax)和JsonP
查看>>
漫谈中国软件(中)
查看>>
九度OJ 1502 最大值最小化(JAVA)
查看>>
算法代码[置顶] 机器学习实战之KNN算法详解
查看>>
leetcode -- Longest Common Prefix
查看>>
郝娜 - 百度百科
查看>>
SmartProg2 Universal, ISP capable programmer
查看>>
jquery常用方法
查看>>
把长方形的图片截取成正方形
查看>>
三大线性排序之基数排序
查看>>
PHP 友好的dump
查看>>
HDU 3473 Minimum Sum(划分树)
查看>>
vs2010设置
查看>>
Android--UI之ViewStub
查看>>
web.xml中contextConfigLocation的作用
查看>>
Storm-源码分析-Topology Submit-Executor-mk-threads
查看>>
我院同学在2013年第四届“蓝桥杯”全国软件专业人才设计与创业大赛全国总决赛中获得佳绩...
查看>>