css reset 原则: 但凡是浏览默认的样式,都不要使用。 body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;} ol,ul{margin:0;padding:0;list-style:none;} a{text-decoration:none;} img{border:none;} 块的特征 1、默认独占一行 2、没有宽度时,默认撑满一排 3、支持所有css命令 内嵌(内联、行内)的特征 1、同排可以继续跟同类的标签 2、内容撑开宽度 3、不支持宽高 4、不支持上下的margin和padding 5、代码换行被解析 display:block 显示为块 使内联元素具备块属性标签的特性 display:inline 显示为内嵌 使行块属性标签具备内联元素的特性 Inline-block的特点和问题 特性: 1、块在一行显示; 2、行内属性标签支持宽高; 3、没有宽度的时候内容撑开宽度 问题: 1、代码换行被解析; 2、ie6 ie7 不支持块属性标签的inline-block; a、分析结构(div 包一排a) b、a标签支持宽高,并且在一排显示 c、有hover效果 d、当前状态不能点! cursor 指针样式 (规定要显示的光标的类型) cursor:pointer | text | move …… cursor:url(hand.cur),pointer; 前端规范 1、所有书写均在英文半角状态下的小写; 2、id,class必须以字母开头; 3、所有标签必须闭合; 4、html标签用tab键缩进; 5、属性值必须带引号; 6、<!-- html注释 --> 7、/* css注释 */ 8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签; 9、p,dt,h标签 里面不能嵌套块属性标签; 10、a标签不能嵌套a; 11、内联元素不能嵌套块;
day01-常见标签
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */} ol,ul{list-style:none;padding:0;margin:0;} a{text-decoration:none;} img{border:none;} /* 默认样式重置 (css reset) */ </style> </head> <body> <a href="#">a标签(链接,下载,锚点)</a> <img src="1.png" alt=""/> <a href="#"><img src="1.png" alt=""/></a> <span>区分样式</span> <strong>强调(粗体)</strong> <em>强调(斜体)</em> <!-- 内联,内嵌,行内属性标签: 1、默认同行可以继续跟同类型标签; 块属性标签: 1、默认独占一行显示; --> <p>段落</p> <div>块</div> <h1>标题1</h1> <h6>标题6</h6> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <dl> <dt>定义列表标题</dt> <dd>定义列表项</dd> <dd>定义列表项</dd> <dd>定义列表项</dd> </dl> </body> </html>
day02-常见标签-默认样式重置
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */} ol,ul{list-style:none;padding:0;margin:0;} a{text-decoration:none;} img{border:none;} /* 默认样式重置 (css reset) */ </style> </head> <body> <a href="#">a标签(链接,下载,锚点)</a> <img src="1.png" alt=""/> <a href="#"><img src="1.png" alt=""/></a> <span>区分样式</span> <strong>强调(粗体)</strong> <em>强调(斜体)</em> <p>段落</p> <div>块</div> <h1>标题1</h1> <h6>标题6</h6> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <dl> <dt>定义列表标题</dt> <dd>定义列表项</dd> <dd>定义列表项</dd> <dd>定义列表项</dd> </dl> </body> </html>
day03-块和内嵌
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */} ol,ul{list-style:none;padding:0;margin:0;} a{text-decoration:none;} img{border:none;} /* 默认样式重置 (css reset) */ </style> </head> <body> <a href="#">a标签(链接,下载,锚点)</a> <img src="1.png" alt=""/> <a href="#"><img src="1.png" alt=""/></a> <span>区分样式</span> <strong>强调(粗体)</strong> <em>强调(斜体)</em> <!-- 内联,内嵌,行内属性标签: 1、默认同行可以继续跟同类型标签; 块属性标签: 1、默认独占一行显示; --> <p>段落</p> <div>块</div> <h1>标题1</h1> <h6>标题6</h6> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <dl> <dt>定义列表标题</dt> <dd>定义列表项</dd> <dd>定义列表项</dd> <dd>定义列表项</dd> </dl> </body> </html>
-块和内嵌特性
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */} ol,ul{list-style:none;padding:0;margin:0;} a{text-decoration:none;} img{border:none;} /* 默认样式重置 (css reset) */ /* 内联,内嵌,行内属性标签: 1、默认同行可以继续跟同类型标签; 2、内容撑开宽度 3、不支持宽高 4、不支持上下的margin和padding 5、代码换行被解析 块属性标签: 1、默认独占一行显示; 2、没有宽度时,默认撑满一排 3、支持所有css命令 */ span,div{background:blue; width:100px; height:100px;} </style> </head> <body> <span>区分样式</span> <span>区分样式</span> <span>区分样式</span> <div>块</div> <div>块</div> <div>块</div> </body> </html>
块和内嵌转换
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */} ol,ul{list-style:none;padding:0;margin:0;} a{text-decoration:none;} img{border:none;} /* 默认样式重置 (css reset) */ span,div{background:blue; width:100px; height:100px;} span{display:block;} div{display:inline;} /* display:block; 显示为块 display:inline; 显示为内嵌 */ </style> </head> <body> <span>区分样式</span> <span>区分样式</span> <span>区分样式</span> <div>块</div> <div>块</div> <div>块</div> </body> </html>
翻页
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */} ol,ul{list-style:none;padding:0;margin:0;} a{text-decoration:none;} img{border:none;} /* 默认样式重置 (css reset) */ .pages{ height:60px; background:#e8e8e8; width:600px; margin:90px auto; text-align:center;} .pages a{ background:#fff; border:1px solid #cdcdcd;color:#333333; padding:0 8px 0 9px; height:28px; line-height:28px; display:inline-block;} .pages a:hover{border-color:red;color:red;} .pages .active{ font-weight:bold; background:#fcf9ea;cursor:text;} .pages .active:hover{border-color:#cdcdcd;color:#333333;} body{height:1500px; cursor:url(hand.cur),pointer;} </style> </head> <body> <div class="pages"> <a href="#">上一页</a> <a href="#">1</a> <a href="#">2</a> <a href="#" class="active">3</a> <a href="#">4</a> <a href="#">15</a> <a href="#">211</a> <a href="#">255…</a> <a href="#">下一页</a> </div> </body> </html>
效果