• 导语:本代码是我个人按照图纸所打出来的代码,细节上可能和大家的方法有些不同,但整体思维上均是企业开发布局思维,国内大部分网站都是采用这种布局方式。下面我会附上代码和效果图。本文版权属于“国民老实人”九轩博客所有,转载请标明出处。

  • 设计图纸:

设计图.png

设计图.png

  • 九轩代码:

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>国民老实人-九轩|网站首页布局演示</title>
        <style>
     body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
     {
                margin:0;padding:0
     }
            body{
                margin: 0 auto;
     }
            .z1{
                width: 980px;
     height: 100px;
     margin: 0 auto;
    
     }
            .z2{
    
                width: 980px;
     height: 400px;
     margin-top: 10px;
     margin-right: auto;
     margin-left: auto;
    
     }
            .z3{
                margin-top: 10px;
     width: 980px;
     height: 40px;
     background-color: darksalmon;
     margin-right: auto;
     margin-left: auto;
    
     }
            .z1_1{
                width: 250px;
     height: 100px;
     float: left;
     background-color: indianred;
     }
            .z1_2{
                background-color: aquamarine;
     height: 50px;
     width: 150px;
     float: right;
     }
            .z1_3{
                background-color: darkmagenta;
     height: 50px;
     width: 650px;
     float: right;
     }
            .z2_1{
                width: 320px;
     height: 400px;
     background-color: gold;
     float: left;
     }
            .z2_2{
                width: 650px;
     height: 400px;
     float: right;
     }
            .z2_2_1{
                width: 650px;
     height: 340px;
     }
            .z2_2_2{
                background-color: chocolate;
     height: 40px;
     width: 650px;
     margin-top: 20px;
     }
            .z2_2_1_1{
                width: 400px;
     height: 340px;
     float: left;
     }
            .z2_2_1_2{
                background-color: chartreuse;
     width: 240px;
     height: 350px;
     float: right;
     }
            .z2_2_1_1_1{
                background-color: darkorchid;
     width: 400px;
     height: 200px;
     }
            .z2_2_1_1_2{
                background-color: cyan;
     width: 400px;
     height: 140px;
     margin-top: 10px;
     }
            *{
                text-align: center;
     }
        </style>
    </head>
    <body>
    <div class="z1">
        <div class="z1_1">250*100</div>
        <div class="z1_2">150*50</div>
        <div class="z1_3">650*50</div>
    </div>
    <div class="z2">
        <div class="z2_1">320*400</div>
        <div class="z2_2">
            <div class="z2_2_1">
                <div class="z2_2_1_1">
                    <div class="z2_2_1_1_1">400*200</div>
                    <div class="z2_2_1_1_2">400*140</div>
                </div>
                <div class="z2_2_1_2">240*350</div>
            </div>
            <div class="z2_2_2">650*40</div>
        </div>
    </div>
    <div class="z3">980*40</div>
    <p>说明:本文图片来自互联网,代码则是我纯手打的,和别人的布局可能有一些差别,但这则是大部分网站网页布局的方式方法</p>
    <p>
        <ul>
        <li>1、看到设计师给的开发图纸后,需要有一个大体的设计思维</li>
        <li>2、先用div从上而下,从左至右的顺序布局</li>
        <li>3、从上至下采用布局的标准流,从下至上采用浮动流</li>
        <li>4、给所有div设置颜色样式,内容样式,宽度高度</li>
        <li>5、此时需要调整每个div之间的间隙,上下间隙我们直接调整外边距为10px即可</li>
        <li>6、网页整个页面居中我们直接设置body标签为margin:0 auto;属性即可</li>
        <li>7、还有一个知识点则是整个网页的文本居中我直接采用通配符*选择器设置text-align: center;</li>
    
    </ul>
    </p>
    </body>
    </html>

    
  • 九轩效果图:

效果图.png

效果图.png