2007年11月14日
网站建设
1,036 views
上一节教程我们已经提到：div是XHTML中专门用于布局设计的容器对象。下面我们就来接触最常见的并列与嵌套。 看代码： XML/HTML代码 <div id=“header”>头部</div> <div id=“center”>中间部分</div> <div id=“footer”>底部</div> 在此我们为每一个div对象加了一个id名称，以便于css能够区别对待。 以上代码实现了头部、中间部分与底部的并列。但在大多情况下，中间部分又分为左栏与右栏部分。 这时候我们就要在中间部分嵌套进去一个左栏和一个右栏，如下代码： XML/HTML代码 <div id=“header”>头部</div> <div id=“center”> <div id=“left”></div> <div id=“right”></div> </div> <div id=“footer”>底部</div> 而在大多数情况下，我们还会为头部加上标题区与导航区。理论上也是嵌上去的，如代码： XML/HTML代码 <div id=“header”> <div id=“title”>标题区</div> <div id=“nav”>导航</div> </div> 但要注意的是：虽然是可以嵌套上去的，也可以多级嵌套，但这样势必会占用浏览器较多的资源来解析这种布局，有些时候还会出现解析错误。从实用性上来说，XHTML为我们提供了多种标签，如 h1,strong,span,p,ul,li,img,div,body……，它们每一个标签都有各自实用的元素，在合适的地方使用合乎元素意义的标签是很有必要的。这样不仅增加了可读性与可伸缩性，而且也符合“物有所值”的原则——div主要用于大块布局的调整。想一想，杀死焉用牛刀？ 因此上面的代码可以改良为： XML/HTML代码 <div id=“header”> <h1>标题区</h1> <ul>导航</ul> </div> <div id=“center”> <div id=“left”></div> <div id=“right”></div> </div> <div id=“footer”>底部</div> 来看一下代码在DW编辑器与IE浏览器中的对比： 补充说明： 从图中找不到中部，是因为XHTML中没有放置内容，且没有为他们设置css样式,所以其内部的左右栏也没有可显示的。 头部标题区与导航区由于使用了XHTML中的h1与ul标签，它们则按照其默认的样式显示。 [...]
css, css教程, div
2007年11月14日
网站建设
570 views
刚开始的时候已经讲过，对于理解CSS，大可从理解div标签开始。其实布局最核心的标签就是div,也是下一步我们接触最多的一个。 1、div的意义所在: div是一个容器，在使用时以<div></div>形式存在。 在XHTML中，每一个标签都可以称作是容器，能够放置内容。但div是XHTML中专门用于布局设计的容器对象。 在传统的表格布局中，完全依赖于表格对象table,在页面中绘制多个单元格，在表格中放置内容，达到排版目的。 而以div对象为核心的页面布局中，只需要用DIV和css便可以实现布局，因此习惯上对css布局称为div+css布局。 2、div只是一个区域标识，如果实用了div，但没有应用div的css样式的话，就等于只看到div的内容，而没有任何样式改观。这一点与使用表格布局有一点不同，如在实现左右分栏的时候，表格可以看到分栏效果，但没有应用css的div 只作为一个区域标识，没有改观。看如下代码实现的效果对比： XML/HTML代码 <table width=“100%” border=“1″> <!–此table加载自身默认的样式 –> <tr> <td>寂寞部屋，寻找一片属于我的避风港……</td> <td>寂寞部屋，寻找一片属于我的避风港……</td> </tr> </table> <div>寂寞部屋，寻找一片属于我的避风港……</div> <!–*此div未加任何样式 –> <div>寂寞部屋，寻找一片属于我的避风港……</div> </body> table显示了左右分栏，且边框按其默认的边框粗为1的样式展现。 div没有应用css样式，两行也不会分栏显示，也看不出有任何效果。正如上文所言，div 只是一个区域标识，划定了一个区域，而样式的责任交给了css 来处理。 那么怎么才能显示出分列的效果呢？ 细心的朋友会发现div容器内的内容没有变化，但在DW编辑器里看出div默认的是整行显示，另一个div则排在下方，而且每一个div都是100%宽度。用W3C官方的说法，div是一个块对象(block对象)，在XHTML中，几乎所有的对象都是默认两种类型： block 块对象：块对象指的是当前对象显示为一个块，默认为整行显示，下一对象在下一行显示。 in-line 行间对象(内联对象)：此类型与前者相反，它允许下一对象在与它本身的一行中显示。 正是由于div的内容没有效果出现，实现样式需要借助于css,才实现了内容与样式的分离，这样的分离，使得div的最终效果是由css来编写的。css可以实现左右分栏，可以实现上下分栏，而表格则没有这么大的灵活性。css与div内容的无关性，决定了div在设计上有极大的伸缩性，而不拘泥于单元格固定的模式束缚。 因此，实现css的布局，首先在XHTML中将内容用div标记出来，然后再用css来编写样式。 原文地址：http://www.chaojibaby.com/blog/article.asp?id=107
css, css教程, div
2007年11月14日
网站建设
649 views
css编码允许我们以多种方式应用到我们所设计的XHTML页面之中，主要有以下三种方式，应用时应根据设计要求确定。 1、行间样式表 行间样式表是将CSS样式编码应用到XHTML标签之中，格式如下： XML/HTML代码 <p style="font-size:15px;color:#33ccff;font-weight:normal;line-height:22px;"> [...文本内容...] </p> 行间样式是使用style=""来完成样式设置的，把标签所支持的属性丢到双引号之中，每一属性中间用分号隔开，结局处分号可以省略。 根据web2.0要求的“表现与内容分离”的标准，显然这种方式是不妥当的，它仅仅利用了CSS对元素的精确控制，没有实现样式与内容的分离，所以我们在应用中当完全杜绝此种方式。但然在调试CSS时还是可以临时使用的。 2、内部样式表 内部样式与行间样式都是将CSS样式写在页面之中，但不同的是，内部样式表方式把样式表统一放置在一个固定页部<head></head>标签内。如： XML/HTML代码 <html> <head> <title>页面标题</title> <style type="text/css"> body{} a:{} a:hover{} td{} p{} #content{} .text{} </style> </head> <body> </body> </html> 以上代码中的<style></style>标签内放置样式表，注意应当丢在<head></head>之中。此代码只能被当前页执行，不能跨页执行，因而也达到到重复利用CSS的目的，所以也不是我们所提倡的方式。下面就重点讲外部样式表的应用。 3、外部样式表 外部样式表是CSS应用最好的一种形式，把CSS样式代码集中放置在一个单独的CSS文件之中，由页面直接调用，可以实现多个页面的调用，实现了代码最大化重用及网站文件的最优化配置，是我们重点推荐的方式。调用方式如下： XML/HTML代码 <html> <head> <title>页面标题</title> <link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" /> </head> <body> </body> </html> 代码中使用link标签将名为style.css的css样式文件丢在<head></head>标签之中，便使用了外部CSS样式的调用。而href=""的作用则指明了CSS文件的路径。 外部调用CSS主要为了实现网站内容与样式的分离，有利于网站文件管理与样式管理，同时也增强了代码的可读性。在以后的探讨中，我们将深入了解如何组织CSS文件。 声明：为了便于讲解，以后的代码，会适当采用第二种内部样式表的方式，以便于对代码的修改来对比实现的效果。 [...]
css, css教程, div
2007年11月14日
网站建设
687 views
在了解XHTML中的常用选择符之前，我们先来温习下XHTML基本常识。 XHTML可以看做是一种由HTML向XML的过渡时期的网页结构语言，用于替代HTML，帮助开发适应新的标准以便转向XML。 XHTML在语法上比HTML要求更为严格，因此在开始编写XHTML时，一定要严格符合XHTML的语法规则。新的语法规则主要表现在以下几个方面： 1、属性名称必须小写 如：<span class="list"> class是一个属性名，不能使用CLASS或Class形式。 2、属性值必须用双引号 如：<div id ="content"> 不能写作<div id = content>的形式。 3、属性不能简写 HTML中的表单属性<input checked>及<option selected> 在XHTML中正确写法为<input checked="checked"/>及<option selected="selected"/> 4、必须使用结束标签 成对使用的标签如：<div>……</div>及<p>……</p>， 单体标签必须使用正斜线作为结束，如： <img scr=""/>及<br/> XHTML中的常用选择符： 1、类型选择符：是以网页中已有的标签类型作为选择符，如: body{} div{} span{} 2、群组选择符：除了对单个XHTML对象进行样式指定外，也可以对一组对象样式指定： h1,h2,h3,p,span{font-weight:700;font-size:15px;color:#33ccff;} 使用逗号对选择符分隔，使得里面的h1,h2,h3,p,span都具有相同的样式，益于减少代码量,改善CSS代码结构。 3、包含选择符：主要使用于指定某个对象中的子对象样式。中间使用空格隔开。如： XHTML代码如下： <p>这是一段落标记，在这里的<span>span内文本<span>实现加粗样式</p> CSS代码如下： p span{font-weight:bold;} 表示仅对P对象下的span子对象实现加粗样式。 4、id及class选择符：是CSS提供给用户自定义标签名称的选择符模式。有利于CSS的扩展性与可读性。 如： <img id="pic_left"></img>与<img id="pic_right"></img>是两个不同的元素。 注意：在同一个页面中，一个id名称必须唯一。 对应CSS如下： #pic_left{} #pic_right{} 用不同的id来区分不同的对象，从而实现不同的样式。 而class的好处在于为不同的对象指派相同的样式,从而实现了代码的重复使用性，缩减了代码量。 <p class="title"></p> [...]
css, css教程, div
2007年11月14日
网站建设
480 views
CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”，我感到这样顺口一点，没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。 1、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？ 当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页 中使用的CSS，采用文档头部方式；只有在一个网页一、两个地方才用到的CSS，采用行内插入方式。 2、CSS的三种用法在一个网页中要以混用吗？ 三种用法可以混用，且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因，浏览器在显示网页时是这样处 理的：先检查有没有行内插入式CSS，有就执行了，针对本句的其它CSS就不去管它了；其次检查头部方式的CSS，有就执行 了；在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出，三种CSS的执行优先级是：行内插入式、头部方 式、外连文件方式。 3、在Dreamweaver3中如何使外部文件式CSS？ 在Dreamweaver3中使用外连文件式CSS并没有特殊要求，同样是用记事本创建一个*.css文件，在网页的<head>与 </head>之间加上一句这样的代码：<link rel="stylesheet" href="在这里填上你的CSS文件地址（相对路径+文件 名）" type="text/css"> 就行了。 4、如何用Dreamweaver3快速创建CSS外连式文件？ 对于一个初接触CSS的网页设计人员来讲，要用记事之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于 Dreamweaver3对CSS支持的很好，用它来帮助就轻松多了。具体可以这样操作： 1）先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver3的编辑窗中调出CSS面板，一个一个地定 义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改； 2）全部定义好后，再用记事本创建一个空的CSS外连式文件，把在<head>与</head>之间的那段定义好的CSS复制 到CSS文件中去，就大功告成了。整个过程就是点鼠标，方便吧？ 5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗？ 不用！先用CSS面板定义好要用的CSS，然后，在要插入CSS的标记插入：style=""，再把你刚才定义的CSS从<head> 后面拖到这个双引号中来，把花括号以外的部分删去就行了。 6、在方档头部方式和外连文件方式的CSS中都有“<!–”和“–>”，好象没什么用，不要可以吗？ 这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的内 容。虽然现在使用不支持CSS浏览器的人已很少了，由于互联网上几乎什么可能都会发生，所以还是留着为妙。 7、如何给一部分文字加背景色？ 给文字加上不同颜色，在DW3中只要在属性面板上选取文字的颜色就行了，非常方便，但要给部分文字加不同的背景色 却没有相应的功能，我们可以先做一个定义背景色的CSS（如：bgstyle），在DW3中点几下鼠就完成了。如一个定义淡黄色 背景的CSS是这样的： <style type="text/css"> <!– .bgstyle { background: #FFFFCC} –> </style> 在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。 8、如何给部分文字加背景图像？ 与加背景色操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的： <style type="text/css"> <!– .imgbgstyle { [...]
css
2007年11月14日
网站建设
478 views
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。 二.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。 三.区分大小写 当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。 class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。 四.取消class和id前的元素限定 当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如： div#content { /* declarations */ } fieldset.details { /* declarations */ } 可以写成 #content { /* declarations */ } .details { /* declarations */ } 这样可以节省一些字节。 五.默认值 通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样： * { margin:0; padding:0; } 六.不需要重复定义可继承的值 CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。 七.最近优先原则 如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码 Update: Lorem ipsum dolor set 在CSS文件中，你已经定义了元素p，又定义了一个classupdate p [...]
css
2007年11月14日
网站建设
506 views
近来有点兴趣在学css+DIV，刚好看到这个文章，贴下来有空学学…… 页头：header 登录条：loginbar 标志：logo 侧栏：sidebar 广告：banner 导航：nav 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 热点：hot 新闻：news 下载：download 注册：regsiter 状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendlink 页脚：footer 版权：copyright 提交：submit 文本框：textbox 统计：count 以上结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.不加中杠和下划线； 4.尽量不缩写，除非一看就明白的单词。 11.17 网易的CSS写法 /* 全局CSS定义 */ body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: [...]
css, div
Recent Comments