分享30个开发人员有用的CSS代码片段

CSS 是我们使用的功能强大和最常用 web 语言。他可以兼容新旧不同的浏览器，他的兼容跨度确实够大的，从微软的IE到火狐再到谷歌浏览器。在设计的时候我们总是想创建更有创意和风格的网站，无论创建怎么样的网站，有些CSS代码是必须要掌握的，可以说这是核心，掌握这样的一些CSS代码，前端布局方面基本上再不成问题，什么边框圆角，工具提示，浏览器hacks等等都不是问题。

在今天的文章中分享我收藏的 30 个CSS 代码段，无论您是经验丰富的 web 设计师还是新手，他们都是非常值得借鉴的；

Css Reset by Eric Meyer



    

  1. html, body, div, span, applet, object, iframe,
    2. 

  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    3. 

  3. a, abbr, acronym, address, big, cite, code,
    4. 

  4. del, dfn, em, font, img, ins, kbd, q, s, samp,
    5. 

  5. small, strike, strong, sub, sup, tt, var,
    6. 

  6. b, u, i, center,
    7. 

  7. dl, dt, dd, ol, ul, li,
    8. 

  8. fieldset, form, label, legend,
    9. 

  9. table, caption, tbody, tfoot, thead, tr, th, td {
    10. 

  10. margin: 0;
    11. 

  11. padding: 0;
    12. 

  12. border: 0;
    13. 

  13. outline: 0;
    14. 

  14. font-size: 100%;
    15. 

  15. vertical-align: baseline;
    16. 

  16. background: transparent;
    17. 

  17. }
    18. 

  18. body {
    19. 

  19. line-height: 1;
    20. 

  20. }
    21. 

  21. ol, ul {
    22. 

  22. list-style: none;
    23. 

  23. }
    24. 

  24. blockquote, q {
    25. 

  25. quotes: none;
    26. 

  26. }
    27. 

  27. blockquote:before, blockquote:after,
    28. 

  28. q:before, q:after {
    29. 

  29. content: '';
    30. 

  30. content: none;
    31. 

  31. }
    32. 

  32. /* remember to define focus styles! */
    33. 

  33. :focus {
    34. 

  34. outline: 0;
    35. 

  35. }
    36. 

  36. /* remember to highlight inserts somehow! */
    37. 

  37. ins {
    38. 

  38. text-decoration: none;
    39. 

  39. }
    40. 

  40. del {
    41. 

  41. text-decoration: line-through;
    42. 

  42. }
    43. 

  43. /* tables still need 'cellspacing="0"' in the markup */
    44. 

  44. table {
    45. 

  45. border-collapse: collapse;
    46. 

  46. border-spacing: 0;
    47. 

  47. }
    48. 



根据文件格式显示不同的链接样式




    

  1. /* external links */
    2. 

  2. a[href^="http://"]{
    3. 

  3. padding-right: 20px;
    4. 

  4. background: url(external.gif) no-repeat center right;
    5. 

  5. }
    6. 

  6. /* emails */
    7. 

  7. a[href^="mailto:"]{
    8. 

  8. padding-right: 20px;
    9. 

  9. background: url(email.png) no-repeat center right;
    10. 

  10. }
    11. 

  11. /* pdfs */
    12. 

  12. a[href$=".pdf"]{
    13. 

  13. padding-right: 20px;
    14. 

  14. background: url(pdf.png) no-repeat center right;
    15. 

  15. }
    16. 



在IE浏览器删除textarea的滚动条




    

  1. textarea{
    2. 

  2. overflow:auto;
    3. 

  3. }
    4. 



浏览器特定的 hacks




    

  1. /* IE 6 */
    2. 

  2. * html .yourclass { }
    3. 

  3. /* IE 7 */
    4. 

  4. *+html .yourclass{ }
    5. 

  5. /* IE 7 and modern browsers */
    6. 

  6. html>body .yourclass { }
    7. 

  7. /* Modern browsers (not IE 7) */
    8. 

  8. html>/**/body .yourclass { }
    9. 

  9. /* Opera 9.27 and below */
    10. 

  10. html:first-child .yourclass { }
    11. 

  11. /* Safari */
    12. 

  12. html[xmlns*=""] body:last-child .yourclass { }
    13. 

  13. /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
    14. 

  14. body:nth-of-type(1) .yourclass { }
    15. 

  15. /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
    16. 

  16. body:first-of-type .yourclass {  }
    17. 

  17. /* Safari 3+, Chrome 1+ */
    18. 

  18. @media screen and (-webkit-min-device-pixel-ratio:0) {
    19. 

  19. .yourclass  {  }
    20. 

  20. }
    21. 



Clearfix




    

  1. .clearfix:after {
    2. 

  2. visibility: hidden;
    3. 

  3. display: block;
    4. 

  4. font-size: 0;
    5. 

  5. content: " ";
    6. 

  6. clear: both;
    7. 

  7. height: 0;
    8. 

  8. }
    9. 

  9. .clearfix { display: inline-block; }
    10. 

  10. /* start commented backslash hack \*/
    11. 

  11. * html .clearfix { height: 1%; }
    12. 

  12. .clearfix { display: block; }
    13. 

  13. /* close commented backslash hack */
    14. 



固定宽度且居中




    

  1. .wrapper {
    2. 

  2. width:960px;
    3. 

  3. margin:0 auto;
    4. 

  4. }
    5. 



Rounded corners – border-radius




    

  1. .round{
    2. 

  2. -moz-border-radius: 10px;
    3. 

  3. -webkit-border-radius: 10px;
    4. 

  4. border-radius: 10px; /* future proofing */
    5. 

  5. -khtml-border-radius: 10px; /* for old Konqueror browsers */
    6. 

  6. }
    7. 



伪元素向文本的第一个字母添加特殊样式




    

  1. p:first-letter{
    2. 

  2. display:block;
    3. 

  3. margin:5px 0 0 5px;
    4. 

  4. float:left;
    5. 

  5. color:#000;
    6. 

  6. font-size:60px;
    7. 

  7. font-family:Georgia;
    8. 

  8. }
    9. 



使用 @fontface




    

  1. @font-face {
    2. 

  2. font-family: 'MyFontFamily';
    3. 

  3. src: url('myfont-webfont.eot?') format('eot'),
    4. 

  4. url('myfont-webfont.woff') format('woff'),
    5. 

  5. url('myfont-webfont.ttf')  format('truetype'),
    6. 

  6. url('myfont-webfont.svg#svgFontName') format('svg');
    7. 

  7. }
    8. 



跨浏览器的inline-block




    

  1. li {
    2. 

  2. width: 200px;
    3. 

  3. min-height: 250px;
    4. 

  4. border: 1px solid #000;
    5. 

  5. display: -moz-inline-stack;
    6. 

  6. display: inline-block;
    7. 

  7. vertical-align: top;
    8. 

  8. margin: 5px;
    9. 

  9. zoom: 1;
    10. 

  10. *display: inline;
    11. 

  11. _height: 250px;
    12. 

  12. }
    13. 



Fixed Footer




    

  1. #footer {
    2. 

  2. position:fixed;
    3. 

  3. left:0px;
    4. 

  4. bottom:0px;
    5. 

  5. height:30px;
    6. 

  6. width:100%;
    7. 

  7. background:#999;
    8. 

  8. }
    9. 

  9. /* IE 6 */
    10. 

  10. * html #footer {
    11. 

  11. position:absolute;
    12. 

  12. top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
    13. 

  13. }
    14. 



更改内容区域的大小




    

  1. #content {
    2. 

  2. width: 100%;
    3. 

  3. margin: 0;
    4. 

  4. float: none;
    5. 

  5. }
    6. 



CSS3 Media Queries （这个不常用主要用于智能设备的判断显示不同的媒体）




    

  1. /* Smartphones (portrait and landscape) ----------- */
    2. 

  2. @media only screen
    3. 

  3. and (min-device-width : 320px)
    4. 

  4. and (max-device-width : 480px) {
    5. 

  5. /* Styles */
    6. 

  6. }
    7. 

  7. /* Smartphones (landscape) ----------- */
    8. 

  8. @media only screen
    9. 

  9. and (min-width : 321px) {
    10. 

  10. /* Styles */
    11. 

  11. }
    12. 

  12. /* Smartphones (portrait) ----------- */
    13. 

  13. @media only screen
    14. 

  14. and (max-width : 320px) {
    15. 

  15. /* Styles */
    16. 

  16. }
    17. 

  17. /* iPads (portrait and landscape) ----------- */
    18. 

  18. @media only screen
    19. 

  19. and (min-device-width : 768px)
    20. 

  20. and (max-device-width : 1024px) {
    21. 

  21. /* Styles */
    22. 

  22. }
    23. 

  23. /* iPads (landscape) ----------- */
    24. 

  24. @media only screen
    25. 

  25. and (min-device-width : 768px)
    26. 

  26. and (max-device-width : 1024px)
    27. 

  27. and (orientation : landscape) {
    28. 

  28. /* Styles */
    29. 

  29. }
    30. 

  30. /* iPads (portrait) ----------- */
    31. 

  31. @media only screen
    32. 

  32. and (min-device-width : 768px)
    33. 

  33. and (max-device-width : 1024px)
    34. 

  34. and (orientation : portrait) {
    35. 

  35. /* Styles */
    36. 

  36. }
    37. 

  37. /* Desktops and laptops ----------- */
    38. 

  38. @media only screen
    39. 

  39. and (min-width : 1224px) {
    40. 

  40. /* Styles */
    41. 

  41. }
    42. 

  42. /* Large screens ----------- */
    43. 

  43. @media only screen
    44. 

  44. and (min-width : 1824px) {
    45. 

  45. /* Styles */
    46. 

  46. }
    47. 

  47. /* iPhone 4 ----------- */
    48. 

  48. @media
    49. 

  49. only screen and (-webkit-min-device-pixel-ratio : 1.5),
    50. 

  50. only screen and (min-device-pixel-ratio : 1.5) {
    51. 

  51. /* Styles */
    52. 

  52. }
    53. 



多背景图片




    

  1. #multiple-images {
    2. 

  2. background: url(image_1.png) top left no-repeat,
    3. 

  3. url(image_2.png) bottom left no-repeat,
    4. 

  4. url(image_3.png) bottom right no-repeat;
    5. 

  5. }
    6. 



多列




    

  1. #columns-3 {
    2. 

  2. text-align: justify;
    3. 

  3. -moz-column-count: 3;
    4. 

  4. -moz-column-gap: 12px;
    5. 

  5. -moz-column-rule: 1px solid #c4c8cc;
    6. 

  6. -webkit-column-count: 3;
    7. 

  7. -webkit-column-gap: 12px;
    8. 

  8. -webkit-column-rule: 1px solid #c4c8cc;
    9. 

  9. }
    10. 



在IE的最小高度




    

  1. .box {
    2. 

  2. min-height:500px;
    3. 

  3. height:auto !important;
    4. 

  4. height:500px;
    5. 

  5. }
    6. 



突出显示文本样式




    

  1. ::selection {
    2. 

  2. color: #000000;
    3. 

  3. background-color: #FF0000;
    4. 

  4. }
    5. 

  5. ::-moz-selection {
    6. 

  6. color: #000000;
    7. 

  7. background: #FF0000;
    8. 

  8. }
    9. 



Box Shadow




    

  1. box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    2. 

  2. -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    3. 

  3. -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    4. 



占位符文本样式




    

  1. ::-webkit-input-placeholder { color: #ccc; font-style:italic }
    2. 

  2. :-moz-placeholder           { color: #ccc; font-style:italic }
    3. 



CSS3 3D文字效果




    

  1. h1 {
    2. 

  2. text-shadow: 0 1px 0 #ccc,
    3. 

  3. 0 2px 0 #c9c9c9,
    4. 

  4. 0 3px 0 #bbb,
    5. 

  5. 0 4px 0 #b9b9b9,
    6. 

  6. 0 5px 0 #aaa,
    7. 

  7. 0 6px 1px rgba(0,0,0,.1),
    8. 

  8. 0 0 5px rgba(0,0,0,.1),
    9. 

  9. 0 1px 3px rgba(0,0,0,.3),
    10. 

  10. 0 3px 5px rgba(0,0,0,.2),
    11. 

  11. 0 5px 10px rgba(0,0,0,.25),
    12. 

  12. 0 10px 10px rgba(0,0,0,.2),
    13. 

  13. 0 20px 20px rgba(0,0,0,.15);
    14. 

  14. }
    15. 



WebKit的边界半径修正




    

  1. -webkit-background-clip: padding-box;
    2. 



XBrowser的border-radius（CSS3PIE）




    

  1. .roundbox {
    2. 

  2. -moz-border-radius:8px;
    3. 

  3. -webkit-border-radius:8px;
    4. 

  4. -khtml-border-radius:8px;
    5. 

  5. border-radius:8px;
    6. 

  6. behavior: url(/PIE.htc);
    7. 

  7. }
    8. 



更好的兼容IE浏览器的




    

  1. <!--[if IE]>
    2. 

  2. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    3. 

  3. <![endif]-->
    4. 



CSS3工具提示（这个很实用，看我网站的导航工具提示效果)




    

  1. a {
    2. 

  2. color: #900;
    3. 

  3. text-decoration: none;
    4. 

  4. }
    5. 

  5. a:hover {
    6. 

  6. color: red;
    7. 

  7. position: relative;
    8. 

  8. }
    9. 

  9. a[title]:hover:after {
    10. 

  10. content: attr(title);
    11. 

  11. padding: 4px 8px;
    12. 

  12. color: #333;
    13. 

  13. position: absolute;
    14. 

  14. left: 0;
    15. 

  15. top: 100%;
    16. 

  16. white-space: nowrap;
    17. 

  17. z-index: 20px;
    18. 

  18. -moz-border-radius: 5px;
    19. 

  19. -webkit-border-radius: 5px;
    20. 

  20. border-radius: 5px;
    21. 

  21. -moz-box-shadow: 0px 0px 4px #222;
    22. 

  22. -webkit-box-shadow: 0px 0px 4px #222;
    23. 

  23. box-shadow: 0px 0px 4px #222;
    24. 

  24. background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    25. 

  25. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    26. 

  26. }
    27. 



CSS3背景大小




    

  1. body {
    2. 

  2. background: #000 url(http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) center center fixed no-repeat;
    3. 

  3. -moz-background-size: cover;
    4. 

  4. background-size: cover;
    5. 

  5. }
    6. 

  6. @media only all and (max-width: 1024px) and (max-height: 768px) {
    7. 

  7. body {
    8. 

  8. -moz-background-size: 1024px 768px;
    9. 

  9. background-size: 1024px 768px;
    10. 

  10. }
    11. 

  11. }
    12. 



跨浏览器的CSS页面卷曲阴影




    

  1. .page-curl {
    2. 

  2. position: relative;
    3. 

  3. background: #ffffff;
    4. 

  4. background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    5. 

  5. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    6. 

  6. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
    7. 

  7. -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    8. 

  8. -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }
    9. 

  9. .page-curl:after {
    10. 

  10. z-index: -1;
    11. 

  11. position: absolute;
    12. 

  12. background: transparent;
    13. 

  13. width: 70%;
    14. 

  14. height: 55%;
    15. 

  15. content: '';
    16. 

  16. right: 10px;
    17. 

  17. bottom: 10px;
    18. 

  18. -webkit-transform: skew(15deg) rotate(5deg);
    19. 

  19. -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
    20. 

  20. -moz-transform: skew(15deg) rotate(5deg);
    21. 

  21. -moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }
    22. 

  22. .page-curl:before {
    23. 

  23. z-index: -2;
    24. 

  24. position: absolute;
    25. 

  25. background: transparent;
    26. 

  26. width: 70%;
    27. 

  27. height: 55%;
    28. 

  28. content: '';
    29. 

  29. left: 10px;
    30. 

  30. bottom: 10px;
    31. 

  31. -webkit-transform: skew(-15deg) rotate(-5deg);
    32. 

  32. -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
    33. 

  33. -moz-transform: skew(-15deg) rotate(-5deg);
    34. 

  34. -moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }
    35. 



CSS3模糊文字




    

  1. .blur {
    2. 

  2. color: transparent;
    3. 

  3. text-shadow: 0 0 5px rgba(0,0,0,0.5);
    4. 

  4. }
    5. 



修复 IE6/7 margin/padding双倍 间距错误




    

  1. ul li
    2. 

  2. {
    3. 

  3. float: right;
    4. 

  4. margin-right: 10px;
    5. 

  5. *display: inline; /*Target IE7 and bellow*/
    6. 

  6. _display: inline; /*Target IE6 and bellow*/
    7. 

  7. }
    8. 

  8. /* This example fixes the double right margin bug */
    9. 



链接伪类的顺序




    

  1. a:link {color: blue;}
    2. 

  2. a:visited {color: purple;}
    3. 

  3. a:hover {color: red;}
    4. 

  4. a:active {color: yellow;}
    5. 



响应布局的HTML Meta标签




    

  1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    2. 

  2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    3. 

  3. <meta name="HandheldFriendly" content="true">
    4. 



原文链接：http://www.cnblogs.com/58top/archive/2012/11/26/30-useful-css-snippets-for-developers.html
				


				
时间： 2024-11-18 08:33:48

		
		


		


	

	
	

		


		
分享30个开发人员有用的CSS代码片段的相关文章


								

		

			

                对Web开发人员有用的8个网站小结_相关技巧
			

		

		

									

				1. Min.us: 上传图片的最简单方 开发人员有用的8个网站小结_相关技巧-web前端开发培训小结"> 任何开发人员.设计师.网络管理员都必须跟客户和同事在线分享图片.Min.us的全部服务就是让你极度简单地上传图片:只需把图片拖拽到Min.us的网页里,图片就会保存在服务器上.并且自动生成短网址,这样你就可以通过这个网站分享图片了. 访问Min.us 2.Wirify:把任何网页转换成线框图 设计网站时线框图非常有用.Wirify是一个可以把任何网页立刻转换成线框图的书签工具,这样你			

		

	

				

		

			

                对Web设计和开发人员有用的15个Chrome插件
			

		

		

									

				导读:原文作者Brian在freelancefolder.com发表了一篇<15 Useful Google Chrome Extensions for Web Designers and Developers>,由伯乐在线敏捷翻译组编译,文章介绍了非常有用的15个Chrome插件.以下是全文: 最近我才把谷歌浏览器设为默认浏览器,而与此同时我开始将它用于我的兼职Web设计和开发项目中.由于我所依赖Firebug的插件,在Chrome浏览器并没有完全的对应插件,所以我还是时不时要用Firefo			

		

	

				

		

			

                究竟什么是开发人员眼中最好的代码编辑器？
			

		

		

									

				如果我们把不同的程序开发人员比作三国演义中的各路诸侯大将的话,那么代码编辑器绝对可以称之我们手中的神兵利器,不同类型的开发人员使用的"兵器"也大有 不同.好比兵器来说,没有绝对强的,也没有绝对好的,每一中兵器都有不同的优点和缺点,虽说俗话说的好,一寸长,一寸强,不过如果你没事去那都提着"关老 爷"的"青龙偃月刀"得瑟,貌似也不是很方便.那么对于我们这些开发人员来说,究竟什么样的代码编辑器是最好的呢? 究竟什么是开发人员眼中最好的代码编辑器? 在今			

		

	

				

		

			

                8 个为开发者准备各种 CSS 代码片段的网站
			

		

		

									

				下面是我们列出的一些最好的网站,开发人员可以在这些网站找到有用的CSS代码和得到他们的任务的解决方案. 1) Snipplr - CSS Snippets 2) Snipt - CSS Snippets 3) Dev Snippet - CSS Snippets 4) Cats Who Code - CSS Snippets 5) CSS Tricks 6) Smipple CSS Snippets 7) CSS Pop - CSS Snippets 8) HTML5 Snippets -CSS			

		

	

				

		

			

                又十个超级有用的PHP代码片段_php技巧
			

		

		

									

				好东西要大家一起分享,上次分享了十个,这次再来十个超级有用的PHP代码片段. 1. 发送短信 调用 TextMagic API. // Include the TextMagic PHP lib require('textmagic-sms-api-php/TextMagicAPI.php'); // Set the username and password information $username = 'myusername'; $password = 'mypassword'; // C			

		

	

				

		

			

                WEBJX分享适合web开发人员需求的小工具
			

		

		

									

				文章简介:今天就给大家分享10个有用的小工具,我相信这将是适合大多数开发人员的需求,这些小工具在可用性,速度和稳定性方面,为开发人员提供更多的选择功能,如果你正在开发一个这样的项目有,这些小工具是不错的选择. 构件 (或控制) 是由用户,如窗口或文本框中显示可变信息图形用户界面 (GUI) 的元素.在web开发当中我们经常需要构建用户友好的部件,如百度谷歌地图的拖拽,社会化分享工具的显示次数,漂亮的UI按钮等等,这些都是由小部件构建应用程序模块然后呈现给用户的基本视觉页面. 今天就给大家分享10			

		

	

				

		

			

                分享一个web开发人员做的SEO小抄
			

		

		

									

				当我第一次开始seo工作的时候,我是作为一个没有毕业的实习生进入一家seo企业公司,我是作为一个web开发人员进入这家公司,当然对我来说完全编写代码,我的经验非常有限,我需要花更多的时间和努力来扩充我的知识. 更加具体点说,我的工作是配合seo技术实现商业实践,这对我来说更是一个挑战,对于seo技术我没有任何概念,所以我更需要花几周的时间对seo的一些基础理论知识继续拧拉结,在我每学一个知识和概念的时候我都都会做一个备忘录,里面好汉了定义,包含了一些代码片段,今天看到之前自己所做的一些小抄,觉得			

		

	

				

		

			

                分享下网站开发人员应该知道的61件事_其它综合
			

		

		

									

				不出意料地,他得到了一大堆回答. 通常情况下,你需要把所有人的发言从头到尾读一遍.但是,Stack Overflow有一个很贴心的设计,它允许在问题下方开设一个wiki区,让所有人共同编辑一个最佳答案.于是,就有了下面这篇文章,一共总结出六个方面共计61条"网站开发须知". 我发现,这种概述性的问题,最适合这种集合群智.头脑风暴式的回答方式了.这也是我第一次觉得,Stack Overflow做到了Wikipedia做不到的事.(难怪它最近挤进了全美前400大网站.) 在我的印象中,关于			

		

	

				

		

			

                对前端开发人员有用的在线工具
			

		

		

									

				在工作中借助一些非常好用的工具可以让你专注于更重要的事情,进而提高工作效率.本文收集了一些设计和开发相关的在线工具,分享给大家,希望对你有帮助. ProCSSor ProCSSor是一个很不错的CSS代码美化工具,它可以帮助你很轻松的把代码转换成很美观. jsFiddle JsFiddle有多种用途,其中一个用法就是可以在线编辑HTML, CSS 和JavaScript片段,而且代码可以分享,还可以嵌入到你的博客中等等. Frame Box Frame Box是一个非常好用的用于在线分享线框图(