`
saybody
  • 浏览: 911276 次
  • 性别: Icon_minigender_2
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

最实用的12条css技巧

 
阅读更多
<p style="background-color: #eee;">非原创，来源网络，英文版原文： <a title="最实用的css技巧" href="http://stylizedweb.com/2008/03/12/most-used-css-tricks/" target="_blank">http://stylizedweb.com/2008/03/12/most-used-css-tricks/</a><br></p>
<h4>1：Rounded corners without images</h4>
<h5>效果图——</h5>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/csstrick01.gif"></a><br>
Rounded corners without images</div>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 15px auto; border-left: #cccccc 1px solid; width: 95%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">&lt;divid=”container”&gt;<br>
&lt;bclass=”rtop”&gt;<br>
&lt;bclass=”r1″&gt;&lt;/b&gt;&lt;bclass=”r2″&gt;&lt;/b&gt;&lt;bclass=”r3″&gt;&lt;/b&gt;&lt;bclass=”r4″&gt;&lt;/b&gt;<br>
&lt;/b&gt;<br>
&lt;!–contentgoeshere–&gt;<br>
&lt;bclass=”rbottom”&gt;<br>
&lt;bclass=”r4″&gt;&lt;/b&gt;&lt;bclass=”r3″&gt;&lt;/b&gt;&lt;bclass=”r2″&gt;&lt;/b&gt;&lt;bclass=”r1″&gt;&lt;/b&gt;<br>
&lt;/b&gt;<br>
&lt;/div&gt;<br><br>
.rtop,.rbottom</span><span style="color: #000000;">{</span><span style="color: #ff0000;">display</span><span style="color: #000000;">:</span><span style="color: #0000ff;">block</span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
.rtop*,.rbottom*</span><span style="color: #000000;">{</span><span style="color: #ff0000;">display</span><span style="color: #000000;">:</span><span style="color: #0000ff;">block</span><span style="color: #000000;">;</span><span style="color: #ff0000;">height</span><span style="color: #000000;">:</span><span style="color: #0000ff;">1px</span><span style="color: #000000;">;</span><span style="color: #ff0000;">overflow</span><span style="color: #000000;">:</span><span style="color: #0000ff;">hidden</span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
.r1</span><span style="color: #000000;">{</span><span style="color: #ff0000;">margin</span><span style="color: #000000;">:</span><span style="color: #0000ff;">05px</span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
.r2</span><span style="color: #000000;">{</span><span style="color: #ff0000;">margin</span><span style="color: #000000;">:</span><span style="color: #0000ff;">03px</span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
.r3</span><span style="color: #000000;">{</span><span style="color: #ff0000;">margin</span><span style="color: #000000;">:</span><span style="color: #0000ff;">02px</span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
.r4</span><span style="color: #000000;">{</span><span style="color: #ff0000;">margin</span><span style="color: #000000;">:</span><span style="color: #0000ff;">01px</span><span style="color: #000000;">;</span><span style="color: #ff0000;">height</span><span style="color: #000000;">:</span><span style="color: #0000ff;">2px</span><span style="color: #000000;">}</span><span style="color: #800000;"><br></span>
</div>
<h4>2：Style your order list</h4>
<div class="floatRPic">
<h5>效果图——</h5>
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/csstrick02.gif"></a><br>
Style your order list</div>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; margin-bottom: 15px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 400px; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">&lt;ol&gt;<br>
&lt;li&gt;<br>
&lt;p&gt;Thisislineone&lt;/p&gt;<br>
&lt;/li&gt;<br>
&lt;li&gt;<br>
&lt;p&gt;Hereislinetwo&lt;/p&gt;<br>
&lt;/li&gt;<br>
&lt;li&gt;<br>
&lt;p&gt;Andlastline&lt;/p&gt;<br>
&lt;/li&gt;<br>
&lt;/ol&gt;<br><br>
ol</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
font</span><span style="color: #000000;">:</span><span style="color: #0000ff;">italic1emGeorgia,Times,serif</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
color</span><span style="color: #000000;">:</span><span style="color: #0000ff;">#999999</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
olp</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
font</span><span style="color: #000000;">:</span><span style="color: #0000ff;">normal.8emArial,Helvetica,sans-serif</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
color</span><span style="color: #000000;">:</span><span style="color: #0000ff;">#000000</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"></span>
</div>
<h4>3：Tableless forms</h4>
<h5>效果图——</h5>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/csstrick03.gif"></a><br>
Tableless forms</div>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 15px auto; border-left: #cccccc 1px solid; width: 95%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">&lt;form&gt;<br>
&lt;labelfor=”name”&gt;Name&lt;/label&gt;<br>
&lt;inputid=”name”name=”name”&gt;&lt;br&gt;<br>
&lt;labelfor=”address”&gt;Address&lt;/label&gt;<br>
&lt;inputid=”address”name=”address”&gt;&lt;br&gt;<br>
&lt;labelfor=”city”&gt;City&lt;/label&gt;<br>
&lt;inputid=”city”name=”city”&gt;&lt;br&gt;<br>
&lt;/form&gt;<br><br>
label,input</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
display</span><span style="color: #000000;">:</span><span style="color: #0000ff;">block</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
width</span><span style="color: #000000;">:</span><span style="color: #0000ff;">150px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
float</span><span style="color: #000000;">:</span><span style="color: #0000ff;">left</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
margin-bottom</span><span style="color: #000000;">:</span><span style="color: #0000ff;">10px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br><br>
label</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
text-align</span><span style="color: #000000;">:</span><span style="color: #0000ff;">right</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
width</span><span style="color: #000000;">:</span><span style="color: #0000ff;">75px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
padding-right</span><span style="color: #000000;">:</span><span style="color: #0000ff;">20px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br><br>
br</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
clear</span><span style="color: #000000;">:</span><span style="color: #0000ff;">left</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"></span>
</div>
<h4>4：Double blockquote</h4>
<h5>效果图——</h5>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/csstrick04.gif"></a><br>
Double blockquote</div>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 15px auto; border-left: #cccccc 1px solid; width: 95%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">blockquote:first-letter</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
background</span><span style="color: #000000;">:</span><span style="color: #0000ff;">url(images/open-quote.gif)no-repeatlefttop</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
padding-left</span><span style="color: #000000;">:</span><span style="color: #0000ff;">18px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
font</span><span style="color: #000000;">:</span><span style="color: #0000ff;">italic1.4emGeorgia,“TimesNewRoman”,Times,serif</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"></span>
</div>
<h4>5：Gradient text effect</h4>
<h5>效果图——</h5>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/csstrick05.gif"></a><br>
Double blockquote</div>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 15px auto; border-left: #cccccc 1px solid; width: 95%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">&lt;h1&gt;&lt;span&gt;&lt;/span&gt;CSSGradientText&lt;/h1&gt;<br><br>
h1</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
font</span><span style="color: #000000;">:</span><span style="color: #0000ff;">bold330%/100%“LucidaGrande”</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
position</span><span style="color: #000000;">:</span><span style="color: #0000ff;">relative</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
color</span><span style="color: #000000;">:</span><span style="color: #0000ff;">#464646</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
h1span</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
background</span><span style="color: #000000;">:</span><span style="color: #0000ff;">url(gradient.png)repeat-x</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
position</span><span style="color: #000000;">:</span><span style="color: #0000ff;">absolute</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
display</span><span style="color: #000000;">:</span><span style="color: #0000ff;">block</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
width</span><span style="color: #000000;">:</span><span style="color: #0000ff;">100%</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
height</span><span style="color: #000000;">:</span><span style="color: #0000ff;">31px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br><br>
&lt;!–[ifltIE7]&gt;<br>
&lt;style&gt;<br>
h1span</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
background</span><span style="color: #000000;">:</span><span style="color: #0000ff;">none</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
filter</span><span style="color: #000000;">:</span><span style="color: #0000ff;">progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’,sizingMethod=’scale’)</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
&lt;/style&gt;</span>
</div>
<h4>6：Vertical centering with line-height</h4>
<h5>效果图——</h5>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/csstrick06.gif"></a><br>
Vertical centering with line-height</div>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 15px auto; border-left: #cccccc 1px solid; width: 95%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">div</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
height</span><span style="color: #000000;">:</span><span style="color: #0000ff;">100px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
div*</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
margin</span><span style="color: #000000;">:</span><span style="color: #0000ff;">0</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
divp</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
line-height</span><span style="color: #000000;">:</span><span style="color: #0000ff;">100px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
&lt;p&gt;Contenthere&lt;/p&gt;</span>
</div>
<h4>7：Rounded corners with images</h4>
<h5>效果图——</h5>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/csstrick07.gif"></a><br>
Rounded corners with images</div>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 15px auto; border-left: #cccccc 1px solid; width: 95%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">&lt;divclass=”roundcont”&gt;<br>
&lt;divclass=”roundtop”&gt;<br>
&lt;imgsrc=”tl.gif”alt=”"<br>
width=”15″height=”15″class=”corner”<br>
style=”display:none”/&gt;<br>
&lt;/div&gt;<br><br>
CONTENT<br><br>
&lt;divclass=”roundbottom”&gt;<br>
&lt;imgsrc=”bl.gif”alt=”"<br>
width=”15″height=”15″class=”corner”<br>
style=”display:none”/&gt;<br>
&lt;/div&gt;<br>
&lt;/div&gt;<br><br>
.roundcont</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
width</span><span style="color: #000000;">:</span><span style="color: #0000ff;">250px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
background-color</span><span style="color: #000000;">:</span><span style="color: #0000ff;">#f90</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
color</span><span style="color: #000000;">:</span><span style="color: #0000ff;">#fff</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br><br>
.roundcontp</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
margin</span><span style="color: #000000;">:</span><span style="color: #0000ff;">010px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br><br>
.roundtop</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
background</span><span style="color: #000000;">:</span><span style="color: #0000ff;">url(tr.gif)no-repeattopright</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br><br>
.roundbottom</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
background</span><span style="color: #000000;">:</span><span style="color: #0000ff;">url(br.gif)no-repeattopright</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br><br>
img.corner</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
width</span><span style="color: #000000;">:</span><span style="color: #0000ff;">15px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
height</span><span style="color: #000000;">:</span><span style="color: #0000ff;">15px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
border</span><span style="color: #000000;">:</span><span style="color: #0000ff;">none</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
display</span><span style="color: #000000;">:</span><span style="color: #0000ff;">block!important</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span>
</div>
<h4>8：Multiple class name</h4>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 15px auto; border-left: #cccccc 1px solid; width: 95%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">&lt;imgsrc="image.gif"class="class1class2"alt=""/&gt;<br><br>
.class1</span><span style="color: #000000;">{</span><span style="color: #ff0000;">border</span><span style="color: #000000;">:</span><span style="color: #0000ff;">2pxsolid#666</span><span style="color: #000000;">;</span><span style="color: #ff0000;"></span><span style="color: #000000;">}</span><span style="color: #800000;"><br>
.class2</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
padding</span><span style="color: #000000;">:</span><span style="color: #0000ff;">2px</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
background</span><span style="color: #000000;">:</span><span style="color: #0000ff;">#ff0</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"></span>
</div>
<h4>9：Center horizontally</h4>
<h5>效果图——</h5>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/csstrick09.gif"></a><br>
Center horizontally</div>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 15px auto; border-left: #cccccc 1px solid; width: 95%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">&lt;divid=”container”&gt;&lt;/div&gt;<br>
#container</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
margin</span><span style="color: #000000;">:</span><span style="color: #0000ff;">0pxauto</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br></span>
</div>
<h4>10：CSS Drop Caps</h4>
<h5>效果图——</h5>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/csstrick10.gif"></a><br>
CSS Drop Caps</div>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 15px auto; border-left: #cccccc 1px solid; width: 95%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">&lt;pclass=”introduction”&gt;Thisparagraphhastheclass“introduction”.Ifyourbrowsersupportsthepseudo-class“first-letter”,thefirstletterwillbeadrop-cap.&lt;/p&gt;<br><br>
p.introduction:first-letter</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
font-size</span><span style="color: #000000;">:</span><span style="color: #0000ff;">300%</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
font-weight</span><span style="color: #000000;">:</span><span style="color: #0000ff;">bold</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
float</span><span style="color: #000000;">:</span><span style="color: #0000ff;">left</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br>
width</span><span style="color: #000000;">:</span><span style="color: #0000ff;">1em</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"></span>
</div>
<h4>11：Prevent line breaks in links, oversized content to brake</h4>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 15px auto; border-left: #cccccc 1px solid; width: 95%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">a</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
white-space</span><span style="color: #000000;">:</span><span style="color: #0000ff;">nowrap</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br><br>
#main</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
overflow</span><span style="color: #000000;">:</span><span style="color: #0000ff;">hidden</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span>
</div>
<h4>12：Show firefox scrollbar, remove textarea scrollbar in IE</h4>
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; margin: 15px auto; border-left: #cccccc 1px solid; width: 95%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">
<span style="color: #800000;">html</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
overflow</span><span style="color: #000000;">:</span><span style="color: #0000ff;">-moz-scrollbars-vertical</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"><br><br>
textarea</span><span style="color: #000000;">{</span><span style="color: #ff0000;"><br>
overflow</span><span style="color: #000000;">:</span><span style="color: #0000ff;">auto</span><span style="color: #000000;">;</span><span style="color: #ff0000;"><br></span><span style="color: #000000;">}</span><span style="color: #800000;"></span>
</div>
分享到：
| 火星人的耳机（Martian Headsets）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css排版技巧 实用

    本文将详细介绍如何运用CSS实现高效的网页布局，帮助读者掌握实用的CSS排版技巧。 #### 二、CSS排版的优势 - **提高网页性能**：相比表格布局，CSS布局能够显著减少页面加载时间。 - **增强可维护性**：通过分离...

    css实用的技巧 css css

    1. **CSS经典技巧20条总结**：这个文档可能包含了20个经过实战检验的CSS技巧，包括选择器的高效使用、浮动和定位的解决策略、动画和过渡的应用等。 2. **CSS实用教程**：可能涵盖了基础到进阶的CSS知识，如盒模型...

    css2.0中文实用（提供大量CSS页面技巧应用、实用性很强）

    在本指南中，我们将深入探讨CSS2.0的一些核心概念和实用技巧。 1. **选择器和属性** CSS2.0引入了更复杂的选择器，如类选择器（`.class`）、ID选择器（`#id`）以及元素选择器（`element`）。此外，还可以使用伪类...

    20个初学者实用的CSS技巧

    标题中的“20个初学者实用的CSS技巧”是指针对CSS初学者的一系列技术要点，旨在帮助他们快速掌握CSS的基本应用。这些技巧涵盖了从解决浏览器兼容性问题到优化代码效率，以及实现各种视觉效果的各个方面。 描述中...

    20个非常实用的CSS技巧

    CSS技巧涵盖了多种情况，如图像处理、布局调整、边框设计等。以下是详细的知识点： 1. 照片黑白化技巧：通过CSS的filter属性应用grayscale(100%)，可以将彩色照片转换为黑白照片，适用于一些特定的网页设计风格。 ...

    css9种设计技巧

    本文将详细介绍9种实用的CSS设计技巧，帮助提升网页的视觉效果和用户体验。 1. 取消下划线：在现代网页设计中，为了使链接看起来更简洁，常常会去除文本链接的下划线。这可以通过在CSS中设置`text-decoration`属性...

    css课件+CSS2中文手册+CSS 速成手册+css技巧

    本压缩包包含了关于CSS的丰富学习资源，包括“CSS2中文手册”、“CSS 速成手册”、“css技巧”和“css课件”。 首先，我们来看“CSS2中文手册”。这是一份详细阐述CSS2规范的文档，CSS2是CSS的第二个主要版本，发布...

    CSS使用技巧的word文档

    在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、...这些CSS技巧有助于优化网页布局，提升用户体验，同时降低维护成本。熟练掌握并运用这些技巧，可以让你的网站看起来更加专业和精致。

    实用CSS特效精华集锦

    本资源“实用CSS特效精华集锦”正是为提升网页设计美感而准备的一系列精选CSS技巧。 1. **CSS选择器**：CSS的选择器是用于定位HTML或XML文档中特定元素的关键工具。基础选择器如标签选择器（例如`&lt;p&gt;`）、类选择器...

    超实用的CSS代码段-源码.rar

    "超实用的CSS代码段-源码.rar" 这个标题表明了压缩包中的内容是一些在实际开发中非常有用的CSS代码片段，这些代码可能包含各种CSS技巧、样式效果或者布局解决方案。"源码"一词暗示这是一份可以直接应用于Web项目的...

    css最常用和实用的技巧.docx

    【CSS最常用和实用的技巧】 1. **重置浏览器默认样式** 为了消除不同浏览器之间的默认样式差异，通常会使用CSS重置或者normalize.css。例如，上述代码中的雅虎用户界面重置方案，清除了大部分元素的边距、填充、...

    最实用DIV+CSS案例

    本资源"最实用DIV+CSS案例"提供了一些常见的实战示例，帮助学习者深入理解和掌握这种技术。 首先，我们来了解一下`DIV`（Division，分隔）元素。在HTML中，`&lt;div&gt;`是一个通用的容器级元素，用于组合其他HTML元素，...

    14个CSS实用技巧精选推荐.pdf

    【CSS实用技巧详解】 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它赋予HTML元素样式，使得页面美观且具有良好的布局。以下是一些精选的CSS实用技巧，帮助你提升网页设计的效率和质量。 1. ...

    14个CSS实用技巧精选推荐.docx

    【CSS实用技巧详解】 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和视觉样式。以下是一些精选的CSS实用技巧，可以帮助你优化和提升网页设计的质量。 1、**CSS字体属性...

    2008cssplay实用css代码精选-实用二级导航条

    总的来说，"2008cssplay实用css代码精选-实用二级导航条"这个主题涵盖了CSS在创建高效二级导航条时所涉及的关键技术和技巧。通过学习和实践，开发者能够创建出既美观又功能强大的网页导航条。在实际工作中，结合最新...

    400个超实用的CSS代码段

    【标题】"400个超实用的CSS代码段"是一个集合了大量实用CSS技巧和样例的资源，旨在帮助开发者提升网页设计和布局的能力。CSS（层叠样式表）是网页设计的核心技术之一，用于定义HTML或XML（包括如SVG、MathML等各种...

    超实用的CSS代码段+源码

    这本书不仅涵盖了CSS的基础知识，还深入到高级特性，为读者提供了一个全面的CSS技巧库。 在网页设计中，CSS（层叠样式表）扮演着至关重要的角色，它允许我们控制网页的布局、颜色、字体、动画等视觉效果。这本书的...

    CSS在DIV网页排版中的实用技巧

    ### CSS在DIV网页排版中的实用技巧 随着网络技术的发展，网页设计的需求也日益多样化，为了提高网页的设计质量，合理地使用CSS与DIV结合进行网页布局成为了一项重要的技能。以下是一些关于如何利用CSS在DIV网页排版...

    CSS-技巧记录CSS-技巧记录

    以下是一些关键的CSS技巧，这些技巧在实际工作中非常常见且实用。 1. **选择器优化**：使用类选择器（.class）和ID选择器 (#id) 比使用标签选择器（如div, p等）更有效，因为它们具有更高的特异性。尽量减少使用...

    超实用的CSS代码段

    《超实用的CSS代码段》精选400余段CSS代码，覆盖网页上所有的设计元素，堪称史上最有用的CSS书籍，是网站建设和网页设计人员不可或缺的解决方案、技巧和模板。《超实用的CSS代码段》的代码跨平台、跨设备、跨浏览器...

Magicbox
Global site tag (gtag.js) - Google Analytics