<!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{width:200px; height:100px; border:1px solid #00f; padding:10px; /* margin-top:100px; margin-bottom:200px; margin-left:0; margin-right:20px;*/ /* margin:100px;*/ /*margin:100px 30px;*/ /*margin:100px 30px 10px;*/ margin:10px 20px 30px 40px; } </style> </head> <body> <div class="box"><img src="sohulogo.png" /></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>padding</title> <style type="text/css"> .box{width:172px; height:88px; border:1px solid #060; margin:100px; padding-top:12px; text-align:center;} </style> </head> <body> <div class="box"><img src="sohulogo.png" /></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"> .box{width:220px; height:200px; border:1px solid #ccc; padding-left:12px; padding-right:6px;} </style> </head> <body> <div class="box"></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>padding不会影响盒子大小的情况</title> <style type="text/css"> .big{width:300px; height:200px; border:1px solid #096; margin:50px;} .small{border:1px solid #f00; height:100px; padding-left:50px;} </style> </head> <body> <div class="big"> <div class="small"></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>firebug</title> <style type="text/css"> .box{width:300px; height:200px; margin:100px; padding:50px; background-color:#093;} </style> </head> <body> <div class="box"></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"> body,div,ul,li,h1{margin:0; padding:0;} .box{width:300px; height:200px; background-color:#099; text-align:center; margin:0 auto;} h1{background-color:#963; width:300px;margin:0 auto;} li{background-color:#F00;} ul{background-color:#090; margin:0 auto;} </style> </head> <body> <div class="box">123</div> <h1>我的标题</h1> <ul> <li>测试</li> <li>测试</li> </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"> *{margin:0; padding:0;} body{font-size:12px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;} a{ text-decoration:none; color:#3c3c3c;} a:hover{color:#C60; text-decoration:underline;} dl{margin:50px auto; width:300px; border:1px solid #ccc;} dl dt{ height:35px;line-height:35px; padding-left:40px; border-bottom:1px solid #ccc; background:url(img/ic.png) no-repeat 15px center; font-size:14px;} dd{padding:15px 0;} ul{list-style:none; } ul li{text-align:center; height:25px; line-height:25px; background:url(img/videoNewsLeft.gif) no-repeat 30px center;} </style> </head> <body> <dl> <dt><strong>山东鲁能</strong></dt> <dd> <ul> <li><a href="#">山穷水尽！传闻背后的申花 王大雷适</a></li> <li><a href="#">山穷水尽！传闻背后的申花 王大雷适</a></li> <li><a href="#">山穷水尽！传闻背后的申花 王大雷适</a></li> <li><a href="#">山穷水尽！传闻背后的申花 王大雷适</a></li> <li><a href="#">山穷水尽！传闻背后的申花 王大雷适</a></li> <li><a href="#">山穷水尽！传闻背后的申花 王大雷适</a></li> </ul> </dd> </dl> </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"> body,div,ul,li,h1,h3,h4,h2,textarea,input,p{margin:0; padding:0;} body{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#3c3c3c;} a{color:#000; text-decoration:none;} a:hover{color:#F00; text-decoration:underline;} .box{ width:725px; height:220px; border:1px solid #abc; margin:0 auto; margin-top:100px; padding-left:25px; padding-top:30px;} .box h3 a{font-weight:normal; color:#F00; text-decoration:underline; margin-left:10px;} textarea{ width:670px; height:80px; border:1px solid #abc; margin:15px 0; padding:10px; font-size:12px; color:#CCC; resize:none;} p{margin-top:15px; color:red;} </style> </head> <body> <div class="box"> <h3>评论 <img src="images/110.jpg" /><a href="#">俺要打分</a></h3> <textarea>请输入您对的意见或者建议！！</textarea> <input type="image" src="images/tj.jpg" /> <p>暂时没有评论</p> </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"> *{margin:0; padding:0;} .box{width:300px; margin:100px auto;} .search{width:175px; height:20px; border:1px solid #ccc; color:#CCC; background:url(search_03.png) no-repeat 5px center; padding-left:25px;} label{color:#3c3c3c; font-size:14px;} </style> </head> <body> <div class="box"> <label for="sear">搜索一下：</label><input type="text" value="请输入搜索内容..." class="search" id="sear" /></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"> *{margin:0; padding:0;} body{font-size:14px; font-family:"微软雅黑"; color:#3c3c3c;} a{color:#4c4c4c; text-decoration:none;} a:hover{color:#FF8400;} .nav{width:100%; height:41px; border-top:3px solid #FF8500; border-bottom:1px solid #ccc; background-color:#fcfcfc;} .navin{width:980px; height:41px; line-height:41px;margin:0 auto;} .navin a{ display:inline-block; height:41px; padding:0 10px;} .navin a:hover{ background-color:#EDEEF0;} </style> </head> <body> <div class="nav"> <div class="navin"> <a href="#">设为首页</a> <a href="#">移动客户端</a> <a href="#">你好</a> <a href="#">pad版</a> </div> </div> </body> </html>