DIV+CSS网页布局实例_网页布局入门实例
2015-12-28 10:07:53  By: dwtedx

你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习、第一种可能是你还没有理解CSS处理页面的原理、在你考虑你的页面整体表现效果前、你应当先考虑内容的语义和结构、然后再针对语义、结构添加CSS、下面给大家提供一个简单的例子

div css网页布局实例


index.html代码

<html>
    <head>
        <title>DIV+CSS简单的页面布局示例</title>
        <link rel="stylesheet" href="class.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <div id="header">
                <div id="logo" class="bgcolor">LOGO</div>
                <div id="banner">
                    <div id="left" class="bgcolor">BANNER1</div>
                    <div id="right" class="bgcolor">BANNER2</div>
                </div>
            </div>
            <div class="nav"> </div>
            <div id="menu" class="bgcolor">水平导航条</div>
            <div class="nav"> </div>
            <div id="content">
                <div class="left_box border">栏目(一)</div>
                <div class="right_box border">栏目(二)</div>
                <div class="nav"> </div>
                <div class="left_box">
                    <div class="left border">栏目(三)</div>
                    <div class="right border">栏目(四)</div>
                </div>
                <div class="right_box">
                    <div class="left border">栏目(五)</div>
                    <div class="right border">栏目(六)</div>
                </div>
            </div>
            <div id="sidebar">
                <div class="bar border">栏目(七)</div>
                <div class="nav"> </div>
                <div class="bar border">栏目(八)</div>
                <div class="nav"> </div>
                <div class="bar border">栏目(九)</div>
            </div>
            <div class="nav"> </div>
            <div id="footer" class="bgcolor">页脚</div>
        </div>
    </body>
</html>


class.css代码

/* CSS Document */
 
body{
    margin:0;
    padding:0;
    text-align:center;
    font:12px Arial,宋体;
}
 
.border{
    border:1px solid #888;
}
 
.bgcolor{
    background:#DDD;
}
 
#container{
    width:960px;
    margin:0 auto;
}
 
#header{
    float:left;
    width:100%;
}
 
#logo{
    float:left;
    width:200px;
    height:80px;
}
 
#banner{
    float:right;
    width:750px;
}
 
#banner #left{
    float:left;
    width:540px;
    height:80px;
}
 
.nav{
    float:left;
    height:10px;
    width:100%;
    overflow:hidden;
    clear:both;
}
 
#banner #right{
    float:right;
    width:200px;
    height:80px;
}
 
#menu{
    float:left;
    width:100%;
    height:30px;
}
 
#sidebar{
    float:right;
    width:200px;
    height:410px;
}
 
#sidebar .bar{
    float:left;
    width:100%;
    height:130px;
}
 
#content{
    float:left;
    width:750px;
}
 
#content .left_box{
    float:left;
    width:370px;
    height:200px;
}
 
#content .right_box{
    float:right;
    width:370px;
    height:200px;
}
 
#content .left{
    float:left;
    height:200px;
    width:180px;
}
 
#content .right{
    float:right;
    height:200px;
    width:180px;
}
 
#footer{
    float:left;
    width:100%;
    height:60px;
}


本文只讲述最基本的布局、在具体开发实践中可能会遇到浏览器兼容性等其他问题、遇到细节问题请自行百度解决、解决的多了经验就积累起来了

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+