网页布局

比如做一个游戏网落的页面

　　　　首先建立一个html文件：

　　　　　　　　　　　　我们可以选择两个链接一个外联和内联（1）外联

　　　　　　　　建立一个css的文件　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　<link rel="stylesheet" href="魔兽12-5css.css"/>
　　　　　　　　　　　　　　　　　　　　　　　　　（2）内联
　　　　　　　　建立一个以自身style的文件
　　　　　　　　　　　　　　　　　　　　　　　　　　<style tytp="text/css"></style>
　　　　在把整个页面分成你想要的格式：我把他分文三部分
   第一比如头：

<herder>
    <div class="title">
        <div class="math">
            <nav>
                <ul>
                    <li><a href="11.jpg">进入官网</a></li>
                    <li><a href="223.png">账号注册</a></li>
                    <li><a href="11.jpg">充值管理</a></li>
                    <li><a href="shouzhi.jpg" class="herd">游戏下载</a></li>
                    <li><a href="header-img.jpg">客户中心</a></li>
                    <li><a href="#">官方论坛</a></li>
                </ul>
            </nav>
        </div>
        <div class="her"></div>
    </div>


</herder>
    我用外联的方式：

.title{
    background-image: url("wow541.jpg");
    width: 1300px;
    height: 560px;
    margin: 0 auto;
    background-repeat: no-repeat;
    overflow: hidden;
}
.math{
    background-image: url("menu_bg1.png");
    width: 982px;
    height: 61px;
    /*margin-left: 140px;*/
    margin: 0 auto;
    margin-top: 55px;
}
.her{
    background-image: url("thu2.png");
    width: 289px;
    height: 134px;
    /*float: left;*/
    margin-left: 500px;
    margin-top: -90px;
}
li{
    list-style-type: none;
    float: left;
    /*padding: 4px 16px;*/
    /*margin-left: 20px;*/
}
a{
    text-decoration: none;
    font-size: larger;
    color: yellow;
    line-height: 50px;
    padding: 0 10px;

}
/*a:hover*/
.herd{
    margin-left: 310px;
}

　　这是头的部分 
第二、 身子
　　　　

<div class="title2">
    <div class="title3">
        <div class="max"><img class="what" src="small_b11.jpg" /></div>
        <div class="max1"><img class="what" src="small_b21.jpg" /></div>
        <div class="max2"><img class="what" src="small_b31.jpg" /></div>
        <div class="max3"><img class="what" src="small_b41.jpg" /></div>
    </div>
</div>           

 　　　　　　　　这是我设置的外联方式：

.title2{
    background-image: url("wrapper.jpg");
    width: 1300px;
    height: 200px;
    margin: 0 auto;
    margin-top: -20px;
    overflow:hidden;
    /*padding: 4px;*/
    /*float: left;*/
}
.max{
     background-image: url("thu1.jpg");
     width: 241px;
     height: 160px;
    float: left;
    /*background:no-repeat ;*/
    /*background-repeat: no-repeat;*/
    margin-left: 160px ;
    /*padding: 0px 14px;*/
 }
.max1{
    background-image: url("thu1.jpg");
    width: 241px;
    height: 160px;
    float: left;
    /*padding: 0px 14px;*/
}
.max2{
    background-image: url("thu1.jpg");
    width: 241px;
    height: 160px;
    float: left;
    /*padding: 0px 14px;*/
}
.max3{
    background-image: url("thu1.jpg");
    width: 241px;
    height: 160px;
    float: left;
    /*padding: 0px 14px;*/
}

　　　　　　第三 最后也就是结尾部分

<div class="title4">
        <div>
            <div class="k"><img src="blizz_wow.png" /></div>
            <div class="hed"><img src="flogo_ne.gif" /></div>

            <div class="qin"><h6 class="zuihou">&copy2012 暴雪娱乐股份有限公司版权所有 由上海网之易网络发展科技有限公司运营 <ins>著作权侵权</ins> 文网进字[2012]033号 <br/>
                  <ins>泸网文[2011]0682_074</ins> <ins>增值电信业务经营许可证编号：泸B2 _20080012</ins> <ins>法律文件</ins> 新出审字：[2012]712号 <br/>
                <ins>文化部网络游戏举报与联系邮箱：wlyx@gmail.com</ins> <ins>《互联网文化管理暂行规定》</ins></h6>
                        <div class="fanjian">
            <div class="tu"><img src="police2012.gif" /></div>
                <div class="tu1"><img src="zx2012.gif" /></div>
                    <div class="tu2"><img src="sgs_i2012.gif" /></div>
                        <div class="tu3"><img src="icon2012.gif" /></div>
                        </div>
            </div>
        </div>

</div>同意我也是以外联方式：

.title3{
    height: 160px;
    margin: 0 auto;
    margin-top: 30px;
}
.what{
    margin-top: 5px;
    margin-left: 5px;
}



.title4{
    background-image: url("wrapper.jpg");
    /**/
    width:1300px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
}
.k{
    width: 136px;
    height: 76px;
    float: left;
    margin-top: 40px;
    margin-left: 160px;
    /*margin: 0 auto;*/
}
.hed{
    width: 129px;
    height: 45px;
    float: left;
    margin-top: 76px;
    margin-left: 18px;
}
h6{
    color: chocolate;

}
.qin{
    float: left;
    margin-left: 20px;
    margin-top: 46px;
}
.fanjian{
    margin-top: -40px;
}
.tu{
    float: left;
    margin-left: 480px;
    /*margin-top: -40px;*/
}
.tu1{
    float: left;
    /*margin-left: 482px;*/
}
.tu2{
    float: left;
}
.tu3{
    float: left;
}
    这就是我把这个页面分文几段、 但要明白什么是外联，什么是内联。   在整个div中要分清行内元素和块级元素，块与块之间是不能融合，但可以把行内元素转换为块级元素。


  这是我在做整个页面布局的时候分清和自己的理解，做的不好 大神些勿喷！勿喷！勿喷！！！

网页布局

原文：http://www.cnblogs.com/TU-wei/p/5022435.html