CSS作业

作者: 蘑菇plus | 来源:发表于2018-08-18 11:04 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                #total{
                    margin: auto;
                    position: relative;
                }
                
                #branch1{
                position: relative;
                height: 400px;
                display: block;
                
                }
                
               #branch1 div{
                position: relative;
                right: 10px;
                float: left;
                
               }
               #branch1 .content2{
                border:5px solid white;
                padding: 5px;
                padding-left: 10px;
                
               }
               #branch1 .content3{
                padding-left: 5px;
               }
               
               
               
               #branch2{
                position: relative;
                height: 400px;
                display: block;
                
                }
                
               #branch2 div{
                position: relative;
                right: 10px;
                float: left;
                
               }
               
               #branch2 .content4{
                padding-right:30px ;
               }
               
               #branch2 .content5{
                border:5px solid white;
                padding: 10px;
                padding-left: 10px;
                
               }
               #branch2 .content6{
                padding-left: 10px;
               }
    
            </style>
        </head>
        
        
        <body>
    
            <div id="total">
                
            
                <div id="branch0" style="text-align: center;">
                    <h2>——居家优品——</h2>
                </div>
            
                <div id ="branch1">
                    <div class="content1">
                        <img src="img/img1.png"/>
                    </div>
                    
                    <div class="content2">
                        <p style="font-size: 25px; display: inline;">家电馆</p>
                        <img src="img/img12.png"/>
                        <p style="font-size: 20px; display: inline;">家电好物节</p>
                        <img src="img/img2.png" style="display: block;"/>
                        <img src="img/img3.png"/>
                        <img src="img/img4.png"/>
                    </div>
                    
                    
                    <div class="content3">
                        <p style="font-size: 25px; display: inline;">我爱我家</p>
                        <img src="img/img12.png" alt="" />
                        <p style="font-size: 20px; display: inline;">品质生活家</p>
                        <img src="img/img5.png" alt=""  style="display: block;"/>
                        <img src="img/img6.png" alt="" />
                        <img src="img/img7.png" alt="" />
                    </div>
                    
                </div>
            
            
            
                <div id="branch2">
                    <div class="content4">
                        <img src="img/img8.png" alt=""/>
                        <p style="font-size: 20px; display: inline;">芝华士旗舰店</p>
                        <img src="img/img9.png" alt=""  style="display: block;"/>
                    </div>
                    
                    <div  class="content5">
                        <img src="img/img10.png"/>
                    </div>
                    
                    <div  class="content6">
                        <img src="img/img11.png"/>
                    </div>
                </div>
            
            
            </div>
            
        </body>
    </html>
    
    image.png

    相关文章

      网友评论

          本文标题:CSS作业

          本文链接:https://www.haomeiwen.com/subject/yxtfiftx.html