资讯专栏INFORMATION COLUMN

css常用代码大全

enali / 615人阅读

摘要:背景颜色透明处理浏览器中的滤镜效果图片垂直居中对齐第一种法第二种法制作小三角兼容固定在底部纯粹的固定在底部用包裹内容很长的和文本这个代码片段通过保证文本的包裹元素宽

Css背景颜色透明
.liter{
    filter:progid:DXImageTransform.Microsoft.gradient(enabled="true",startColorstr="#4CDDDDDD", endColorstr="#4CDDDDDD");
}
:root .liter {
    filter:none;     /*处理IE9浏览器中的滤镜效果*/
    background-color:rgba(221,221,221,0.3);
}
图片垂直居中对齐

第一种:table-cell法

.test_box {
    display:table-cell
    ;width:200px;
    height:200px;
    vertical-align:middle;
    text-align:center;
    *float:left;
    *font-family:simsun;
    *font-size:200px;
    *line-height:1;
    border:1px solid #000000;
}
.test_box img {
    vertical-align:middle;
}
第二种:span法
.test_box {
    width:200px;
    height:200px;
    overflow:hidden;
    text-align:center;
    font-size:0;
    border:1px solid #000000;
}
.test_box .hook {
    display:inline-block;
    width:0;
    height:100%;
    overflow:hidden;
    margin-left:-1px;
    font-size:0;
    line-height:0;
    vertical-align:middle;
}
.test_box img {
    vertical-align:middle;
    border:0 none;
}
css border制作小三角(兼容IE6)
.triangle {
    display:inline-block;
    width:0;
    height:0;
    overflow:hidden;
    line-height:0;
    font-size:0;
    vertical-align:middle;
    border-right:7px solid #000fff;
    border-left:0 none;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    _color:#FF3FFF;
    _filter:chroma(color=#FF3FFF);
}
CSS固定在底部
 /*
 Sticky Footer Solution by Steve Hatcher
 http://stever.ca http://www.cssstickyfooter.com
 */
 * {margin:0;padding:0;}
 /* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
 html, body {
     height: 100%;
 }
 #wrap {
     min-height: 100%;
 }
 #main {
     overflow:auto;
     padding-bottom: 150px;  /* must be same height as the footer */
 }
 #footer {
     position: relative;
     margin-top: -150px; /* negative value of footer height */
     height: 150px;
     clear:both;
 }
 /*Opera Fix*/
 body:before {/* thanks to Maleika (Kohoutec)*/
     content:"";
     height:100%;
     float:left;
     width:0;
     margin-top:-32767px;/* thank you Erik J - negate effect of float*/
 }
 /* IMPORTANT You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher.
 
 */
纯粹的css固定在底部
#footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:32px;
    width:100%;
    background:#333;
} /* 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");
}
用CSS包裹内容很长的URL和文本

这个代码片段通过保证文本的包裹元素宽度适应内容的宽度,能够避免很长的文本超出内容区域

pre {
    white-space: pre; /* CSS 2.0 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3.0 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP Printers */
    word-wrap: break-word; /* IE 5+ */
}
用css3创造3D文字

text-shadow属性能帮助你只用CSS创造3D文字

p.threeD{
    text-shadow:     -1px 1px 0 #ffffd,
                        -2px 2px 0 #c8c8c8,
                        -3px 3px 0 #ccc,
                        -4px 4px 0 #b8b8b8,
                        -4px 4px 0 #bbb,
                        0px 1px 1px rgba(0,0,0,.4),
                        0px 2px 2px rgba(0,0,0,.3),
                        -1px 3px 3px rgba(0,0,0,.2),
                        -1px 5px 5px rgba(0,0,0,.1),
                        -2px 8px 8px rgba(0,0,0,.1),
                        -2px 13px 13px rgba(0,0,0,.1) ;
}
CSS透明度
div{
    opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=75); /* IE lt 8 */
    -ms-filter: "alpha(opacity=75)"; /* IE 8 */
    -khtml-opacity: .75; /* Safari 1.x */
    -moz-opacity: .75; /* FF lt 1.5, Netscape */
}
改变博客中默认选中文本的颜色
::selection {
    background: #ffb7b7; /* Safari */
    color: #ffffff;
}
::-moz-selection {
    background: #ffb7b7; /* Firefox */
    color: #ffffff;
}
多重背景图片
#multiple-images {
    background: url(image_1.png) top left no-repeat,
                    url(image_2.png) bottom left no-repeat,
                    url(image_3.png) bottom right no-repeat;
}
多栏CSS3

使用css3来创建多栏,它可以自适应网页,不兼容IE

#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;
}
文本溢出省略
.textoverflow a {
    display:block;
    width:120px;
    margin: 0px 0px 0px 3px;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    -o-text-overflow: ellipsis; /* for Opera */
    text-overflow: ellipsis; /* for IE */
}
.textoverflow:after{
    content: "...";
}/* for Firefox */
@media all and (min-width: 0px){
    .textoverflow:after{
        content:"";
    }/* for Opera */
}

让IE9以下的版本支持HTML5,在项目中加入以下JS代码

// html5 shiv
if (!+[1,]) {
    (function() {
    var tags = [
        "article", "aside", "details", "figcaption",
        "figure", "footer", "header", "hgroup",
        "menu", "nav", "section", "summary",
        "time", "mark", "audio", "video"],
        i = 0, len = tags.length;
    for (; i < len; i++) document.createElement(tags[i]);
    })();
}

or

//code from http://caibaojian.com/popular-css-snippets.html
PNG32透明(IE6)

主要用来兼容IE6,不建议使用,由于这个css代码比较耗内存

.some_element {
    background: url(image.png);
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}

转自:前端开发博客

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111728.html

相关文章

  • css新生陌生又常用的属性大全

    摘要:实现完整覆盖字体适配横竖屏切换伪元素选择器用法清除浮动用法写对话框使左右的对话框分开使内容居中用伪类写出小三角形分别给左右两边的小三角形定位左边对话框小三角形的边框样式右边对话框小三角形的边框样式吃了 vw,vh,vmin,vmax 实现完整覆盖 #mask { height: 100vh; position: fixed; left:0; top:0; } 字体适配(...

    wall2flower 评论0 收藏0
  • DIV+CSS规范命名大全集合

    摘要:网页制作中规范使用命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体命名规则命名大全内容篇。 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇。 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命名目录我们开发CSS+DIV网页(Xhtml)时候,比较困惑...

    wangtdgoodluck 评论0 收藏0
  • 常用CSS水平垂直居中方法大全

    摘要:作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助已知宽高背景图与背景图上的文字都水平垂直居中有宽度的水平居中有绝对定位的水平居中 作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助 1.已知宽高背景图与背景...

    bergwhite 评论0 收藏0
  • 常用CSS水平垂直居中方法大全

    摘要:作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助已知宽高背景图与背景图上的文字都水平垂直居中有宽度的水平居中有绝对定位的水平居中 作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助 1.已知宽高背景图与背景...

    muzhuyu 评论0 收藏0

发表评论

0条评论

enali

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<