Speed up your web development
0 likes666 views
This document discusses the challenges of modern web development, humorously illustrating time spent on issues like compatibility with Internet Explorer, swearing, and layout adjustments. It introduces tools like Zen Coding for faster HTML coding and Sass/Compass for more manageable CSS, emphasizing their benefits in improving workflow. The content also highlights coding techniques and syntax enhancements using SCSS.
![HTML[ ]
[ ]Zen Code
<div id="content">
</div>
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-21-320.jpg)
![HTML[ ]
[ ]Zen Code
<div id="content">
</div>
div#content
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-22-320.jpg)
![HTML[ ]
[ ]Zen Code
<div id="content">
</div>
div#content
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-23-320.jpg)
![HTML[ ]
[ ]Zen Code
<ul id="navigation">
<li></li>
<li></li>
<li></li>
</ul>
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-24-320.jpg)
![HTML[ ]
[ ]Zen Code
<ul id="navigation">
<li></li>
<li></li>
<li></li>
</ul>
ul#navigation>li*3
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-25-320.jpg)
![HTML[ ]
[ ]Zen Code
<ul id="navigation">
<li></li>
<li></li>
<li></li>
</ul>
ul#navigation>li*3
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-26-320.jpg)
![HTML[ ]
[ ]Zen Code
<select id="jazz" name="" class="album">
<option value=""></option>
<option value=""></option>
</select>
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-27-320.jpg)
![HTML[ ]
[ ]Zen Code
select#jazz.album>option*2
<select id="jazz" name="" class="album">
<option value=""></option>
<option value=""></option>
</select>
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-28-320.jpg)
![HTML[ ]
[ ]Zen Code
select#jazz.album>option*2
<select id="jazz" name="" class="album">
<option value=""></option>
<option value=""></option>
</select>
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-29-320.jpg)
![HTML[ ]
[ ]Zen Code
<div id="thediv">
<p class="first"></p>
<p class="second"></p>
</div>
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-30-320.jpg)
![HTML[ ]
[ ]Zen Code
<div id="thediv">
<p class="first"></p>
<p class="second"></p>
</div>
div#thediv>p.first+p.second
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-31-320.jpg)
![HTML[ ]
[ ]Zen Code
<div id="thediv">
<p class="first"></p>
<p class="second"></p>
</div>
div#thediv>p.first+p.second
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-32-320.jpg)
![[ CSS ] [ SCSS ]
#header {
margin-bottom: 50px;
}
#header h1 {
font-size: 24px;
color: red;
}
#header h1 a {
display: block;
}
#header ul.nav li {
float: left;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-57-320.jpg)
![[ CSS ] [ SCSS ]
#header {
margin-bottom: 50px;
}
#header h1 {
font-size: 24px;
color: red;
}
#header h1 a {
display: block;
}
#header ul.nav li {
float: left;
}
#header {
margin-bottom: 50px;
h1 {
font-size: 24px;
color: red;
a { display: block; }
}
ul.nav {
li { float:left; }
}
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-58-320.jpg)
![[ CSS ] [ SCSS ]
#header {
margin-bottom: 50px;
}
#header h1 {
font-size: 24px;
color: red;
}
#header h1 a {
display: block;
}
#header ul.nav li {
float: left;
}
#header {
margin-bottom: 50px;
h1 {
font-size: 24px;
color: red;
a { display: block; }
}
ul.nav {
li { float:left; }
}
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-59-320.jpg)
![[ CSS ] [ SCSS ]
#header {
margin-bottom: 50px;
}
#header h1 {
font-size: 24px;
color: red;
}
#header h1 a {
display: block;
}
#header ul.nav li {
float: left;
}
#header {
margin-bottom: 50px;
h1 {
font-size: 24px;
color: red;
a { display: block; }
}
ul.nav {
li { float:left; }
}
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-60-320.jpg)
![[ CSS ]
#header {
margin-bottom: 50px;
}
#header h1 {
font-size: 24px;
color: red;
}
#header h1 a {
display: block;
}
#header ul.nav li {
float: left;
}
#header {
margin-bottom: 50px;
h1 {
font-size: 24px;
color: red;
a { display: block; }
}
ul.nav {
li { float:left; }
}
}
[ SCSS ]
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-61-320.jpg)
![[ CSS ] [ SCSS ]
a, h1, h2, h3, h4, h5 {
color: #ff9900;
}
#header {
background: #ff9900;
}
.section {
padding: 10px;
margin-bottom: 20px;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-63-320.jpg)
![[ CSS ] [ SCSS ]
a, h1, h2, h3, h4, h5 {
color: #ff9900;
}
#header {
background: #ff9900;
}
.section {
padding: 10px;
margin-bottom: 20px;
}
$LINK_COLOR: #FF9900;
$MARGIN: 20px;
a, h1, h2, h3, h4, h5 {
color: $LINK_COLOR;
}
#header {
background: $LINK_COLOR;
}
.section {
padding: $MARGIN / 2;
margin-bottom: $MARGIN;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-64-320.jpg)
![[ CSS ] [ SCSS ]
a, h1, h2, h3, h4, h5 {
color: #ff9900;
}
#header {
background: #ff9900;
}
.section {
padding: 10px;
margin-bottom: 20px;
}
$LINK_COLOR: #FF9900;
$MARGIN: 20px;
a, h1, h2, h3, h4, h5 {
color: $LINK_COLOR;
}
#header {
background: $LINK_COLOR;
}
.section {
padding: $MARGIN / 2;
margin-bottom: $MARGIN;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-65-320.jpg)
![[ CSS ] [ SCSS ]
a, h1, h2, h3, h4, h5 {
color: #ff9900;
}
#header {
background: #ff9900;
}
.section {
padding: 10px;
margin-bottom: 20px;
}
$LINK_COLOR: #FF9900;
$MARGIN: 20px;
a, h1, h2, h3, h4, h5 {
color: $LINK_COLOR;
}
#header {
background: $LINK_COLOR;
}
.section {
padding: $MARGIN / 2;
margin-bottom: $MARGIN;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-66-320.jpg)
![[ CSS ] [ SCSS ]
a, h1, h2, h3, h4, h5 {
color: #ff9900;
}
#header {
background: #ff9900;
}
.section {
padding: 10px;
margin-bottom: 20px;
}
$LINK_COLOR: #FF9900;
$MARGIN: 20px;
a, h1, h2, h3, h4, h5 {
color: $LINK_COLOR;
}
#header {
background: $LINK_COLOR;
}
.section {
padding: $MARGIN / 2;
margin-bottom: $MARGIN;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-67-320.jpg)
![[ CSS ] [ SCSS ]
#navbar li {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
}
#footer {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-69-320.jpg)
![[ CSS ] [ SCSS ]
@mixin rounded-top {
$RADIUS: 10px;
border-top-radius:
$RADIUS;
-moz-border-radius-top:
$RADIUS;
-webkit-border-top-radius:
$RADIUS;
}
#navbar li { @include rounded-
top; }
#footer { @include rounded-top; }
#navbar li {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
}
#footer {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-70-320.jpg)
![[ CSS ] [ SCSS ]
@mixin rounded-top {
$RADIUS: 10px;
border-top-radius:
$RADIUS;
-moz-border-radius-top:
$RADIUS;
-webkit-border-top-radius:
$RADIUS;
}
#navbar li { @include rounded-
top; }
#footer { @include rounded-top; }
#navbar li {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
}
#footer {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-71-320.jpg)
![[ CSS ] [ SCSS ]
.warn {
background: yellow;
}
.bad_warn {
background: yellow;
font-weight: bold;
color: red;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-73-320.jpg)
![[ CSS ] [ SCSS ]
.warn {
background: yellow;
}
.bad_warn {
@extend .warn;
font-weight: bold;
color: red;
}
.warn {
background: yellow;
}
.bad_warn {
background: yellow;
font-weight: bold;
color: red;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-74-320.jpg)
![[ CSS ] [ SCSS ]
.warn {
background: yellow;
}
.bad_warn {
@extend .warn;
font-weight: bold;
color: red;
}
.warn {
background: yellow;
}
.bad_warn {
background: yellow;
font-weight: bold;
color: red;
}
2012年1月10日星期二](https://image.slidesharecdn.com/speedupyourwebdevelopment-130924020827-phpapp01/85/Speed-up-your-web-development-75-320.jpg)
Speed up your web development
- 1. Speed up your Web Development Ushering in 2012 Speaker : Spin Lai Date : 2012/1/10 2012年1月10日星期二
- 2. Time breakdown of modern web development 2012年1月10日星期二
- 3. 40% Trying to get the bastard to work in Internet fu*king Explorer 2012年1月10日星期二
- 5. 20% Trying to get the layout to work using only CSS before giving up and using table 2012年1月10日星期二
- 6. 10% Making the site W3C comliant 2012年1月10日星期二
- 7. 10% Wishing a slow, painful death on Bill Gat*s 2012年1月10日星期二
- 9. Can somebody help us, Please ? 2012年1月10日星期二
- 10. Can somebody help us, Of course! 2012年1月10日星期二
- 14. What is ZenCoding ? 2012年1月10日星期二
- 15. What is ZenCoding ? Get HTML done faster ! 2012年1月10日星期二
- 16. But I have code snippet plugins for my IDE. 2012年1月10日星期二
- 17. Cross-platform Cross-editor CSS-like syntax ZenCoding is ... 2012年1月10日星期二
- 18. It works with ... 2012年1月10日星期二
- 21. HTML[ ] [ ]Zen Code <div id="content"> </div> 2012年1月10日星期二
- 22. HTML[ ] [ ]Zen Code <div id="content"> </div> div#content 2012年1月10日星期二
- 23. HTML[ ] [ ]Zen Code <div id="content"> </div> div#content 2012年1月10日星期二
- 24. HTML[ ] [ ]Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> 2012年1月10日星期二
- 25. HTML[ ] [ ]Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> ul#navigation>li*3 2012年1月10日星期二
- 26. HTML[ ] [ ]Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> ul#navigation>li*3 2012年1月10日星期二
- 27. HTML[ ] [ ]Zen Code <select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option> </select> 2012年1月10日星期二
- 28. HTML[ ] [ ]Zen Code select#jazz.album>option*2 <select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option> </select> 2012年1月10日星期二
- 29. HTML[ ] [ ]Zen Code select#jazz.album>option*2 <select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option> </select> 2012年1月10日星期二
- 30. HTML[ ] [ ]Zen Code <div id="thediv"> <p class="first"></p> <p class="second"></p> </div> 2012年1月10日星期二
- 31. HTML[ ] [ ]Zen Code <div id="thediv"> <p class="first"></p> <p class="second"></p> </div> div#thediv>p.first+p.second 2012年1月10日星期二
- 32. HTML[ ] [ ]Zen Code <div id="thediv"> <p class="first"></p> <p class="second"></p> </div> div#thediv>p.first+p.second 2012年1月10日星期二
- 36. 尛 2012年1月10日星期二
- 37. 2012年1月10日星期二
- 38. CSS / SASS / Compass 2012年1月10日星期二
- 39. CSS / SASS / Compass 2012年1月10日星期二
- 40. Everything is much easier 2012年1月10日星期二
- 41. Everything is much easier in the beginning... 2012年1月10日星期二
- 42. body { margin: 0; padding: 0; background-color: #D1E7FF; font-family: Verdana, Arial, Helvetica, sans-serif; } div#main { margin: 0 2em 0 2em; padding: 0; background: #FFF; } div#footer { margin: 0 3em; padding: 0.5em 0; background: #FFF; height: 64px; background-image: url('images/inex_06.jpg'); } 2012年1月10日星期二
- 43. 2012年1月10日星期二
- 44. When the project grows up... 2012年1月10日星期二
- 45. table#tb_product_grid {width: 100%;} table#tb_product_grid td {margin: 0;padding: 0; text-align: center;} table#tb_product_grid img{width: 350px;} table#tb_LT_realtime th.y_desc {border-right: 1px solid #999; border-bottom: 1px solid #999; background: #5A042C; color: #FFF; width: 22%;} table#tb_LT_realtime th.x_var {background: #E7E5E5; width: 13%;} table#tb_LT_realtime th.y_var {border: 1px solid #DDD; padding: 0.25em 1.5em 0.25em 0; text-align: right;} .formbutton04{ cursor:pointer; border:outset 1px #ccc; background:#999; color:#000; font-family:Verdana,sans-serif; font-weight:bold; padding: 1px 2px; background:url(images/formbg04.gif) repeat-x left top; } .btn3_mouseout { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid } .btn3_mouseover { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid } iv#display_img{ text-align: center; margin: 0 0 0 2.5em; width: 1000px; } div#img_name{ width: 1000px; height:20px; font-size: large; text-align: center; } div#img_list_name{ padding:2px; font-size: large; height: 20px; text-align: center; width: 1000px; } div#down_gif{ margin: 0.5em 0 0 2.5em; width:1000px; /* height:20px; */ text-align:right; cursor: pointer; } .ui-tabs { padding: .2em; zoom: 1; }.ui-tabs .ui-tabs-nav { list-style: none; position:relative; padding: .2em .2em 0; }.ui-tabs .ui-tabs-nav li { position: relative;float: left; border-bottom-width: 0 !important;margin: 0 .2em -1px 0; padding: 0; }.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }.ui-tabs .ui-tabs-nav li.ui-tabs-selected{ padding-bottom: 1px; border-bottom-width: 0; }.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a{ cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a{ cursor: pointer; } /* first selector in groupseems obsolete, but required to overcome bug inOpera applying cursor: text overall if definedelsewhere... */ .ui-tabs .ui-tabs-panel { padding: 1em 1.4em;display: block; border-width: 0; background:none; } .ui-tabs .ui-tabs-hide { display: none !important; } div.sitemap_layer_1{ border: 1px solid #B5D9EA; margin: 0.5em 0 0 28px; background: #D9F1FC; padding: 0.25em 1em 0.25em 1em; display: inline-block; *display: inline; / * This is for IE6 */ zoom: 1; / * This is for inline-block in IE */ *display: inline !important; / * This is for IE7 */ } 2012年1月10日星期二
- 46. 2012年1月10日星期二
- 47. 2012年1月10日星期二
- 48. 2012年1月10日星期二
- 49. CSS / SASS / Compass 2012年1月10日星期二
- 51. NOT SuperASS SASS is ... 2012年1月10日星期二
- 52. NOT SuperASS Syntatically Awsome StyleSheet SASS is ... 2012年1月10日星期二
- 53. NOT SuperASS Syntatically Awsome StyleSheet SASS v3 is known as SCSS SASS is ... 2012年1月10日星期二
- 54. Okay, but what can she do? 2012年1月10日星期二
- 57. [ CSS ] [ SCSS ] #header { margin-bottom: 50px; } #header h1 { font-size: 24px; color: red; } #header h1 a { display: block; } #header ul.nav li { float: left; } 2012年1月10日星期二
- 58. [ CSS ] [ SCSS ] #header { margin-bottom: 50px; } #header h1 { font-size: 24px; color: red; } #header h1 a { display: block; } #header ul.nav li { float: left; } #header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } } } 2012年1月10日星期二
- 59. [ CSS ] [ SCSS ] #header { margin-bottom: 50px; } #header h1 { font-size: 24px; color: red; } #header h1 a { display: block; } #header ul.nav li { float: left; } #header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } } } 2012年1月10日星期二
- 60. [ CSS ] [ SCSS ] #header { margin-bottom: 50px; } #header h1 { font-size: 24px; color: red; } #header h1 a { display: block; } #header ul.nav li { float: left; } #header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } } } 2012年1月10日星期二
- 61. [ CSS ] #header { margin-bottom: 50px; } #header h1 { font-size: 24px; color: red; } #header h1 a { display: block; } #header ul.nav li { float: left; } #header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } } } [ SCSS ] 2012年1月10日星期二
- 63. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } 2012年1月10日星期二
- 64. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } $LINK_COLOR: #FF9900; $MARGIN: 20px; a, h1, h2, h3, h4, h5 { color: $LINK_COLOR; } #header { background: $LINK_COLOR; } .section { padding: $MARGIN / 2; margin-bottom: $MARGIN; } 2012年1月10日星期二
- 65. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } $LINK_COLOR: #FF9900; $MARGIN: 20px; a, h1, h2, h3, h4, h5 { color: $LINK_COLOR; } #header { background: $LINK_COLOR; } .section { padding: $MARGIN / 2; margin-bottom: $MARGIN; } 2012年1月10日星期二
- 66. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } $LINK_COLOR: #FF9900; $MARGIN: 20px; a, h1, h2, h3, h4, h5 { color: $LINK_COLOR; } #header { background: $LINK_COLOR; } .section { padding: $MARGIN / 2; margin-bottom: $MARGIN; } 2012年1月10日星期二
- 67. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } $LINK_COLOR: #FF9900; $MARGIN: 20px; a, h1, h2, h3, h4, h5 { color: $LINK_COLOR; } #header { background: $LINK_COLOR; } .section { padding: $MARGIN / 2; margin-bottom: $MARGIN; } 2012年1月10日星期二
- 69. [ CSS ] [ SCSS ] #navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } #footer { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } 2012年1月10日星期二
- 70. [ CSS ] [ SCSS ] @mixin rounded-top { $RADIUS: 10px; border-top-radius: $RADIUS; -moz-border-radius-top: $RADIUS; -webkit-border-top-radius: $RADIUS; } #navbar li { @include rounded- top; } #footer { @include rounded-top; } #navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } #footer { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } 2012年1月10日星期二
- 71. [ CSS ] [ SCSS ] @mixin rounded-top { $RADIUS: 10px; border-top-radius: $RADIUS; -moz-border-radius-top: $RADIUS; -webkit-border-top-radius: $RADIUS; } #navbar li { @include rounded- top; } #footer { @include rounded-top; } #navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } #footer { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } 2012年1月10日星期二
- 73. [ CSS ] [ SCSS ] .warn { background: yellow; } .bad_warn { background: yellow; font-weight: bold; color: red; } 2012年1月10日星期二
- 74. [ CSS ] [ SCSS ] .warn { background: yellow; } .bad_warn { @extend .warn; font-weight: bold; color: red; } .warn { background: yellow; } .bad_warn { background: yellow; font-weight: bold; color: red; } 2012年1月10日星期二
- 75. [ CSS ] [ SCSS ] .warn { background: yellow; } .bad_warn { @extend .warn; font-weight: bold; color: red; } .warn { background: yellow; } .bad_warn { background: yellow; font-weight: bold; color: red; } 2012年1月10日星期二
- 77. CSS / Sass / Compass 2012年1月10日星期二
- 78. Powered by SASS Meta framework Code snippets Best practices Compass is ... 2012年1月10日星期二
- 79. Tell me more ! 2012年1月10日星期二
- 80. Helpers Extension Project Context and lots more... 2012年1月10日星期二
- 81. Helpers Extension Project Context and lots more... 2012年1月10日星期二
- 82. @import "compass" .linear { @include background(linear- gradient( top left, #333, #0C0)); } 2012年1月10日星期二
- 83. @import "compass" .box { @include border-radius(8px); @include box-shadow( rgba(#CCC, 0.5) 3px 3px 5px ); } 2012年1月10日星期二
- 84. Helpers Extension Project Context and lots more... 2012年1月10日星期二
- 85. Helpers Extension Project Context and lots more... 2012年1月10日星期二
- 86. Helpers Extension Project Context and lots more... 2012年1月10日星期二
- 94. But I use IE9, and... 2012年1月10日星期二
- 95. But I use IE9, and... 2012年1月10日星期二
- 96. 2012年1月10日星期二
- 97. 2012年1月10日星期二
- 98. I use IE6, WTF... 2012年1月10日星期二
- 99. I use IE6, WTF... 2012年1月10日星期二
- 100. 2012年1月10日星期二
- 101. God ! Help us !! 2012年1月10日星期二
- 102. Dojo ? What’s that? 2012年1月10日星期二
- 103. Powerful Javascript toolkit Open source BSD licensed Dojo is ... 2012年1月10日星期二
- 104. Powerful ? Show me 2012年1月10日星期二
- 112. DEMO 2012年1月10日星期二