DIV+CSS文档格式.docx
- 文档编号:21596588
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:11
- 大小:26.36KB
DIV+CSS文档格式.docx
《DIV+CSS文档格式.docx》由会员分享,可在线阅读,更多相关《DIV+CSS文档格式.docx(11页珍藏版)》请在冰豆网上搜索。
>
liid="
articles"
Articles<
/li>
topics"
Topics<
about"
About<
contact"
Contact<
contribute"
Contribute<
feed"
Feed<
/ul>
h1id="
masthead"
ahref="
/"
imgsrc="
/pix/alalogo.gif"
alt="
ALISTApart:
ForPeopleWhoMakeWebsites"
/>
/h1>
No.214
定义了最上面的导航(ul部分),左边的大logo和那个圆圆的No.xxxx的标记.。
他没有使用DIV来做顶部的框架,但却很好的说明了这些代码的用途,为什么?
因为他活用了HTML提供的标签,以及样式名称的定义
其它最常用的布局标签
h1
这个标签或许真正会去用的人很少,因为它显示的字体真的是太“大”了,但我们是CSSer,有什么标签样式不能改呢?
而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了^_^
ul
这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显)
b
这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短)。
在<
b>
和<
/b>
之间的文字,用粗体表示。
b顾名思义,就是bold的意思。
虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择
h2
h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p
DIV+CSS的优势何在?
1、符合W3C标准。
微软等公司均为W3C支持者。
这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
2、支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。
3、搜索引擎更加友好。
相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。
4、样式的调整更加方便。
内容和样式的分离,使页面和样式的调整变得更加方便。
现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。
5、CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
6、表现和结构分离,在团队开发中更容易分工合作而减少相互关联性。
CSS放入网页的几种方式
行内套用
我们可以在HTML文件内直接宣告样式。
举例来说,Thisisfontsize16.
以上的HTML文件在浏览器上会显现为:
Thisisfontsize16.
嵌入套用样式可以嵌入于HTML文件中(通常是在<
head>
内)。
举例来说,<
<
styletype="
text/css"
div{div{background-color:
#FF0000;
}<
/style>
/head>
body>
背景颜色是红色<
/body>
以上的HTML会显现出:
背景颜色是红色
外部连接套用在这种方式下,所有的CSS样式宣告都是存在另外一个档案中。
该档案通常名称为.css。
在HTML文件的<
header>
..<
/header>
之中,我们将用以下的程式码将这个.css档案连接进入:
linkrel=stylesheettype="
href="
external-stylesheet.css"
以上这一行会将在external-stylesheet.css这个档案内所宣告的样式加入HTML文件内。
汇入套用汇入套用外部的CSS样式也可以被汇入进HTML文件。
汇入的做法为利用@import这个指令。
@import的语法为:
STYLETYPE="
/STYLE>
@import"
!
--@importurl(style.css);
@importurl(<
@import指令最初的用意,是为了能够针对不同的浏览器而运用不同的样式。
不过,现在已经没有这个必要。
现在用@import的目的,最常是要加入多个CSS样式。
当多个CSS样式被@import的方式加入,而不同CSS样式互相有冲突时,後被加入的CSS样式有优先的顺位(详情请见CSS串接)。
divcss-其它最常用的布局标签
h1这个标签或许真正会去用的人很少,因为它显示的字体真的是太"
大"
了,但我们是CSSer,有什么标签样式不能改呢?
而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了^_^. ul这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显).
b这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择
h2h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p。
CSS+DIV网站设计的问题
尽管DIV+CSS具有一定的优势,不过现阶段CSS+DIV网站建设存在的问题也比较明显,主要表现在:
第一,对于CSS的高度依赖使得网页设计变得比较复杂。
相对于HTML4.0中的表格布局(table),CSS+DIV尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了,这在一定程度上影响了XHTML网站设计语言的普及应用。
第二,CSS文件异常将影响整个网站的正常浏览。
CSS网站制作的设计元素通常放在几个l外部文件中,这一个或几个文件有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。
第三,对于CSS网站设计的浏览器兼容性问题比较突出。
基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题,但CSS+DIV设计的网站在IE浏览器里面正常显示的页面,到火狐浏览器(FireFox)中却可能面目全非(这也是为什么建议网络营销人员使用火狐浏览器的原因所在)。
CSS+DIV还有待于各个浏览器厂商的进一步支持。
第四,CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。
CSS+DIV网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。
因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。
使用DIV+CSS布局网站的优点和缺陷
随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,奋斗网络也成为了CSS网页布局技术学习的先锋站点,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。
如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉、比较上手;
但是,它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网站设计方法——DIV+CSS。
CSS网页布局的意义体现在如下方面:
一、使页面载入得更快
由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。
相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。
而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。
二、降低流量费用
页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。
三、修改设计时更有效率
由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。
根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性
DIV+CSS最重要的优势之一:
保持视觉的一致性;
以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。
而使用DIV+CSS的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。
五、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,便于被搜索引擎采集收录。
六、对浏览者和浏览器更具亲和力
我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优势。
由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。
说了这么多CSS网页布局的意义与优点,同时也不能轻视CSS网页布局的副作用:
一、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了。
二、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。
三、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。
当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。
四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。
DIV+CSS网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。
综合以上讨论的DIV+CSS优势和略势,我认为不可盲目跟风,如何更有效、更合理的运用WEB2.0设计标准,这需要很长时间的学习和锻炼。
而如何将DIV+CSS运用的更好,我觉得这需要通过不断的实践和体检,积累丰富的设计经验,才能很好的掌握这门技术。
Div+CSS常见错误总结
CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。
应用DIV+CSS编码时很容易犯一些错误。
本文列举了一些常见的错误:
1.检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。
可以用dreamweaver的验证功能检查一下有无错误。
2.检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的}等。
可以利用CleanCSS来检查CSS的拼写错误。
CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。
3.确定错误发生的位置
如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。
4.利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。
这时为元素添加border属性确定元素边界,错误原因即水落石出。
5.float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。
这是MacIE的著名的bug,倘若不知道就会走弯路。
6.float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。
所以不管float元素的内容如何,一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
7.float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。
因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。
也可以使用hack方法为IE指定特别的值。
8.float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。
因此请保证宽度之和小于99%。
9.是否重设了默认的样式?
某些属性如margin、padding等,不同浏览器会有不同的解释。
因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10.是否忘记了写DTD?
如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行DTD:
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
DIV+CSS常用编辑工具
没有基础的人会觉得CSS+DIV开发很难学习。
其实只要深刻理解其代码含义用任何文本编辑器都可以编辑。
目前许多人在用记事本全部手写代码。
当然也有人为了方便会用些其他工具:
1.Notepad.exe记事本,(程序小,随时手工编辑,垃圾代码少,不能可视化预览)
2.Dreamweaver(老牌网页编辑工具,功能全,程序比较大,但对DIV+CSS可视化支持程度不太友好)
3..editplus(应该是升级版的记事本工具,代码编辑有颜色提示)
4.Ultraedit
5.Golive(Adobe宣布已停止开发)
6.Topstyle(帮助较多,适合初学者。
请科友完善此处)
DIV+CSS浏览器兼容办法
区别IE6与FF:
background:
orange;
*background:
blue;
区别IE6与IE7:
green!
important;
background:
区别IE7与FF:
*background:
green;
区别FF,IE7,IE6:
IE7,IE8兼容:
<
metahttp-equiv="
X-UA-Compatible"
content="
IE=EmulateIE7"
HEAD
1.CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义!
important可被FireFox和IE7识别*可被IE6、IE7识别_可被IE6识别*+可被IE7识别
2.IE专用的条件注释<
--其他浏览器-->
linkrel="
stylesheet"
type="
css.css"
--[ifIE7]>
--适合于IE7-->
ie7.css"
[endif]-->
--[iflteIE6]>
--适合于IE6及一下-->
ie.css"
3.几个浏览器对实际像素的解释IE/Opera:
对象的实际宽度=(margin-left)+width+(margin-right)Firefox/Mozilla:
对象的实际宽度=(margin-left)+(border-left-width)+(padding-left)+width+(padding-right)+(border-right-width)+(margin-right)
4.鼠标手势问题:
FireFox的cursor属性不支持hand,但是支持pointer,IE两个都支持;
所以为了兼容都用pointer
5.FireFox中设置HTML标签的Style属性时,所有位置、宽高和尺寸值必须后跟px,IE也支持此写法,因此统一加px单位。
如Obj.Style.Height=imgObj.Style.Height+‘px'
;
6.FireFox无法解析简写的padding属性设置,如padding5px4px3px1px;
必须改为padding-top:
5px;
padding-right:
4px;
padding-bottom:
3px;
padding-left:
1px0;
7.消除ul、ol等列表的缩进时,样式应写成:
list-style:
none;
margin:
0px;
padding:
其中margin属性对IE有效,padding属性对FireFox有效
8.CSS控制透明:
IE:
filter:
progid:
DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
FireFox:
opacity:
0.6;
9.CSS控制圆角:
不支持圆角;
FireFox:
-moz-border-radius:
或-moz-border-radius-topleft:
-moz-border-radius-topright:
-moz-border-radius-bottomleft:
-moz-border-radius-bottomright:
10.CSS双线凹凸边框:
border:
2pxoutset;
-moz-border-top-colors:
#d4d0c8white;
-moz-border-left-colors:
-moz-border-right-colors:
#404040#808080;
-moz-border-bottom-colors:
11.IE支持CSS方法cursor:
url()自定义光标样式文件和滚动条颜色风格;
FireFox对以上两者均不支持
12.IE有Select控件永远处于最上层的bug,且所有CSS对Select控件都不起作用
13.IE支持Form中的Label标签,包括图片和文字内容;
FireFox不支持包含图片的Label,点击图片不能让标记labelfor的Radio或CheckBox产生效果
14.FireFox中的TextArea不支持onScroll事件
15.FireFox不支持display
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DIV CSS