1:Rounded corners without images
效果图——
Rounded corners without images
<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
2:Style your order list
效果图——
Style your order list
<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
3:Tableless forms
效果图——
Tableless forms
<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
4:Double blockquote
效果图——
Double blockquote
blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}
5:Gradient text effect
效果图——
Double blockquote
<h1><span></span>CSS Gradient Text</h1>
h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
6:Vertical centering with line-height
效果图——
Vertical centering with line-height
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}
<p>Content here</p>
7:Rounded corners with images
效果图——
Rounded corners with images
<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=”"
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>
CONTENT
<div class=”roundbottom”>
<img src=”bl.gif” alt=”"
width=”15″ height=”15″ class=”corner”
style=”display: none” />
</div>
</div>
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
8:Multiple class name
<img src="image.gif" class="class1 class2" alt="" />
.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}
9:Center horizontally
效果图——
Center horizontally
<div id=”container”></div>
#container {
margin:0px auto;
}
10:CSS Drop Caps
效果图——
CSS Drop Caps
<p class=”introduction”> This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap. </p>
p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}
11:Prevent line breaks in links, oversized content to brake
a{
white-space:nowrap;
}
#main{
overflow:hidden;
}
12:Show firefox scrollbar, remove textarea scrollbar in IE
html{
overflow:-moz-scrollbars-vertical;
}
textarea{
overflow:auto;
}
相关推荐
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国的Web应用技术团队,顶尖Web设计师和Web应用开发人员的完整...
)智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国的Web应用技术团队,顶尖Web设计师和Web应用开发人员的完整...
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国的Web应用技术团队,顶尖Web设计师和Web应用开发人员的完整...
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国的Web应用技术团队,顶尖Web设计师和Web应用开发人员的完整...
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国的Web应用技术团队,顶尖Web设计师和Web应用开发人员的完整...
本书注重Web开发的实践,每章以现实中的Web站点为例,提供了很多容易理解的CSS技巧和技术,例如,如何实现翻转器、阴影、下拉菜单、CSS切换、博客、HTML Email模板,如何克服浏览器的兼容问题,如何构建CSS布局等。...
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国的Web应用技术团队,顶尖Web设计师和Web应用开发人员的完整...
通过对十个经典案例进行分析,分别从不同类型网站的布局风格以及实现方法来讲解DIV+CSS网页布局和制作方法。本教程系统地讲解了CSS样式的基础理论和实际运用技术,并结合实例来讲解层叠样式表与层布局相结合制作网页...
精彩绝伦的CSS 英文原版pdf ...第二部分展示了各种CSS 效果,包括同一效果的不同实现方式,并讲解了布局设计。第三部分介绍前沿技术,主要是最新HTML5 和CSS3 技术。 本书适合所有Web 开发与设计人员学习参考。
本书面向实用,提供了大量网页设计与制作的细节图解,由浅入深地讲解网页制作的步骤与方法,同时介绍了Web标准以及使用目前流行的“层”布局方式,并结合多个实例讲解了采用层叠样式表与层布局相结合制作网页的方法...
3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么是DOCTYPE 4.1.2 选择什么样的DOCTYPE 4.2 名字空间 4.3 编码问题 4.4 meta ...
内容简介 本书面向实用,提供了大量网页设计与制作的细节图解,由浅入深地讲解网页制作的步骤与方法,同时介绍了Web标准以及使用目前流行的“层”布局方式,并结合多个实例讲解了采用层叠样式表与层布局相结合制作...
第二部分为应用篇(第3~11章),详细介绍如何利用Dreamweaver 8设计制作网页,JavaScript脚本编程,Web数据库应用,以及网站发布和维护方面的知识;第三部分为图形动画篇(第12~15章),介绍目前最常用的网页制作...
CSS兼容IE和Firefox的技巧集合.doc CSS设计彻底研究.ppt DHTML 手册.chm DIV+CSS 网页布局常用基础知识.doc DIV+CSS完美布局.pdf ExtJS 2.0实用简明教程.chm page_skill.chm 色彩搭配在网站中的运用.pdf 网页设计...
5.3 编程实用技巧 5.3.1 弹性 5.3.2 getElementById、getElementsByTagName和getElements-ByClassName 5.3.3 可复用性 5.3.4 避免产生副作用 5.3.5 通过传参实现定制 5.3.6 控制this关键字的指向 5.3.7 预留...