常用的DIV+CSS的基本框架结构但不推荐都放一个div里_经验交流

常用的DIV+CSS的基本框架结构但不推荐都放一个div里
css样式代码:
 程序代码

复制代码 代码如下:

/*---全局样式---*/ 
* { margin:0px; padding:0px;} 
body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;background:#fff;} 

/*---主体样式---*/ 
#container {} 
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;} 

/*---顶部样式---*/ 
#header {} 

/*---中间样式---*/ 
#mainContent {} 
#sidebar {} 
#content{} 

/*--底部样式---*/ 
#footer {} 

html代码 

复制代码 代码如下:

<div id="container"> 
    <!--头部样式--> 
    <div id="header"> 
      <div id="header_left">header_left</div> 
      <div id="header_right">header_right</div> 
    </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-->

时间: 2024-09-20 08:38:49

常用的DIV+CSS的基本框架结构但不推荐都放一个div里_经验交流的相关文章

div+css在思路和流程上实现结构与表现的分离分析_经验交流

古老的话题:一首古诗的分离 1.给你一首古诗,保存为毫无格式的一堆文字,你去理解它的内容,进行结构的处理.用word排版之后,他有了结构 2.这个结构其实包含了语义和表现 3.用html进行结构化,抛开一切的表现形式,只考虑语义 4.用CSS进行表现处理,包括html的默认表现,他拥有了视觉表现,这个表现体现出了结构化,也体现出了用户体验,用户体验中包含了交互的排版和视觉体验 5.如果加上行为,比如点击注释序号,缓缓跳转到注释内容. 再看看css禅意花园 同样是上面的5个步骤,形成第一版本的cs

CSS Div 最小高度在IE 6 和IE 7中的兼容性问题_经验交流

浏览器兼容问题-CSS Div 最小高度在IE 6 和IE 7中的兼容性问题 用CSS 的定义一个DIV的高度时,在IE 7浏览器下可以正常显示.但是在IE 6 中,height 在10px以下就无法定义了.这点跟表格有点类似.解决的方法如下: 法一:定义overflow属性.比如想定义一个高度为2px 的线条. <div style="height:2px;overflow:hidden;background:#000000;width:778px;"></div&

用CSS解决中英文混合字符串的截取省略问题的解决办法_经验交流

作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号. 众所周知,有很多方法可以实现这个功能,JavaScript,ASP,PHP都有各自的实现方法,但是面临的问题有很多,比如中英文混杂时或在某些编码下,容易造成截取出现乱码的问题,虽然大多数问题已经有比较成熟的解决方案,但在数据量比较大时,使用JavaScript,ASP,PHP实现这一功能,无疑会给客户端或服务器端造成比较大的资源开销. 随着W

大家看了就明白了css样式中类class与标识id选择符的区别小结_经验交流

你可以用类选择符class和标识选择符id来定义自己的选择符. 这样做的好处是,依赖于class或者id,你可以不同地表现相同的HTML元素. 在CSS中,类选择符在一个半角英文句点(.)之前,而id则在半角英文井号(#)之前. 看起来像这样: #top { background-color: #ccc; padding: 1em } .intro { color: red; font-weight: bold; }  HTML与CSS的连接用属性id和class.像这样: <div id=&quo

CSS可以做的几个令你叹为观止的实例分享_经验交流

在我写"你未必知道的JavaScript和CSS交互的5种方法"一文时,人们对于JavaScript和CSS是如何重叠的感到惊讶.今天,我将重点强调你能用CSS完成的7种工作--不需要通过JavaScript或图片. CSS@supports 在使用一些浏览器可能没有的特性时,每一个优秀的前端开发者都需要进行特性测试.特性测试一直以来都是由JavaScript来做的,许多人使用Modernizr,一个由许多测试良好的案例构成的优秀实用工具,来做特性测试.一个新API:@supports

10条影响CSS渲染速度的写法与使用建议第1/3页_经验交流

这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分,暂时总结了10条. 1.*{} #jb51 *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果.所以就有了*通配符.*会遍历所有的标签: *{margin:0; padding:0} 如果这样写,页面中所有的标签的margin全是0:padding也是0: #jb

CSS文件可维护、可读性提高指南第1/2页_经验交流

所以,结构优良的代码能很大程度上优化它的可维护性.下面列出四则技巧提高CSS文件可维护性的方法,以此作为指南,以一种较好的CSS样式组织习惯来进行WEB前端开发. 一.CSS样式文件分解 对于小项目,在写代码之前,按页面结构或页面内容将代码分为几块并给予注释.例如,可以分别将 全局样式.布局.字体样式.表单.评论和其他分为几个不同的块来继续工作. 而对于较大的工程,这样显然不会有什么效果.此时,就需要将样式分解到几个不同的样式表文件.下面的master stylesheet 就是这一方法的例子,

div+CSS 兼容小摘_经验交流

区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; IE7,IE8兼容: <meta http

DIV+CSS布局教程大全与pdf电子书 下载_经验交流

div+css布局入门 4XHTML下css+div布局总结. 6网页设计DIV+CSS--第1天:选择什么样的DOCTYPE. 9第一天 9什么是DOCTYPE 10我们选择什么样的DOCTYPE 10补充 10网页设计DIV+CSS--第2天:什么是名字空间 10网页设计DIV+CSS--第3天:定义语言编码 11网页设计DIV+CSS--第4天:调用样式表. 11外部调用样式表 11双表法调用样式表 12网页设计DIV+CSS--第5天:head区的其他设置. 12收藏夹小图标. 12为搜