1 2 DOCTYPE html head titlePage titletitle head

4、引入 CSS 和 Java. Script 根据 HTML 5 规范, 通常在引入 CSS 和 Java. Script

6、减少标签数量避免多余的父节点 / 属性能简写就简写 <input type="text" disabled> ü<input type="checkbox" value="1" checked> ü<select> <option value="1"

1、CSS基本格式[语法] 空格 [4点] 换行冒号小数点. selector, color）. selector-secondary, [3点] 0单位引号大小写（ .

2、CSS属性声明顺序 1、Positioning 定位 2、Box model 盒模型 3、Typographic 排版 4、Visual 外观

position: absolute; /* Box-model 盒模型 */ top: 0; display: block; right: 0; float: right;

DIV+CSS命名参考表 http: //www. divcss 5. com/jiqiao/j 4. shtml

按钮 btn. Green. B btn. Green. S btn. Search btn. Sure 背景颜色. bg. White.

Slides: 19

Download presentation

1、嵌套的节点应该缩进（两个空格）。 2、在属性上，使用双引号，不要使用单引号。 • • • <!DOCTYPE html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo. png" alt="Company"> <h 1 class="hello-world">Hello, world!</h 1> </body> </html>

4、引入 CSS 和 Java. Script 根据 HTML 5 规范, 通常在引入 CSS 和 Java. Script 时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。 • •  <link rel="stylesheet" href="code-guide. css"> • •  <script src="code-guide. js"></script>

6、减少标签数量避免多余的父节点 / 属性能简写就简写 <input type="text" disabled> ü<input type="checkbox" value="1" checked> ü<select> <option value="1" selected>1</option> </select>  <span class="avatar"><img src=". . . "></span>  <img class="avatar" src=". . . ">

1、CSS基本格式[语法] 空格 [4点] 换行冒号小数点. selector, color）. selector-secondary, [3点] 0单位引号大小写（ . selector[type="text"] { padding: 15 px; margin: 0 0 15 px; background-color: rgba(0, 0, 0, . 5); box-shadow: 0 1 px 2 px #ccc, inset 0 1 px 0 #fff; }

2、CSS属性声明顺序 1、Positioning 定位 2、Box model 盒模型 3、Typographic 排版 4、Visual 外观

position: absolute; /* Box-model 盒模型 */ top: 0; display: block; right: 0; float: right; bottom: 0; left: 0; z-index: 100; 1 /* Typography 排版 */ font: normal 13 px "宋体"; 3 line-height: 1. 5; color: #333; text-align: center; 1 /* Positioning 定位 */ width: 100 px; height: 100 px; 2 /* Misc 杂项 /* Visual 外观 */ background: #ccc; */ border: 1 px solid opacity: 1; #e 5 e 5 e 5; 4 border-radius: 3 px; 5

DIV+CSS命名参考表 http: //www. divcss 5. com/jiqiao/j 4. shtml

按钮 btn. Green. B btn. Green. S btn. Search btn. Sure 背景颜色. bg. White. bg. Red. bg. Gray 位置：. fleft {float: left; }. fright {float: right; } 框架： row main. L main. R 边框颜色. border. White. border. Red. border. Gray 字体色. red. green. yellow. . /** 间距 + 对齐 **/. mt 5 {margin-top: 5 px; }. mt 10 {margin-top: 10 px; }. mb 10 {margin-bottom: 10 px; }. text. L {text-align: left; }. text. R {text-align: right; }. text. C {text-align: center; } 标题 title. Red title. Gray. B title. Gray. S news. TT_gray 命名. left. News. index. News