当前位置:首页 > DIV+CSS实例 > 正文

常用的DIV+CSS的基本框架结构

作者:无忧IT 来源:网络收集 【 】 浏览: 修改日期:2008-06-18 我要评论(0)     

css样式代码:

@import url("/css/global.css");

/*主体*/
#container {margin:0 auto; width:900px;}
a { color:#333;}

/*顶部*/
#header {}

/*中间*/
#mainContent {}
#sidebar {}
#content{}

/*底部*/
#footer {}

其中顶部链接的global.css为公共样式表,可以把常用的相同的样式放入其中,其它样式表需要用到时都去链接,方便以后管理

/*全局样式*/
* {margin:0;padding:0;outline:none;}
body { margin:0 auto; font:normal normal normal 12px/150% Verdana; color:#333; }
img { border:0px;}
/* 清除浮动  */
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

html代码

<div id="container">
    <div id="header">
        头部
    </div><!--header:end-->
    <br class="clearfloat" /><!-- 用于清除浮动的元素 -->
    <div id="mainContent">
        <div id="sidebar">
        侧边栏
        </div><!--sidebar:end-->
        <div id="content">
        主体内容
        </div><!--content:end-->
    </div><!--mainContent:end-->
    <br class="clearfloat" /><!-- 用于清除浮动的元素 -->
    <div id="footer">
    底部
    </div><!--footer:end-->
</div><!--container:end-->

〖栏目所有文章〗Tags: 标签地图

更多评论(0)..网友评价

【视频教程】新手常见问题

Copyright ®2013-2018 www.51itstudy.com online services. All rights reserved.

意见反馈 E-mail: kefu@51itstudy.com

声明:本网站尊重并保护知识产权,根据《信息网络 传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在24小时内通本站,我们会及时删除!

    

粤ICP备14015648号-3