CSS小技巧

时间：2015-09-23 00:57:08 阅读：283 评论：0 收藏：0 [点我收藏+]

标签：

1. 将网页或元素居中 HTML： 1.

CSS： 1. .wrap { width:960px; margin:0 auto;} 2.Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置) HTML： 1.

2. 3.

4. 5.

6. 7.

8. 9. CSS： 1. * { margin:0; padding:0; } 2. 3. html, body, #wrap { height: 100%; } 4. 5. body > #wrap {height: auto; min-height: 100%;} 6. 7. #main { padding-bottom: 150px; } /* must be same height as the footer */ 8. 9. #footer { 10. position: relative; 11. margin-top: -150px; /* negative value of footer height */ 12. height: 150px; 13. clear:both;} 14. 15. /* CLEAR FIX*/ 16. .clearfix:after {content: "."; 17. display: block; 18. height: 0; 19. clear: both; 20. visibility: hidden;} 21. .clearfix {display: inline-block;} 22. /* Hides from IE-mac */ 23. * html .clearfix { height: 1%;} 24. .clearfix {display: block;} 25. /* End hide from IE-mac */ 3.跨浏览器最小高度设置 CSS： 1. .element { min-height:600px; height:auto !important; height:600px; } 4.Box阴影(CSS3) CSS： 1. .box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; } 5.文字阴影（CSS3） CSS： 1. .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); } 6.跨浏览器的CSS透明度 CSS： 1. .transparent { 2. 3. /* Modern Browsers */ opacity: 0.7; 4. 5. /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 6. 7. /* IE 5-7 */ filter: alpha(opacity=70); 8. 9. /* Netscape */ -moz-opacity: 0.7; 10. 11. /* Safari 1 */ -khtml-opacity: 0.7; 12. 13. } 7.著名的 Meyer Reset（重置） CSS： 1. html, body, div, span, applet, object, iframe, 2. h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3. a, abbr, acronym, address, big, cite, code, 4. del, dfn, em, font, img, ins, kbd, q, s, samp, 5. small, strike, strong, sub, sup, tt, var, 6. dl, dt, dd, ol, ul, li, 7. fieldset, form, label, legend, 8. table, caption, tbody, tfoot, thead, tr, th, td { 9. margin: 0; 10. padding: 0; 11. border: 0; 12. outline: 0; 13. font-weight: inherit; 14. font-style: inherit; 15. font-size: 100%; 16. font-family: inherit; 17. vertical-align: baseline; 18. } 19. /* remember to define focus styles! */ 20. :focus { 21. outline: 0; 22. } 23. body { 24. line-height: 1; 25. color: black; 26. background: white; 27. } 28. ol, ul { 29. list-style: none; 30. } 31. /* tables still need ‘cellspacing="0"‘ in the markup */ 32. table { 33. border-collapse: separate; 34. border-spacing: 0; 35. } 36. caption, th, td { 37. text-align: left; 38. font-weight: normal; 39. } 40. blockquote:before, blockquote:after, 41. q:before, q:after { 42. content: ""; 43. } 44. blockquote, q { 45. quotes: "" ""; 46. } 47. 8.删除虚线轮廓 CSS： 1. a, a:active { outline: none; } 9.圆角 CSS： 1. .element { 2. -moz-border-radius: 5px; 3. -webkit-border-radius: 5px; 4. border-radius: 5px; /* future proofing */ 5. } 6. .element-top-left-corner { 7. -moz-border-radius-topleft: 5px; 8. -webkit-border-top-left-radius: 5px; 9. } 10.覆盖内联的样式 CSS: 1. .override { 2. font-size: 14px !important; 3. }

CSS小技巧

标签：

原文地址：http://www.cnblogs.com/yllam/p/4830872.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行