div+css教程

div+css教程 浅谈css 浅谈Div+CSS 目录 概述................................................................................................................................................... 1 为什么要用div+css布局 ........................................................................................................ 1 完全抛弃table布局吗, ......................................................................................................... 2 需要注意的问 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 ....................................................................................................................... 2 Css框架搭建 .................................................................................................................................... 2 文件夹的创建 ........................................................................................................................... 2 Css文件的构成 ........................................................................................................................ 3 Css选择器 ................................................................................................................................ 3 Css代码命名规则 .................................................................................................................... 3 页面分析........................................................................................................................................... 3 各浏览器之间的差异 ....................................................................................................................... 5 各浏览器之间的差异 ............................................................................................................... 5 解决办法................................................................................................................................... 5 JS调用不同的样式 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf ...................................................................................................... 5 Css Hack ........................................................................................................................... 6 概述 对于div+css，由于本人是在开发项目当中不断的自学和积累起的经验，也没有经过正统系 统的培训。所以以下描述难免会有不全面甚至错误之处。欢迎领导、同事批评、指证。 为什么要用div+css布局 可能有很多人认为用table布局简单快捷。的确，对于刚接触网页制作的人来说，table 布局是一块很好的敲门砖。因为table里面有很多自带默认属性，比如文本垂直方向居中， 这个完全不需要我们去考虑行高(line-height)的问题。同时由于table它本身的特性(tr、 td)，它可以快速、便捷地实现table中各元素的对齐问题。 但是，随着接手项目的增多、开发项目逐渐复杂。你会发现用table布局网页显得很死 板、不够灵活。它曾经给我们带来方便，反而成了障碍。页面上的每一个元素都要依靠td、 tr的定位和配合，这无形当中加大了代码量、加重了通信负担。而且如果中途修改一下页面 元素的大小或者位置，可能会使整个页面的布局要做很大的改动，造成牵一发而动全身的局 面出现。 而div+css相对于table布局有以下好处: 1、 减少代码量、减轻负担。 2、 布局灵活、可控性强、易维护。 3、 与JS配合方便。 1 浅谈css 4、 可以实现table无法实现的效果，如叠加、覆盖等。 等等。好处还有很多，实际开发中就会深有体会。 完全抛弃table布局吗, 既然div+css布局这么有优势，那么就完全抛弃table布局吗,当然不是。前面也说道table也有它自己独到的优势。比如我们在面对一个表单(比如新用户注册)、或是一个列表(比如新闻列表)。往往这个时候用table布局会比div更加适合。所以在实际开发中、可以根据实际情况、将两种布局结合使用，才会达到最佳效果。 需要注意的问题 根据实际情况需要注意以下问题: 1、 浏览器侧重问题: 因为公司开发项目基本都是国内项目，国内用户电脑环境基本上微软的产品为主，所以优先考虑IE。又由于XP在国内的普及率最高，所以又应当以IE6为优先(即使用户用的是360、TT等非主流浏览器，它们也是用IE6内核)。顺便说一句，IE就是垃圾。 2、 浏览器兼容问题: 相同的css在不同的浏览器下效果会有一些差别，这主要是由于各种浏览器对css的解析不同造成的。解决办法:CSS Hack(网上有很多关于它的资料，在此不一一说明)。 3、 Css版本的选择: 尽管现在css 3.0已经成熟，但我们开发中仍以css 2.0为准。因为我们已经确定浏 览器以IE为主，而IE6\7\8均不支持css 3.0. 4、 Css制页面 方法 快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载 的选择: Css有很多控制页面的方法，但我们开发中只使用链接式。即，页面文件与css文 件分离，在页面以链接的方式引入css文件。除及特殊情况，页面需要少量行内样 式(比如首页元素需要固定大小)外，杜绝行内样式、内嵌式等方式，尤其杜绝行 内控制页面风格(比如backgroud:red这种代码)。因为要为换肤做考虑。 Css框架搭建 文件夹的创建 上面提到过，我们要为网站整体换肤作考虑，所以css框架的搭建也有讲究。下面是我搭建css框架的一种方法，供参考 1、 首先建一个在web工程下建一个Themes文件夹。 2、 我们的网站可能会涉及到各人空间等这种用户自定义风格的页面。所以整个网站可 能会分为系统级页面、用户级页面。这里我们暂且分这两种。在Themes文件夹下 建两个子文件夹，分别为SysThemes(系统)、UserThemes(用户)。 3、 以用户级页面为例，可供用户选择的皮肤主题可能有多种，比如有三种:默认风格、 黑色风格、蓝色风格。那么我们在UserThemes文件夹下建三个子文件夹，分别为: 2 浅谈css Default、Black、Blue 4、 下面，我们可以具体建一下与css直接相关的文件及文件夹。以Default为例。在 Default下新建一个images文件夹，用于放置图片;新建一个js文件夹，用于放置 一些配合css实现样式的脚本文件;新建一个css文件夹，用于放置各种css文件(当 然，这个css文件夹也可以不建，可以直接将css文件放在Default文件夹下，这个 需要根据自己的实际情况而定。) 如下图所示: 这样尽管看起来目录结构复杂、嵌套很深。但是这样做层次分明，最主要是方便实现更 换主题皮肤。 Css文件的构成 为了方面开发和维护，一般会有多个css文件配合完成对样式的控制。每个css文件都有不同的功能。(Css文件的命名也要根据实际情况起有意义的名字。杜绝1.css或a.css之类。) 比如:base.css，它负责控制页面整体或是公用的风格，比如:字体、链接、按钮等等;pageloyout.css，它负责页面元素的定位。等等。 Css选择器 推荐使用类别选择器，不推荐使用id选择器(共通性、重用性不好)。 Css代码命名规则 不多说，一句话:起名要有意义，哪怕它长。严重鄙视.Style1 .aaa之类的命名出现 页面分析 当拿到一个效果图时，不要着急动手。要先分析页面的构成、组成。 以下图分析为例: 3 浅谈css 首先讲它分为六大部分，其中图中3处结构相对负责，要单独拿出来再做划分: 大体用可以分为3部分。 以此类推。先分好模块再动手制作、切图。以免考虑不周，半路推倒重来。这很重要。 4 浅谈css 各浏览器之间的差异 各浏览器之间的差异 其实说实话，如果你写的css代码够 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 ，各浏览器之间的差异并不大。出现严重的样式bug，那就说明css代码写得不对。 火狐浏览器是支持W3C比较好的浏览器，而我们最常用的IE，对W3C支持并不好，所以IE浏览器会经常出现一些莫名其妙的bug。 IE浏览器常见的问题如下: 1、 IE下td和div的高度默认为20px; 如果小于20可能会出问题 2、 IE下超链接的line-height属性不标准(比如汉字和字母数字对不齐) 3、 IE6 中不可滥用 float，否则会带来内容消失以及文字重复等稀奇古怪的问题 4、 IE6 中，float 对象，在 float 方向的那边，会出现双倍 margin，将 display 设置为 inline 会解决这个问题 5、 IE6 不支持 min-width, max-width, min-height, max-height 一类的属性 6、 IE6 不支持固定位置背景图 7、 IE6/7 不支持很多 display 属性值(如 inline-table,table-cell,table-row) 8、 IE6 中，只有 a 这个对象才可以使用 :hover 这个伪类) 9、 IE6~8 对 CSS3 的支持很有限 (不过有一些变通方法) 解决办法 JS调用不同的样式表 把下面这段JS放在head中 5 浅谈css Css Hack 由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 解决的办法: 由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 比如IE6能识别下划线_和星号*，IE7能识别星号*，当不能识别下划线_，而firefox两个都不能认识。等等 书 关于书的成语关于读书的排比句社区图书漂流公约怎么写关于读书的小报汉书pdf 写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。 比如要分辨IE6和firefox两种浏览器，可以这样写: 解释一下: 上面的css在firefox中，它是认识不了后面的那个带星号*的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。 6 浅谈css 在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background: red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。 区分IE6，IE7，firefox区别不同浏览器，CSS hack写法: 区别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; 注:IE都能识别*;标准浏览器(如FF)不能识别*; IE6能识别*，但不能识别 !important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; IE6 IE7 FF * ? ? × !important × ? ? 另外再补充一个，下划线"_", IE6支持下划线，IE7和firefox均不支持下划线。 于是大家还可以这样来区分IE6，IE7，firefox : background:orange;*background:green;_background:blue; 7