京东案例开发之居家优品

分类: IT文章 • 2023-12-02 16:06:43

京东切分三框布局：

效果：

京东案例开发之居家优品

代码：

 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>

京东切分三框布局.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>

利用绝对定位和相对定位开发第一列.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>

京东案例开发之居家优品.html

附：图片素材来源于京东页面

京东案例开发之居家优品

相关推荐