<!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"> .top{width:300px; height:150px; background-color:#F00; margin-bottom:50px;} .bottom{width:300px; height:150px; background-color:#0F0; margin-top:100px;} </style> </head> <body> <div class="top"></div> <div class="bottom"></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"> .father{width:300px; height:150px; background-color:#F00; overflow:hidden;} .son{width:100px; height:50px; background-color:#0F0; margin-top:50px; } </style> </head> <body> <div class="father"> <div class="son"></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 type="text/css"> .top,.bottom{width:300px; height:150px; background-color:#F00;} .top{float:left;} .bottom{background-color:#0F0; float:right;} </style> </head> <body> <div class="top"> </div> <div class="bottom"></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"> .one,.two{width:200px; height:100px; background-color:#900; float:left;} .two{background-color:#0F0;} .three{width:200px; height:120px; background-color:#00F;} </style> </head> <body> <div class="one"> </div> <div class="two"> </div> <div class="three"></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; color:#3c3c3c;} a{color:#3c3c3c; text-decoration:none;} ul{list-style:none; margin:50px auto; width:660px;} ul li{float:left; width:110px; height:42px;} ul li a{ display:block; width:110px; height:42px; text-align:center; line-height:42px;} ul li a:hover{background-color:red;} </style> </head> <body> <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> </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:"微软雅黑"} a{color:#3c3c3c; text-decoration:none;} .box{width:500px; height:300px; border:1px solid #093; margin:50px auto;} .box ul{list-style:none; margin:30px 10px;} .box ul li{float:left; width:80px; height:40px; text-align:center; line-height:40px;} </style> </head> <body> <div class="box"> <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> <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> <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> <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> <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> <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> </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>auto</title> <style type="text/css"> .box{width:800px; border:1px solid #f00; margin:0 auto;} .in{width:200px; height:200px; background-color:#F00; margin-left:auto;} </style> </head> <body> <div class="box"> <div class="in"></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 type="text/css"> body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;} body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;} a{text-decoration:none; color:#3c3c3c;} a:hover{color:#f00; text-decoration:underline;} .top{width:1180px; height:80px; background-color:#F00; margin:0 auto;} .nav{width:1180px; height:35px; background-color:#0F0; margin:0 auto;} .banner{width:100%; height:300px; background-color:#00F;} .main{width:1180px; height:500px; background-color:#FF0; margin:0 auto;} .footer{width:1180px; height:120px; background-color:#0FF; margin:0 auto;} </style> </head> <body> <div class="top"></div> <div class="nav"></div> <div class="banner"></div> <div class="main"></div> <div class="footer"></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,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;} body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;} a{text-decoration:none; color:#3c3c3c;} a:hover{color:#f00; text-decoration:underline;} #top,#nav,#banner,#main,#footer{width:1000px; margin:1px auto;} #top{height:80px; background-color:#F00;} #nav{height:35px; background-color:#0f0;} #banner{height:150px; background-color:#00F;} .left{width:300px; height:500px; background-color:#099; float:left; } .right{width:699px; height:500px; background-color:#396; float:right;} </style> </head> <body> <div id="top"></div> <div id="nav"></div> <div id="banner"></div> <div id="main"> <div class="left"></div> <div class="right"></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 type="text/css"> body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;} body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;} a{text-decoration:none; color:#690;} a:hover{color:#fff; text-decoration:none;} ul{list-style:none;} .banner{width:760px; height:150px; margin:0 auto; background-image:url(banner_bg.jpg);} .nav{height:32px; width:760px; margin:0 auto; background-image:url(button1_bg.jpg);} .nav li{float:left; width:80px; height:32px; background:url(button1.jpg) no-repeat;} .nav a{display:block; width:80px; height:32px; text-align:center; line-height:32px;} .nav a:hover{background:url(button2.jpg) no-repeat;} .main{height:500px; background-color:#6C6; width:760px; margin:0 auto;} </style> </head> <body> <div class="banner"> <img src="banner1.jpg" width="600" height="150" /> </div> <!--这是banner部分--> <div class="nav"> <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> </div> <!-- 这是nav 部分 --> <div class="main"> </div> </body> </html>
转载请备注。