关闭

关闭

关闭

封号提示

内容

首页 div+css教程.doc

div+css教程.doc

div+css教程.doc

上传者: 如果不能全给我就全都不要给我 2017-09-17 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《div+css教程doc》,可适用于IT/计算机领域,主题内容包含divcss教程浅谈css浅谈DivCSS目录概述为什么要用divcss布局完全抛弃table布局吗,需要注意的问题Css框架搭建文件夹的创建Css符等。

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

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/12
0下载券 下载 加入VIP, 送下载券

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部