CSS技巧

testHs 发布于2019-08-29 12:22 / 2894人阅读

摘要：兼容所有浏览器显示半透明效果的方法的作用使用解决的不闭合的问题，可以将属性去掉就可以达到效果。

1、兼容所有浏览器显示半透明效果的方法

.transparent {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: .5;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: url("../img/pic.jpg");
}

2、_height,_width的作用

使用_height解决float的div不闭合的问题，可以将_height属性去掉就可以达到效果。


    
        Float left
    
    
        Float right

#wrap {
    border: 6px solid #ccc;
    overflow: auto;
    _height: 1%;
}

.column_left {
    width: 20%;
    padding: 10px;
    float: left;
}

.column_right {
    float: right;
    width: 75%;
    padding: 10px;
    border-left: 6px solid #ccc;
}

3、使用min-height min-width解决div，或者span的固定高度问题

有时候我们需要设定某个元素固定高度，但是在firefox或者opera下面只设置高度，在内容不够多的时候，达不到预想的效果，这时候我们可以使用min-height

4、使用media指令引入两种css：打印版本的css和屏幕显示的css

5、用.fixTable{ table-layout: fixed; overflow:hidden; }加上nobr标签实现隐藏

6、可以使用page-break-after，page-break-before控制打印时的分页

7、*html{}的作用是为了兼容6.0以下的IE版本，对html节点的选取，其他的浏览器都认为html标签是文档的根节点，而ie6以下的ie版本却认为在html标签的上面还有一个根节点

8、使用text-indent显示图片，而隐藏文字

h1 {
    background: url(../img/pic.jpg) no-repeat;
    width: 200px;
    height: 200px;
    text-indent: -2000px
}

GPU云服务器云服务器 css技巧应聘技巧运营技巧配置技巧

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

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

[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0
CSS技巧

摘要：技巧使你的更加专业这是上关于技巧的一篇译文，另外你也可以在本项目看到原文。列举了一些很实用的技巧，比如给空内容的标签添加内容，逗号分隔列表等等。排序算法看源码，把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。成为专业程序员路上用到的各种优秀资料、神器及框架成为一名专业程序员的道路上，需要坚持练习、学习与积累，技术方面既要有一定的广度，更要有自己的深度。 Java...

DangoSky 2019-08-22 11:15 评论0 收藏0
CSS技巧

摘要：技巧使你的更加专业这是上关于技巧的一篇译文，另外你也可以在本项目看到原文。列举了一些很实用的技巧，比如给空内容的标签添加内容，逗号分隔列表等等。排序算法看源码，把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。成为专业程序员路上用到的各种优秀资料、神器及框架成为一名专业程序员的道路上，需要坚持练习、学习与积累，技术方面既要有一定的广度，更要有自己的深度。 Java...

zgbgx 2019-08-29 14:01 评论0 收藏0
CSS14个实用技巧的精选和推荐

摘要：此文章主要为大家介绍了个实用技巧的精选推荐，具有一定的参考价值，学习觉得挺不错的，分享给大家。设计的同时就可以把这个设成显示来检查它的效果。块元素居中对齐如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样你会使用来围上所有元素。此文章主要为大家介绍了CSS14个实用技巧的精选推荐，具有一定的参考价值，学习觉得挺不错的，分享给大家。创业项目 2018优选本页技巧目录： 1...

elisa.yang 2019-08-30 11:22 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0