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>
效果
