1. 将网页或元素居中
HTML:
-
<div class="wrap">
-
</div>
CSS:
-
.wrap { width:960px; margin:0 auto;}
2.Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)
HTML:
-
<div id="wrap">
-
-
<div id="main" class="clearfix">
-
-
</div>
-
-
</div>
-
-
<div id="footer">
-
-
</div>
CSS:
-
* { margin:0; padding:0; }
-
-
html, body, #wrap { height: 100%; }
-
-
body > #wrap {height: auto; min-height: 100%;}
-
-
#main { padding-bottom: 150px; }
-
-
#footer {
-
position: relative;
-
margin-top: -150px;
-
height: 150px;
-
clear:both;}
-
-
-
.clearfix:after {content: ".";
-
display: block;
-
height: 0;
-
clear: both;
-
visibility: hidden;}
-
.clearfix {display: inline-block;}
-
-
* html .clearfix { height: 1%;}
-
.clearfix {display: block;}
-
3.跨浏览器最小高度设置
CSS:
-
.element { min-height:600px; height:auto !important; height:600px; }
4.Box阴影(CSS3)
CSS:
-
.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }
5.文字阴影(CSS3)
CSS:
-
.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
6.跨浏览器的CSS透明度
CSS:
-
.transparent {
-
-
opacity: 0.7;
-
-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-
-
filter: alpha(opacity=70);
-
-
-moz-opacity: 0.7;
-
-
-khtml-opacity: 0.7;
-
-
}
7.著名的 Meyer Reset(重置)
CSS:
-
html, body, div, span, applet, object, iframe,
-
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-
a, abbr, acronym, address, big, cite, code,
-
del, dfn, em, font, img, ins, kbd, q, s, samp,
-
small, strike, strong, sub, sup, tt, var,
-
dl, dt, dd, ol, ul, li,
-
fieldset, form, label, legend,
-
table, caption, tbody, tfoot, thead, tr, th, td {
-
margin: 0;
-
padding: 0;
-
border: 0;
-
outline: 0;
-
font-weight: inherit;
-
font-style: inherit;
-
font-size: 100%;
-
font-family: inherit;
-
vertical-align: baseline;
-
}
-
-
:focus {
-
outline: 0;
-
}
-
body {
-
line-height: 1;
-
color: black;
-
background: white;
-
}
-
ol, ul {
-
list-style: none;
-
}
-
-
table {
-
border-collapse: separate;
-
border-spacing: 0;
-
}
-
caption, th, td {
-
text-align: left;
-
font-weight: normal;
-
}
-
blockquote:before, blockquote:after,
-
q:before, q:after {
-
content: "";
-
}
-
blockquote, q {
-
quotes: "" "";
-
}
-
8.删除虚线轮廓
CSS:
-
a, a:active { outline: none; }
9.圆角
CSS:
-
.element {
-
-moz-border-radius: 5px;
-
-webkit-border-radius: 5px;
-
border-radius: 5px;
-
}
-
.element-top-left-corner {
-
-moz-border-radius-topleft: 5px;
-
-webkit-border-top-left-radius: 5px;
-
}
10.覆盖内联的样式
CSS:
-
.override {
-
font-size: 14px !important;
-
}
分享到:
相关推荐
10个你未必知道的CSS技巧 很有用
我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷。 设计模版和博客主题时,我经常“不断推敲和尝试CSS(Hit and Trial CSS ),我只看哪种配色方案和哪种CSS属性的结合能使页面的元素更完美。对了。之所以...
今天我们精心准备了10条对网页设计师最有用的CSS技巧,如果你想设计出独一无二脱颖而出的网页你必须得好好注意了。这篇博客是在与一家提供高质量印刷服务的在线印刷公司“ Business Card Printing”合作时写的。 1. ...
当然我们不可能一下子就记住所有CSS的规则和语法,但为了以后的发展我们还是应该记住那些非常有用的CSS技巧。今天我们精心准备了10条对网页设计师最有用的CSS技巧,如果你想设计出独一无二脱颖而出的网页你必须得...
巧妙的运用CSS的技巧,可以让你不用修改HTML就能得到很好的博客或者模板外观。我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷,感兴趣的朋友可以参考下哈
javascript+css一张背景图片的不同切换,DIV背景图片变暗,CSS渐变色,设置div的透明背景,10个非常有用的CSS技巧,图片凸起效果,点击div背景图切换,动态背景
div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意。 1、表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入...
在这个视频系列中,我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师,还是只是想了解一些基本概念和...
除本书外,她还著有几十部畅销图书和获奖著作,包括TheNon-Designer'SWebBook、RobinWilliamsDesignWorkshop、TheLittleMacBook等,有的书已被翻译为15种文字。产生了世界性的影响。 编辑推荐 有大师指导,人人...
修复一些奇怪的浏览器特定的错误可能很有用,但是在大多数情况下,您应该修复CSS / JS。 如何? 选择您想要的技巧 将其复制到样式表中 在花括号之间添加所需的样式 享受您所针对的浏览器的新样式! 由...制作 更新...
java收银系统源码有用信息 10 月 29 日:CSS3 教程: 用于响应式设计的 css 媒体查询: 使用神经网络和模糊逻辑为网站添加智能。 10 月 30 日:漂亮的布局: 面向初学者的 20 个电子邮件设计最佳实践和资源 初学者...
⑥ 修改了安装和卸载程序,使其可以复制几个涉及EditPlus自定义设置的有用文件名 setting.ini 和 editplus.ini,自定义时复制程序目录的 Editplus.ini 以及 Setting.ini 到压缩包中,导出注册表内容,放在压缩包根...
传入一个CSS选择符的参数,然后依据该CSS选择符从当前元素下面,形成期待匹配子节点的集合,也就是“选择”的操作,最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document...
5.6.3 一次改变多个CSS属性 145 5.7 读取、设置和删除HTML属性 146 5.8 创意标题 147 5.9 操作选择中的每个元素 149 5.9.1 匿名函数 150 5.9.2 this和$(this) 150 5.10 自动提取引用 152 5.10.1 概览 152 5.10.2 ...
它在这条主线中对于展示查询如何快速找到所需元素,以及如何将不同XML文档关联起来非常有用。第9章(操作XML)也涵盖了出于各类目的转换XML文档的种种技术。从数据的角度讲这非常有趣,因为它展示了一些在词汇表之间...
CodeIgniter Skeleton(CIS)不仅是大多数Web应用程序的一个不错的起点,而且还是基于CI的开发以融合一切的新体验。 包括 核 2.2.0(最新更新:2014年6月6日) 5.4(最新更新:2013年10月4日) 1.11.1(最新更新...
2.8 使用其他有用的文件函数 2.8.1 查看文件是否存在:file_exists() 2.8.2 确定文件大小:filesize() 2.8.3 删除一个文件:unlink() 2.8.4 在文件中定位:rewind()、fseek()和ftell() 2.9 文件锁定 2.10 更好...