美文网首页
网页布局作业

网页布局作业

作者: 跟我念一遍 | 来源:发表于2018-08-15 20:26 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                #d1{
                    float:left;
                    /*position:absolute;*/
                    width: 310px;
                    height: 380px;
                    background-color: gainsboro;
                    border:5px solid black;
                    margin-left: 50px;
                    margin-top: 100px;
                }
                #i1{
                    position:absolute;
                    float: left;
                    margin-left: 40px;
                    bottom: 30px;
                }
                #d2{
                    float: left;
                    position: relative;
                    width: 400px;
                    height: 430px;
                    background-color: white;
                    margin-left: 70px;
                    margin-top: 65px;
        
                }
    
                #i2{
                    margin-left: 20px;
                    width: 90%;
                }
                
                #i3{
                    float:left;
                    margin-left: 20px;
                    margin-top: 10px;
                }
                
                #i4{
                    float:left;
                    margin-left: 20px;
                    margin-top: 10px;
    
                }
                #d3{
                    float: left;
                    position: relative;
                    width: 400px;
                    height: 430px;
                    background-color: white;
                    margin-left: 20px;
                    margin-top: 65px;
                }
                #i5{
                    margin-left: 20px;
                    width: 90%;
                }
                
                #i6{
                    float:left;
                    margin-left: 20px;
                    margin-top: 10px;
    
                }
                
                #i7{
                    float:left;
                    margin-left: 20px;
                    margin-top: 10px;
    
                }
            </style>
        </head>
        <body>
    
                <div id="d" style="width:100%;height: 1000px;background-color: gainsboro">
                    <p style="text-align:center;font-family: '黑体';font-size: 50px;">————居家优品————</p>
                    
                
                    <div id="d1">
                        <img id="i1" src="img/tu1.jpg" style="width: 310px;height: 390px;"/>
                        
                        
                    </div>
                    
                    <div id="d2">
                        <p style="margin-left:20px;">
                            <a  style="font-size: 30px;font-family: '黑体';float: left;">家电馆</a>
                            <img src="img/jiantou.png" style="float: left;margin-top: 2px;"/>
                            <a style="font-size: 20px;font-family: '黑体';color: darkgray;float: left;margin-top: 5px;">家电好物节</a>
                        </p>
                        <img id="i2" src="img/tu2.jpg"/>
                        <img id="i3" src="img/tu3.jpg"/>
                        <img id="i4" src="img/tu4.jpg"/>
                    </div>
                    
                    <div id="d3">
                        
                        <p style="margin-left:20px;">
                            <a  style="font-size: 30px;font-family: '黑体';float: left;">我爱我家</a>
                            <img src="img/jiantou.png" style="float: left;margin-top: 2px;"/>
                            <a style="font-size: 20px;font-family: '黑体';color: darkgray;float: left;margin-top: 5px;">品质生活家</a>
                        </p>
                        <img id="i5" src="img/tu5.jpg"/>
                        <img id="i6" src="img/tu6.jpg"/>
                        <img id="i7" src="img/tu7.jpg"/>
                    </div>
                    </div>
            </div>
        </body>
    </html>
    
    image.png

    相关文章

      网友评论

          本文标题:网页布局作业

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