CSS+DIV布局
来源：互联网 发布：男士手表推荐 知乎 编辑：程序博客网 时间：2024/06/07 10:31
css+div可以实现很多复杂的布局，下面来看其中一个比较经典的布局：
我们可以把整个布局当做一个大的div，里面套着四个div，一个是头部，一个是导航栏，一个是主体（里面再分为两个div，利用浮动排成水平方向），一个是尾部。
代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">body{margin: 0;/*清除浏览器自带的margin,使后面设置container的margin生效*/}.container{height: 700px;width: 1000px;border: 1px solid black;box-sizing: border-box; /*边框内置,作为内容的一部分,不突出去*/margin:0 auto; /*前面一个参数0表示上下margin为0,后面auto表示左右居中*/}.header{width: 100%;height: 10%;border: 1px solid black;box-sizing: border-box;background-color: green;}.navbar{width: 100%;height: 5%;background-color: blue;border: 1px solid black;box-sizing: border-box;margin-top: 5px;}.maincontainer{margin-top: 5px;width: 100%;border: 1px solid black;box-sizing: border-box;//background-color: green;height: 75%;}.footer{height: 9%;background-color: blue;margin-top: 4px;box-sizing: border-box;}.left{border: 1px solid black;box-sizing: border-box;height: 100%;width: 30%;background-color: yellow;float: left;}.main{border: 1px solid black;box-sizing: border-box;height: 100%;width: 65%;background-color: deepskyblue;float: left;margin-left: 5%;}.footer{clear: both; /*其实这里可以不需要clear，因为footer是在maincontainer的外面，而不是在里面，如果是和left、main并列的则必须clear*/}</style></head><body><div class="container"><div class="header">头部</div><div class="navbar">导航条</div><div class="maincontainer"><div class="left">侧边栏</div><div class="main">内容</div></div><div class="footer">尾部</div></div></body></html>下面来实战模仿csdn的首页进行布局：
首先写出大致布局：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ margin: 0; background-color:darkgray; } .div1{ height: 40px; background-color: #333; } .div2{ height: 40px; background-color: white; } .container{ width: 1000px; height: 800px; background-color: wheat; margin: 0 auto; margin-top: 0px; clear: both; } /*.header{ width: 100%; background-color: green; height: 6%; } */ .navbar{ width: 100%; height: 10%; background-color: yellow; } .maincontainer{ width: 100%; height: 76%; margin-top: 2%; background-color: pink; } .footer{ width: 100%; height: 10%; margin-top: 2%; background-color: royalblue; } .main{ height: 100%; width: 70%; background-color: peru; float: left; } .right{ height: 100%; width: 28%; background-color: blueviolet; float: left; margin-left: 2%; } </style> </head> <body> <div class="div1"></div> <div class="div2"> </div> <div class="container"> <div class="navbar">导航</div> <div class="maincontainer"> <div class="main">内容</div> <div class="right">右侧</div> </div> <div class="footer">尾部</div> </div> </body> </html> 效果是这样的：
再逐步填充里面的内容：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ margin: 0; background-color:#e7ecef; } .div1{ height: 40px; background-color: #333; } .div2{ height: 40px; background-color: white; } .container{ width: 1200px; height: 800px; margin: 0 auto; margin-top: 0px; clear: both; margin-top: 10px; } .navbar{ width: 100%; height: 10%; } .navbar1{ width: 83%; height: 100%; float: left; background-image: url(img/dh.png); } .navbar2{ height: 100%; width: 15%; margin-left: 2%; float: left; border: 1px solid gainsboro; box-sizing: border-box; background-color: white; } .maincontainer{ width: 100%; height: 76%; margin-top: 2%; background-color: #e7ecef; } .footer{ height: 100px; text-align: center; background-color: white; vertical-align: middle; } .main{ height: 100%; width: 70%; background-color: white; float: left; } .right{ height: 100%; width: 28%; background-color: white; float: left; margin-left: 2%; } .bk{ margin-left: 16%; font-size: 25px; color: white; text-indent: 50px; } ul{ display: inline;/*变为行级元素，否则下移了*/ } ul li{ width: 100px; list-style-type: none; float: left; } a{ text-decoration: none; } a:link{ color: blue; } a:visited{ color: black; } a:hover{ color: green; } a:active{ color: yellow; } .csdn{ text-align: center; } .div21{ text-align: center; margin-left: 18%; font-size: 18px; } .main1{ width: 100%; height: 8%; background-color: white; border-bottom: 15px solid #e7ecef; } .main1_div1{ float: left; margin-left: 10%; font-size: 15px; } .main1_div2{ float: left; margin-left: 10%; font-size: 15px; } .main2{ width: 100%; height: 30%; //background-color: red; border-bottom: 1px dashed gainsboro; } .main2_left{ width: 20%; height: 100%; border-right: 1px dashed gainsboro; float: left; } .main2_left_top { width: 80%; height: 60%; margin-left: 10%; margin-right: 10%; margin-top: 10%; } .main2_left_top img{ width: 100%; height: 100%; border-radius: 50%; } .main2_left_bottom{ text-align: center; } .main2_right{ margin-left: 2%; width: 75%; height: 100%; float: left; } .float_left{ float: left; } .float_right{ float: left; margin-left: 20%; } .right1{ width: 100%; height: 30%; border-bottom: 10px solid #e7ecef; margin: auto; } .right2{ width: 100%; height: 30%; border-bottom: 10px solid #e7ecef; } .right3{ width: 100%; height: 30%; } .right1_1{ width: 40%; height: 60%; margin-left: 30%;/*左右边距相等，即可居中*/ margin-right: 30%; margin-top: 5%; } .right1_1 img{ width: 100%; height: 100%; border-radius: 50%; } .right1_2{ height: 10%; text-align: center; } .right1_3{ height: 10%; text-align: center; } </style> </head> <body> <div class="div1"> <div class="bk">博客</div> </div> <div class="div2"> <div class="div21"> <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></ul></div> </div> <div class="container"> <div class="navbar"> <div class="navbar1"></div> <div class="navbar2"><p class="csdn">CSDN</p></div> </div> <div class="maincontainer"> <div class="main"> <div class="main1"> <div class="main1_div1"><a href="">关于csdn新皮肤的说明</a></div> <div class="main1_div2"><a href="">关于AI</a></div> </div> <div class="main2"> <div class="main2_left"> <div class="main2_left_top"> <img src="img/wawa.png" /> </div> <div class="main2_left_bottom">娃娃</div> </div> <div class="main2_right"> <h3>史上最难的java面试题</h3> <div> <a href="">简书 匠心零度 转载请注明原创出处，谢谢！ 无意中了解到如下题目，觉得蛮好。 题目如下：public class TestSync2 implements Runnable { int b...</a> </div> <div class="float_left"><ul> <li><a href="">云计算</a></li> <li><a href="">高并发</a></li> </ul> </div> <div class="float_right">昨天</div> </div> </div> <div class="main2"> <div class="main2_left"> <div class="main2_left_top"> <img src="img/wawa.png" /> </div> <div class="main2_left_bottom">娃娃</div> </div> <div class="main2_right"> <h3>史上最难的java面试题</h3> <div> <a href="">简书 匠心零度 转载请注明原创出处，谢谢！ 无意中了解到如下题目，觉得蛮好。 题目如下：public class TestSync2 implements Runnable { int b...</a> </div> <div class="float_left"><ul> <li><a href="">云计算</a></li> <li><a href="">高并发</a></li> </ul> </div> <div class="float_right">昨天</div> </div> </div> <div class="main2"> <div class="main2_left"> <div class="main2_left_top"> <img src="img/wawa.png" /> </div> <div class="main2_left_bottom">娃娃</div> </div> <div class="main2_right"> <h3>史上最难的java面试题</h3> <div> <a href="">简书 匠心零度 转载请注明原创出处，谢谢！ 无意中了解到如下题目，觉得蛮好。 题目如下：public class TestSync2 implements Runnable { int b...</a> </div> <div class="float_left"><ul> <li><a href="">云计算</a></li> <li><a href="">高并发</a></li> </ul> </div> <div class="float_right">昨天</div> </div> </div> </div> <div class="right"> <div class="right1"> <div class="right1_1"><img src="img/p.png"></div> <div class="right1_2"><h4>宝宝</h4></div> <div class="right1_3">精通python</div> </div> <div class="right1"> <div class="right1_1"><img src="img/p.png"></div> <div class="right1_2"><h4>宝宝</h4></div> <div class="right1_3">精通python</div> </div> <div class="right1"> <div class="right1_1"><img src="img/p.png"></div> <div class="right1_2"><h4>宝宝</h4></div> <div class="right1_3">精通python</div> </div></div> </div> </div> <div class="footer">尾部</div> </body> </html> 大致效果如下：
再仿淘宝首页：
布局代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">body{margin: 0px;background-color:#e7ecef; }.div1{height: 40px;background-color: lightgrey;}.div2{height: 120px;background-color: #f5f5f5;}.div3{height: 30px;background-color: orange;}.container{//width: 1204px;height: 2000px;background-color: pink;margin: 0 auto;margin-left: 12%;margin-right: 12%;}.footer{height: 265px;background-color: grey;}.bottom{height: 245px;background-color: red;}.div1_left{width: 30%;height: 100%;background-color: red;margin-left: 12%;float: left;border: 1px solid black;box-sizing: border-box;}.div1_right{height: 100%;width: 40%;background-color: blue;margin-left: 15%;float: left;border: 1px solid black;box-sizing: border-box;}.div2_left{height: 100%;width: 12%;background-color: purple;float: left;margin-left: 12%;border: 1px solid black;box-sizing: border-box;}.div2_mid{height: 100%;width: 45%;background-color: blue;float: left;margin-left: 6%;border: 1px solid black;box-sizing: border-box;}.div2_right{height: 100%;width: 10%;background-color: skyblue;float: left;margin-left: 6%;border: 1px solid black;box-sizing: border-box;}.div3_1{height: 100%;width: 12%;margin-left: 12%;float: left;border: 1px solid black;box-sizing: border-box;background-color: greenyellow;}.div3_2{height: 100%;width: 15%;background-color: powderblue;float: left;border: 1px solid black;box-sizing: border-box;}.div3_3{height: 100%;width: 25%;background-color: darkcyan;float: left;border: 1px solid black;box-sizing: border-box;}.div3_4{height: 100%;width: 20%;background-color: darkgoldenrod;float: left;border: 1px solid black;box-sizing: border-box;}.main1{width: 100%;height: 32%;background-color: #e7ecef;border-bottom: 10px solid #e7ecef;}.main1_left{width: 70%;height: 100%;float: left;background-color: #e7ecef;border: 1px solid black;box-sizing: border-box;}.main1_right{width: 29%;height: 100%;float: right;background-color: #e7ecef;border: 1px solid black;box-sizing: border-box;}.main1_left_top{width:100%;height: 80%;border: 1px solid black;box-sizing: border-box;background-color: #e7ecef;}.main1_left_bottom{width:100%;height: 18%;border: 1px solid black;box-sizing: border-box;background-color: brown;margin-top: 2%;}.main1_left_top_left{height: 100%;width: 22.5%;float: left;background-color: deepskyblue;border: 1px solid black;box-sizing: border-box;}.main1_left_top_right{height: 100%;width: 77.5%;float: right;background-color: #e7ecef;}.main1_left_top_right_left{height: 97%;width: 63%;background-color: #e7ecef;float: left;margin: 2%;margin-bottom: 0px;border: 1px solid black;box-sizing: border-box;}.main1_left_top_right_right{height: 97%;width: 30%;background-color: #e7ecef;float: right;margin-top: 2%;margin-right: 2%;border: 1px solid black;box-sizing: border-box;}.main1_left_top_right_left_top{width: 100%;height: 48%;border: 1px solid black;box-sizing: border-box;background-color: pink;}.main1_left_top_right_left_bottom{width: 100%;height: 48%;border: 1px solid black;box-sizing: border-box;background-color: deeppink;}.main1_left_top_right_left_mid{width: 100%;height: 4%;}.main1_right_1{width: 100%;height: 20%;box-sizing: border-box;border: 1px solid black;background-color: deeppink;}.main1_right_2{width: 100%;height: 5%;box-sizing: border-box;border: 1px solid black;background-color: red;}.main1_right_3{width: 100%;height: 60%;box-sizing: border-box;border: 1px solid black;background-color: blue;}.main1_right_4{width: 100%;height: 15%;box-sizing: border-box;border: 1px solid black;background-color: deeppink;}</style></head><body><div class="div1"><div class="div1_left"></div><div class="div1_right"></div></div><div class="div2"><div class="div2_left"></div><div class="div2_mid"></div><div class="div2_right"></div></div><div class="div3"><div class="div3_1"></div><div class="div3_2"></div><div class="div3_3"></div><div class="div3_4"></div></div><div class="container"><div class="main1"><div class="main1_left"><div class="main1_left_top"><div class="main1_left_top_left"></div><div class="main1_left_top_right"><div class="main1_left_top_right_left"><div class="main1_left_top_right_left_top"></div><div class="main1_left_top_right_left_mid"></div><div class="main1_left_top_right_left_bottom"></div></div><div class="main1_left_top_right_right"><div class="main1_left_top_right_left_top"></div><div class="main1_left_top_right_left_mid"></div><div class="main1_left_top_right_left_bottom"></div></div></div></div><div class="main1_left_bottom"></div></div><div class="main1_right"><div class="main1_right_1"></div><div class="main1_right_2"></div><div class="main1_right_3"></div><div class="main1_right_4"></div></div></div></div><div class="footer"></div><div class="bottom"></div></body></html>效果如下：
大致填充如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">body{margin: 0px;background-color:#e7ecef; }.div1{height: 40px;background-color: orangered;}.div2{height: 120px;background-color: #f5f5f5;}.div3{height: 30px;background-color: orange;}.container{//width: 1204px;height: 2000px;background-color: pink;margin: 0 auto;margin-left: 12%;margin-right: 12%;}.floatdiv{position: fixed;top:200px;right: 100px;background-color: white;text-align: center;width: 100px;height: 500px;}.footer{height: 265px;background-color: grey;}.bottom{height: 245px;background-color: red;}.div1_left{width: 30%;height: 100%;//background-color: red;margin-left: 12%;float: left;//border: 1px solid black;box-sizing: border-box;vertical-align: middle;font-size: 16px;}.div1_right{height: 100%;width: 40%;margin-left: 15%;float: left;box-sizing: border-box;}.div2_left{height: 100%;width: 12%;//background-color: purple;float: left;margin-left: 12%;//border: 1px solid black;box-sizing: border-box;}.div2_mid{height: 100%;width: 45%;//background-color: blue;float: left;margin-left: 6%;//border: 1px solid black;box-sizing: border-box;}.div2_right{height: 90%;width: 6%;//background-color: skyblue;float: left;margin-left: 6%;//border: 1px solid black;box-sizing: border-box;margin-top: 3px;}.div3_1{height: 100%;width: 12%;margin-left: 12%;float: left;//border: 1px solid black;box-sizing: border-box;background-color: orangered;text-align: center;}.div3_2{height: 100%;width: 15%;//background-color: powderblue;float: left;//border: 1px solid black;box-sizing: border-box;}.div3_3{height: 100%;width: 25%;//background-color: darkcyan;float: left;//border: 1px solid black;box-sizing: border-box;}.div3_4{height: 100%;width: 20%;//background-color: darkgoldenrod;float: left;//border: 1px solid black;box-sizing: border-box;}.main1{width: 100%;height: 32%;background-color: #e7ecef;border-bottom: 10px solid #e7ecef;}.main1_left{width: 70%;height: 100%;float: left;background-color: #e7ecef;//border: 1px solid black;box-sizing: border-box;}.main1_right{width: 29%;height: 100%;float: right;background-color: #e7ecef;//border: 1px solid black;box-sizing: border-box;}.main1_left_top{width:100%;height: 80%;//border: 1px solid black;box-sizing: border-box;background-color: #e7ecef;}.main1_left_bottom{width:100%;height: 18%;//border: 1px solid black;//box-sizing: border-box;//background-color: brown;margin-top: 2%;}.main1_left_top_left{height: 100%;width: 22.5%;float: left;//background-color: deepskyblue;border: 1px solid orangered;box-sizing: border-box;}.main1_left_top_right{height: 100%;width: 77.5%;float: right;background-color: #e7ecef;}.main1_left_top_right_left{height: 97%;width: 63%;background-color: #e7ecef;float: left;margin: 2%;margin-bottom: 0px;//border: 1px solid black;box-sizing: border-box;}.main1_left_top_right_right{height: 97%;width: 30%;background-color: #e7ecef;float: right;margin-top: 2%;margin-right: 2%;//border: 1px solid black;box-sizing: border-box;}.main1_left_top_right_left_top{width: 100%;height: 48%;//border: 1px solid black;box-sizing: border-box;background-color: pink;}.main1_left_top_right_left_bottom{width: 100%;height: 48%;//border: 1px solid black;box-sizing: border-box;background-color: deeppink;}.main1_left_top_right_left_mid{width: 100%;height: 4%;}.main1_right_1{width: 100%;height: 20%;box-sizing: border-box;//border: 1px solid black;background-color: white;}.main1_right_2{width: 100%;height: 5%;box-sizing: border-box;//border: 1px solid black;background-color: lightpink;text-align: center;}.main1_right_3{width: 100%;height: 60%;box-sizing: border-box;//border: 1px solid black;background-color: white;}.main1_right_4{width: 100%;height: 15%;box-sizing: border-box;//border: 1px solid black;background-color: white;}ul{list-style-type: none;display: inline;}.div2_mid_bottom ul li{float: left;width: 10%;}/*ul li{width: 100px;float: left;}*/a{text-decoration: none;}a:link{ color: blue; } a:visited{ color: black; } a:hover{ color: green; } a:active{ color: yellow; } .reda { color: red; } .nav li{ width: 12%; float: left; } .nav li:nth-child(2){ list-style-image: url(img/car.png); } .nav li:nth-child(3){ list-style-image: url(img/sc.png); } .nav li:nth-child(5){ list-style-type: |; } .nav li:last-child{ list-style-image: url(img/dhj.png); } .div2_left img{ width: 100%; height: 100%; } .div2_right img{ width: 100%; height: 100%; } .div2_mid_top{ width: 100%; height: 20%; margin-top: 2%; //background-color: red; box-sizing: border-box;//border: 1px solid black; } .div2_mid_mid{ width: 100%; height: 40%; //background-color: black; } .div2_mid_bottom{ width: 100%; height: 20%; //background-color: pink; } .div2_mid_top a:visited{ color: orangered; } .find{ width: 85%; height: 100%; margin-right: 0px; border-top-left-radius: 5%; border-bottom-left-radius: 5%; } .btn{ width: 10%; height: 100%; background-color: orangered; border-bottom-right-radius: 40%; border-top-right-radius: 40%; } .theam{ color: white; font-size: 18px; font-family: 宋体; } .div2_mid_bottom ul{ display: inline; } .div2_mid_bottom li:nth-child(3) a:visited{ color: orangered; } .div2_mid_bottom li:last-child{ margin-left: 40px; } .div3_2 ul li{ float: left; width: 25%; } .div3_3 ul li{ float: left; width: 15%; } .div3_4 ul li{ float: left; width: 25%; } .div3_2 a:visited{ color: white; font-size: 20px; font-family: 宋体; } .div3_3 a:visited{ color: white; font-size: 20px; font-family: 宋体; } .div3_4 a:visited{ color: white; font-size: 20px; font-family: 宋体; } .main1_left_top_right_left_top img{ width: 100%; height: 100%; } .main1_left_top_right_left_bottom img{ width: 100%; height: 100%; } .main1_left_top_right_right_bottom img{ width: 100%; height: 100%; } .main1_left_top_right_right_top img{ width: 100%; height: 100%; } .main1_right_1_1{ width: 30%; height: 28%; margin-left: 35%; margin-right: 35%; //background-color: red; } .main1_right_1_2{ width: 100%; height: 20%; //background-color: yellow; text-align: center; } .main1_right_1_3{ width: 70%; height: 20%; //background-color: deeppink; margin-left: 20%; margin-right: 10%; } .main1_right_1_4{ width: 80%; height: 25%; //background-color: orange; //margin-left: 20%; margin: auto; } img{ width: 100%; height: 100%; border-radius: 50%; } .main1_right_1_3 li{ list-style-image: url(img/jb.png); } .main1_right_1_3 li:last-child{ //margin-left: 10%; } .main1_right_1_3 ul li{width: 40%;float: left;color: red;}.main1_right_1_4 input{background-color: orangered;height: 100%;width: 30%;border-radius: 15%;}.main1_right_4_top{width: 100%;height: 40%;//background-color: red;}.main1_right_4_bottom{width: 100%;height: 60%;//background-color: blue;}.main1_right_4_top_left{float: left;}.main1_right_4_top_right{float: right;}.t{border: solid;width: 100%;height: 90%;margin-bottom: 10%;}.t tr{width: 100%;height: 50%;}.t td{width:20% ;height: 100%;}.timg{width: 100%;height: 100%;border-radius: 10%;}.main1_left_bottom_left{width: 30%;height: 100%;float: left;}.main1_left_bottom_left img{width: 100%;height: 100%;border-radius: 0px;}.main1_left_bottom_right{width: 70%;height: 100%;float: left;}.main1_left_bottom_right img{width: 100%;height: 100%;border-radius: 0px;}</style></head><body><div class="div1"><div class="div1_left">中国大陆 <a href="" class="reda"><font class="reda">亲，请登录</font></a> <a href="">免费注册</a> <a href="">手机逛淘宝</a></div><div class="div1_right"><ul class="nav"><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></div><div class="div2"><div class="div2_left"><img src="img/taobao.png" /></div><div class="div2_mid"><div class="div2_mid_top"><!--<ul><li><a href="">宝贝</a></li><li><a href="">天猫</a></li><li><a href="">店铺</a></li></ul>--><a href="">宝贝</a> <a href="">天猫</a> <a href="">店铺</a></div><div class="div2_mid_mid"><input type="text" class="find"/><input type="button" value="搜索" class="btn" /></div><div class="div2_mid_bottom"><ul><li><a href="">新款连衣裙</a></li><li><a href="">四件套</a></li><li><a href="">潮流T恤</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></div><div class="div2_right"><img src="img/phone.png" /></div></div><div class="div3"><div class="div3_1"><font class="theam"><b>主题市场</b></font></div><div class="div3_2"><ul><li><a href=""><b>天猫</b></a></li><li><a href=""><b>聚划算</b></a></li><li><a href=""><b>天猫超市</b></a></li></ul></div><div class="div3_3">| <ul><li><a href=""><b>淘抢购</b></a></li><li><a href=""><b>电器城</b></a></li><li><a href=""><b>司法拍卖</b></a></li><li><a href=""><b>中国制造</b></a></li><li><a href=""><b>兴农扶贫</b></a></li></ul></div><div class="div3_4"><ul><li><a href=""><b>飞猪旅行</b></a></li><li><a href=""><b>智能生活</b></a></li><li><a href=""><b>苏宁易购</b></a></li></ul></div></div><div class="container"><div class="main1"><div class="main1_left"><div class="main1_left_top"><div class="main1_left_top_left"></div><div class="main1_left_top_right"><div class="main1_left_top_right_left"><div class="main1_left_top_right_left_top"><img src="img/11.png" /></div><div class="main1_left_top_right_left_mid"></div><div class="main1_left_top_right_left_bottom"><img src="img/12.png" /></div></div><div class="main1_left_top_right_right"><div class="main1_left_top_right_left_top"><img src="img/13.png" /></div><div class="main1_left_top_right_left_mid"></div><div class="main1_left_top_right_left_bottom"><img src="img/14.png" /></div></div></div></div><div class="main1_left_bottom"><div class="main1_left_bottom_left"><img src="img/tt.png" /></div><div class="main1_left_bottom_right"><img src="img/hw.png" /></div></div></div><div class="main1_right"><div class="main1_right_1"><div class="main1_right_1_1"><img src="img/tx.png" /></div><div class="main1_right_1_2">Hi!你好</div><div class="main1_right_1_3"><ul><li><a href="">领淘金币抵钱</a></li><li><a href="">会员俱乐部</a></li></ul></div><div class="main1_right_1_4"><input type="button" value="登录" /><input type="button" value="注册" /><input type="button" value="开店" /></div></div><div class="main1_right_2">网上有害信息举报专区</div><div class="main1_right_3"></div><div class="main1_right_4"><div class="main1_right_4_top"><div class="main1_right_4_top_left"><a href=""><b>阿里APP</b></a></div><div class="main1_right_4_top_right"><a href="">更多>></a></div></div><div class="main1_right_4_bottom"><table id="t"><tr><td><a href=""><img src="img/taobao.png" class="timg"></a></td><td><a href=""><img src="img/taobao.png" class="timg"></a></td><td><a href=""><img src="img/taobao.png" class="timg"></a></td><td><a href=""><img src="img/taobao.png" class="timg"></a></td><td><a href=""><img src="img/taobao.png" class="timg"></a></td></tr><tr><td><a href=""><img src="img/taobao.png" class="timg"></a></td><td><a href=""><img src="img/taobao.png" class="timg"></a></td><td><a href=""><img src="img/taobao.png" class="timg"> </a></td><td><a href=""><img src="img/taobao.png" class="timg"></a></td><td><a href=""><img src="img/taobao.png" class="timg"></a></td></tr></table></div></div></div></div></div><div class="floatdiv">爱淘宝</div><div class="footer"></div><div class="bottom"></div></body></html>效果：
阅读全文
0 0
- DIV+CSS DIV居中布局
- div+css布局入门
- div+css布局漫谈
- div+css布局漫谈
- Div+CSS布局入门教程
- div＋css布局
- Div+Css布局漫谈
- div+css布局漫谈
- div+css布局实例
- div+css布局漫谈
- div+css布局漫谈
- CSS+DIV布局教程
- div+css布局入门
- Div+CSS布局入门教程
- Div+CSS布局入门
- Div+CSS布局入门教程
- Div+CSS布局入门教程
- Div+CSS布局入门教程
- Java SE （一）——标识符、关键字、类型
- android 自定义组合控件
- Android自定义手势密码
- 进行Heroku部署时--配置数据库出现：no app specified
- 基于nginx的中间件架构（2）nginx的介绍与安装
- CSS+DIV布局
- 自己的总结
- boost之线程池使用实例
- 计蒜客————爬楼梯
- Java高并发 二 [多线程基础]
- hibernate工作原理及作用
- 修复ubuntu中检测到系统程序错误
- 基于HTML5的WebGL实现json和echarts图表展现在同一个界面
- spring Cloud之服务提供者和服务消费者
