京东切分三框布局：
效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body{ 8 margin: 0px; 9 padding: 0px; 10 background-color: #f0f3ef; 11 } 12 13 .title{ 14 text-align: center; 15 font-family: 'fzzzh'; 16 color: #222; 17 } 18 .container{ 19 background-color: red; 20 width: 1190px; 21 height: 450px; 22 margin: 0 auto; 23 } 24 .left,.center,.right{ 25 width: 390px; 26 height: 450px; 27 float: left; 28 29 background-color: white; 30 } 31 .center,.left{ 32 margin-right: 10px; 33 } 34 </style> 35 </head> 36 <body> 37 <h3 class="title">---居家优品---</h3> 38 <div class="container"> 39 <div class="left"></div> 40 <div class="center"></div> 41 <div class="right"></div> 42 43 44 45 </div> 46 </body> 47 </html>
利用绝对定位和相对定位开发第一列
效果：
使用了相对定位与绝对定位：
.border{
340px;
height: 420px;
border: 5px solid black;
position: relative;/*相对定位,相对于自身原来的位置.原来的框还在文档流里面占有空间*/
top: 20px;
}
.border img{
position: absolute;/*绝对定位的元素的位置相对于最近的已定位元素*/
bottom: 25px;
left:45px;
}
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body{ 8 margin: 0px; 9 padding: 0px; 10 background-color: #f0f3ef; 11 } 12 13 .title{ 14 text-align: center; 15 font-family: 'fzzzh'; 16 color: #222; 17 } 18 .container{ 19 20 width: 1190px; 21 height: 450px; 22 margin: 0 auto; 23 } 24 .left,.center,.right{ 25 width: 390px; 26 height: 450px; 27 float: left; 28 29 background-color: white; 30 } 31 .left{ 32 background-color: transparent; 33 } 34 .center,.left{ 35 margin-right: 10px; 36 } 37 .border{ 38 width: 340px; 39 height: 420px; 40 border: 5px solid black; 41 position: relative;/*相对定位,相对于自身原来的位置.原来的框还在文档流里面占有空间*/ 42 top: 20px; 43 } 44 .border img{ 45 position: absolute;/*绝对定位的元素的位置相对于最近的已定位元素*/ 46 bottom: 25px;/*靠近盒子最顶端*/ 47 left:45px; 48 } 49 </style> 50 </head> 51 <body> 52 <h3 class="title">---居家优品---</h3> 53 <div class="container"> 54 <div class="left"> 55 <div class="border"> 56 <img src="../images/left.jpg" /> 57 58 59 </div> 60 61 </div> 62 <div class="center"></div> 63 <div class="right"></div> 64 65 66 67 </div> 68 </body> 69 </html>
开发中间与右边的布局：
最终效果：
最终代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0px; padding: 0px; background-color: #f0f3ef; } .title{ text-align: center; font-family: 'fzzzh'; color: #222; } .container{ width: 1190px; height: 450px; margin: 0 auto; } .left,.center,.right{ width: 390px; height: 450px; float: left; background-color: white; } .left{ background-color: transparent; } .center,.left{ margin-right: 10px; } .border{ width: 340px; height: 420px; border: 5px solid black; position: relative;/*相对定位,相对于自身原来的位置.原来的框还在文档流里面占有空间*/ top: 20px; } .border img{ position: absolute;/*绝对定位的元素的位置相对于最近的已定位元素*/ bottom: 25px; left:45px; } .box_hd{ width: 150px; height: 60px; padding: 0 20px; line-height: 44px; } .box_hd h3{ margin: 0px; padding: 0px; font-size: 22px; line-height: 44px; font-weight: normal; margin-top: 8px; } .box_bd{ padding: 0 20px; } .box_bd img{ margin-bottom: 7px; margin-right: 2px; } .last{ margin: 0px; } </style> </head> <body> <h3 class="title">---居家优品---</h3> <div class="container"> <div class="left"> <div class="border"> <img src="../images/left.jpg" /> </div> </div> <div class="center"> <div class="box_hd"> <h3> 家电馆</h3> </div> <div class="box_bd"> <img src="../images/01.jpg" /> <img src="../images/02.jpg" /> <img class="last" src="../images/03.jpg" /> </div> </div> <div class="right"> <div class="box_hd"> <h3> 家电馆</h3> </div> <div class="box_bd"> <img src="../images/01.jpg" /> <img src="../images/02.jpg" /> <img class="last" src="../images/03.jpg" /> </div> </div> </div> </body> </html>
附：图片素材来源于京东页面