7. Drop Caps
非常棒的跨浏览器代码帮助你使得每段文字的第一个字母更加
- .firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
明显CSS3也可以,但是不支持IE9
- p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
8. CSS Sticky Footer
CSS实现的置顶sticky页脚效果,支持所有的主流浏览器包括chrome和IE8
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.
- <!--[if !IE 7]>
- <style type="text/css">
- #wrap {display:table;height:100%}
- </style>
- < ![endif]-->
- */
HTML:
- <div id="wrap">
- <div id="main">
- </div>
- </div>
- <div id="footer">
- </div>
9. Image Replacement Technique
实用的图片替换文字页面元素效果。
- a.replacement
- {
- background: url(dotted-border.png) no-repeat;
- height: 44px;
- width: 316px;
- display: block;
- text-indent: -9999px;
- overflow: hidden; /*Add this line to the image replacement method*/
- }
10. Set body font-size to 62.5% for Easier em Conversion
如果你想拥有更加灵活的布局,你应该使用em而不是pixel或者points。通过设置你的字体62.5%,你可以很容易的通过设置em为pixel的1/10来设置文字。
- body {
- font-size: 62.5%; /* font-size 1em = 10px */
- }
- p {
- font-size: 1.2em; /* 1.2em = 12px */
- }
(责任编辑:ken)