<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>标签指定式</title> <style type="text/css"> div.red{color:#f00;} </style> </head> <body> <p class="red">上海</p> <p>上海</p> <p>上海</p> <div class="red">上海</div> <div>上海</div> <font>字体</font> <span>字体</span> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>后代选择器</title> <style> .lv strong{color:#0F0;} div strong{color:#009;} strong{color:#F00;} </style> </head> <body> <p>上海 <strong>xxxx</strong></p> <p>上海 <strong>xxxx</strong></p> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div class="lv"> 上海 <strong>xxxx</strong></div> <strong>xxxx</strong> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>并集选择器</title> <style type="text/css"> /*p{color:#F00; } span{color:#F00;} ul{color:#F00;}*/ /*p,span,ul{color:#F00;}*/ *{color:#F00;} *{margin:0; padding:0;} </style> </head> <body> <p>上海 <strong>xxxx</strong></p> <p>上海 <strong>xxxx</strong></p> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div> 上海 <strong>xxxx</strong></div> <div class="lv"> 上海 <strong>xxxx</strong></div> <span><strong>xxxx</strong></span> <span><strong>xxxx</strong></span> <ul><strong>xxxx</strong></ul> <ul><strong>xxxx</strong></ul> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>伪类选择器</title> <style type="text/css"> a:link{color:#000; text-decoration:none; }/*文本修饰为没有下划线*/ a:visited{color:#F90; text-decoration:none;} /*点击后，为黄色 没有下划线*/ a:hover{color:#F00; text-decoration:underline;} /*鼠标经过的时候，为红色下划线*/ a:active{color:#00ff00; text-decoration:underline;} /*鼠标点击的时候，为绿色 下划线*/ /*可以这么写：*/ a{color:#000; text-decoration:none;} a:hover{color:#F00; text-decoration:underline;} </style> </head> <body> <a href="#">百度</a> <a href="#">新浪</a> <a href="#">搜狐</a> <a href="http://www.huawei.com">化为</a> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航</title> <style type="text/css"> div{text-align:center;} div a{width:88px; height:44px; background-image:url(gray.JPG);display:inline-block; color:#FFF; text-decoration:none; line-height:44px;} div a:hover{background-image:url(red.JPG); color:#F90;} </style> </head> <body> <div> <a href="#">首页</a> <a href="#">相册</a> <a href="#">作品</a> <a href="#">生活</a> <a href="#">展示</a> <a href="#">留言</a> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>背景</title> <style type="text/css"> html,body{ /* background-image:url(bg4.jpg); background-repeat:no-repeat; background-position:right bottom; background-color:#eeeee8; background-position:100px 50px;*/ /* 简写：*/ /* background:url(bg4.jpg) 100px 50px no-repeat #eeeee8;*/ background:url(013.jpg) no-repeat left top fixed;} </style> </head> <body> <p>asf</p> <p>sadf</p> <p>asdfas</p> <p>df</p> <p>asdf</p> <p>asd</p> <p>fas</p> <p>df</p> <p>asdf</p> <p>as</p> <p>fas</p> <p>df</p> <p>asdf</p> <p>as</p> <p>df</p> <p>asdf</p> <p>asd</p> <p>fas</p> <p>dfadsfa</p> <p>asd</p> <p>f</p> <p>asdf</p> <p>asdf</p> <p>a</p> <p>fdas</p> <p>fa</p> <p>sf</p> <p>asd</p> <p>fas</p> <p>fas</p> <p>f</p> <p>asdf</p> <p>sa</p> <p>asdf</p> <p>asdf</p> <p>asf</p> <p>asf</p> <p>asf</p> <p>asfd</p> <p> </p> <p>sdf</p> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>恭喜</title> <style type="text/css"> div.three{ background-attachment:fixed;} .one{height:927px; background:url(img/left.jpg) no-repeat ;} .two{height:927px; background:url(img/right.jpg) right top no-repeat;} .three{height:927px; background:url(img/top.jpg) no-repeat top center; } .four{height:927px; background:url(img/bottom.jpg) no-repeat center center;} </style> </head> <body> <div class="one"> <div class="two"> <div class="three"> <div class="four"></div> </div> </div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body,a,li{font-size:12px; text-decoration:none; list-style:none;} </style> </head> <body> <ul> <li>测试</li> <li>测试</li> <li>测试</li> </ul> <a href="#">测试</a> <a href="#">测试</a> <a href="#">测试</a> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>购物车</title> <style type="text/css"> .box{text-align:center;} .box a{ display:inline-block;width:67px; height:32px; background:url(110.png) no-repeat top left;} .box a:hover{ background-position:bottom;} </style> </head> <body> <div class="box"> <a href="#"></a> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>边框线</title> <style type="text/css"> div{width:200px; height:100px; /*border-color:#f00; border-1px; border-style:dashed;*/ /*border:1px solid #0F0;*/ border-top:1px solid #F00; border-bottom:1px solid #0F0;} </style> </head> <body> <div>asdfasdf</div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表单</title> <style type="text/css"> input{border:none; border-bottom:1px dashed #f00; } </style> </head> <body> 用户名：<input type="text" /><br /> 密 码:<input type="password" /> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>列表</title> <style type="text/css"> .hd{height:35px; width:238px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; border-bottom:0; text-indent:2em; font-weight:bold; line-height:35px;} .bd{height:130px; width:238px; border:1px solid #D9E0EE; } .bd ul li{line-height:24px; background:url(hhh.jpg) no-repeat left center; text-indent:1em;} .bd ul{list-style:none; /*清除列表样式*/} .bd a{font-size:12px; text-decoration:none; color:#3c3c3c;} .bd a:hover{color:#FF8400; text-decoration:underline;} </style> </head> <body> <div class="hd">行业动态</div> <div class="bd"> <ul> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> <li><a href="#">不老女神-伊能静的减肥秘诀！！</a></li> </ul> </div> </body> </html>
转载请备注。