文档章节

60个有用CSS代码片段21-40

网开一面
 网开一面
发布于 2015/09/24 19:42
字数 808
阅读 4
收藏 0

21、图片边框偏光

img.polaroid {    background:#000; /*Change this to a background image or remove*/    border:solid #fff;    border-width:6px 6px 20px 6px;    box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */    -webkit-box-shadow:1px 1px 5px #333;    -moz-box-shadow:1px 1px 5px #333;    height:200px; /*Set to height of your image or desired div*/    width:200px; /*Set to width of your image or desired div*/}

Code Source

22、锚链接伪类

a:link { color: blue; }a:visited { color: purple; }a:hover { color: red; }a:active { color: yellow; }

Code Source

23、奇特的CSS引用

.has-pullquote:before {    /* Reset metrics. */    padding: 0;    border: none;     /* Content */    content: attr(data-pullquote);     /* Pull out to the right, modular scale based margins. */    float: right;    width: 320px;    margin: 12px -140px 24px 36px;     /* Baseline correction */    position: relative;    top: 5px;     /* Typography (30px line-height equals 25% incremental leading) */    font-size: 23px;    line-height: 30px;}.pullquote-adelle:before {    font-family: "adelle-1", "adelle-2";    font-weight: 100;    top: 10px !important;}.pullquote-helvetica:before {    font-family: "Helvetica Neue", Arial, sans-serif;    font-weight: bold;    top: 7px !important;}.pullquote-facit:before {    font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;    font-weight: bold;    top: 7px !important;}

Code Source

24CSS3:全屏背景

html     background: url('images/bg.jpg') no-repeat center center fixed;     -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;}

Code Source

25、内容垂直居中

.container {    min-height: 6.5em;    display: table-cell;    vertical-align: middle;}

Code Source

26、强制出现垂直滚动条

html { height: 101% }

27CSS3渐变模板

#colorbox {    background: #629721;    background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));    background-image: -webkit-linear-gradient(top, #83b842, #629721);    background-image: -moz-linear-gradient(top, #83b842, #629721);    background-image: -ms-linear-gradient(top, #83b842, #629721);    background-image: -o-linear-gradient(top, #83b842, #629721);    background-image: linear-gradient(top, #83b842, #629721);}

28@font-face模板

@font-face {    font-family: 'MyWebFont';    src: url('webfont.eot'); /* IE9 Compat Modes */    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */    url('webfont.woff') format('woff'), /* Modern Browsers */    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}body {    font-family: 'MyWebFont', Arial, sans-serif;}

Code Source

29、缝合CSS3元素

p {    position:relative;    z-index:1;    padding: 10px;    margin: 10px;    font-size: 21px;    line-height: 1.3em;    color: #fff;    background: #ff0030;    -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);    -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;}p:before {    content: "";    position: absolute;    z-index: -1;    top: 3px;    bottom: 3px;    left :3px;    right: 3px;    border: 2px dashed #fff;}p a {    color: #fff;    text-decoration:none;}p a:hoverp a:focusp a:active {    text-decoration:underline;}

Code Source

30CSS3 斑马线

tbody tr:nth-child(odd) {    background-color: #ccc;}

Code Source

31、有趣的&

.amp {    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;    font-style: italic;    font-weight: normal;}

Code Source

32、大字段落

p:first-letter{    display: block;    margin: 5px 0 0 5px;    float: left;    color: #ff3366;    font-size: 5.4em;    font-family: Georgia, Times New Roman, serif;}

33、内部CSS3 盒阴影

#mydiv     -moz-box-shadow: inset 2px 0 4px #000;    -webkit-box-shadow: inset 2px 0 4px #000;    box-shadow: inset 2px 0 4px #000;}

34、外部CSS3 盒阴影

#mydiv     -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);    -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);}

35、三角形列表项目符号

ul {    margin: 0.75em 0;    padding: 0 1em;    list-style: none;}li:before     content: "";    border-color: transparent #111;    border-style: solid;    border-width: 0.35em 0 0.35em 0.45em;    display: block;    height: 0;    width: 0;    left: -1em;    top: 0.9em;    position: relative;}

Code Source

36、固定宽度的居中布局

#page-wrap {    width: 800px;    margin: 0 auto;}

Code Source

37CSS3 列文本

#columns-3 {    text-align: justify;    -moz-column-count: 3;    -moz-column-gap: 12px;    -moz-column-rule: 1px solid #c4c8cc;    -webkit-column-count: 3;    -webkit-column-gap: 12px;    -webkit-column-rule: 1px solid #c4c8cc;}

Code Source

38CSS固定页脚

#footer {    position: fixed;    left: 0px;    bottom: 0px;    height: 30px;    width: 100%;    background: #444;}/* IE 6 */html #footer {    position: absolute;    top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');}

Code Source

39IE6PNG透明修复

.bg {    width:200px;    height:100px;    background: url(/folder/yourimage.png) no-repeat;    _background:none;    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');} /* 1px gif method */img.png {    position: relative;    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",       this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",       this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));}

Code Source

40、跨浏览器设置最小高度

#container {    min-height: 550px;    height: auto !important;    height: 550px;}


© 著作权归作者所有

共有 人打赏支持
网开一面
粉丝 0
博文 3
码字总数 5976
作品 0
松江
私信 提问
Android开发 API人脸检测实例教程(内含源码)

Android中文API最新中文版 http://www.eoeandroid.com/thread-58597-1-1.html =============帖子正文======================= 通过两个主要的API,Android提供了一个直接在位图上进行脸部检测...

76135
2012/07/17
0
1
CSS学习4 - 例子CSS-sprities

例子1: 要做成上面的效果:背景的***、红色、白色都是图片。背景图片如下: 代码如下: 例子2:做成下面的效果,一段文字前面有小图标,鼠标放上变成“√” 代码:图片如下 例子3:对form的一...

技术小胖子
2017/11/10
0
0
20个非常有用的Java代码片段

字符串有整型的相互转换 1 2 2. 向文件末尾添加内容 1 2 3 4 5 6 7 8 9 10 11 3. 得到当前方法的名字 1 4. 转字符串到日期 1 或者是: 1 2 5. 使用JDBC链接Oracle 1 2 3 4 5 6 7 8 9 10 11 ...

小贱是个程序员
2016/11/18
30
0
[DIV/CSS] 【译】60个有用CSS代码片段

1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: relative; top: 50%; -webkit...

AnyLiem
2016/03/11
15
0
如何使用mysql查看用户权限

代码片段:查看用户权限 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 5......

bigfool007139
2014/11/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

编码规范

4.、编码时的一些建议 1、尽量指定类、方法的final修饰符——虚拟机会想办法内联所有的final方法来减少方法执行时创建栈帧的数量,从而降低栈溢出的风险 2、尽量重用对象——重复new对象会增...

呵呵哒灬
21分钟前
2
0
第一个docker化的java应用

Docker 思想 集装箱 标准化:运输方式/存储方式/API 接口 隔离

BeanHo
22分钟前
1
0
数据库技术-Mysql主从复制与数据备份

数据库技术-Mysql 主从复制的原理: MySQL中数据复制的基础是二进制日志文件(binary log file)。一台MySQL数据库一旦启用二进制日志后,其作为master,它的数据库中所有操作都会以“事件”...

须臾之余
昨天
13
0
Git远程仓库——GitHub的使用(一)

Git远程仓库——GitHub的使用(一) 一 、 Git远程仓库 由于你的本地仓库和GitHub仓库之间的传输是通过SSH加密的,所以需要一下设置: 步骤一、 创建SSH key 在用户主目录下,看看有没有.ss...

lwenhao
昨天
4
0
SpringBoot 整合

springBoot 整合模板引擎 SpringBoot 整合Mybatis SpringBoot 整合redis SpringBoot 整合定时任务 SpringBoot 整合拦截器...

细节探索者
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部