把我制作好的图片用DIV CSS样式切成html 静态页 -前端开发-猪八戒网
扫一扫，随时随地挑选人才和公司
无线工作台，管理更高效更自由
微信公众号
随时掌握一手资讯
把我制作好的图片用DIV CSS样式切成html 静态页
把我制作好的图片用DIV CSS样式切成html 静态页
项目金额：￥300
我的页面总共是七个页面三个列表页
三个详情页一个注册页头和尾都是一样的 中间部分有些差别
要求：1、期中有一个简单的小JS效果要实现 鼠标点击头部的出发地和目的地文本框时 在文本框下面显示 选项卡层 可以选择省市县 点击确定和关系将关闭层 传送数据我自己开发 只要把效果做出来就可以2、切图时要注册每个细节
图片是我制作的
我对每个地方都是每像素调整的 我不希望切出来的图片和我的设计图有很大出入3、最好是有多年切图经验的人来做
我也是做开发的……。我在后期套程序的时候要好干活 4、有不明白的地方要及时问我，即时沟通，
不要自己做主 有些动态效果无法在静态图上面表示 只能问我
QQ：58****3463。5、做完第一期赏金是300元
等我套程序时 可能有些地方还要做些调试 完事之后再加100元6、html要 兼容几大主流浏览器 IE 6
设计图.rar
近3个月成交 0笔|好评率
已从事前端工作三年，可长期合作；秋秋：；可先看案例
客户对服务商的评价：
工作速度：5服务态度：5完成质量：5
近3个月成交 318笔
|好评率 99%
擅长 域名,手机网站
近3个月成交 154笔
|好评率 99%
擅长 软件界面设计,手机网站,移动应用UI设计,模板建站
项目周期: 0天
近3个月成交 72笔
|好评率 100%
擅长 手机网站,网站定制开发
项目周期: 0天
昌吉回族自治州
近3个月成交 0笔
|好评率 100%
擅长 APP开发,手机网站,行业解决方案
项目周期: 0天
近3个月成交 0笔
|好评率 100%
擅长 手机网站,网站定制开发,后端开发
近3个月成交 0笔
|好评率 100%
近3个月成交 0笔
|好评率 100%
擅长 网站定制开发
项目周期: 0天
近3个月成交 3笔
|好评率 100%
擅长 APP开发,后端开发,微信开发
近3个月成交 7笔
|好评率 100%
擅长 手机网站,网站安全、维护,VI视觉,模板建站
项目周期: 0天
进行中的项目静态网页设计网站制作：第九讲 DIV+CSS界面排版
我的图书馆
静态网页设计网站制作：第九讲 DIV+CSS界面排版
第九讲 DIV+CSS界面排版
【教学内容】
DIV+CSS技术概念常识
DIV+CSS页面布局的分析方法
DIV+CSS页面布局的编辑方法
DIV+CSS页面布局常见错误分析。
【教学目的】
了解DIV+CSS页面布局基本概念及布局优势
理解掌握DIV+CSS页面布局基本方法
掌握DIV+CSS页面布局常见错误解决方案。
【教学重、难点】
重点：DIV+CSS页面布局编辑方法
难点：CSS对DIV的控制
【教学方式】
采取讲授、讨论和案例分析相结合的方式。
一、DIV+CSS技术应用网页效果预览
图2-9-1 DIV+CSS技术应用网页效果图&
二、实例分析，认识DIV+CSS技术
1.认识DIV+CSS技术，了解学习该技术的必要性
div 是标签 css是层叠样式表。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计标记中的表格（table）定位方式的区别，因为现行企业网站设计过程中大多是采用DIV+CSS的方式来代替表格实现各种定位，将页面内容与样式分离。虽然DIV+CSS高级布局已逐渐流行，但是DIV+CSS实现起来要相对复杂一些，所以在可以预计的将来，表格的地位依然十分重要，但是DIV代表的是网页设计的发展方向发展的方向。它们一个简单，一个先进，至于网页设计中选择哪种布局模式，就看设计者个人的偏好和设计要求了。
DIV+CSS网页布局的意义体现在如下方面： 　　由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小,使得页面载入得更快、降低流量费用；跟据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式；由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录；由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形的目的。
2.实例分析网页设计DIV结构
通过上图不难看出，整个网页的布局是有规律可寻得，它大致可以分为顶部区域，中上部区域、中下部区域和底部区域。而中上部区域和中下部区域又可以分成若干小的区块，分析后效果图如下：　
图2-9-2 区块划分分析图
根据上图，我们得出实际页面布局图如下：
图2-9-3 页面布局层叠结构图&
到此为止DIV层结构分析完毕，接下来我们开始写HITM标记和层叠样式表
三、实例制作步骤：
1.启动DreamWeaver，新建站点为“zzrsb”，路径为E:/websit，新建一个网页文件，命名为“zzrsb.html”，并保存在站点文件夹下。
2.在&body&标记中写出DIV结构，代码如下：
&div id="content"&& &div id="head"&顶部区域&/div&& &div id="webbody1"&主题1区&&& &div id="webbody1Left"&主题1区左&/div&&&& &div id="webbody1Right"&主题1区右&/div&& &/div&& &div id="webbody2"&主题2区&&& &div id="webbody2Left"&主题2区左&&&&& &div id="webbody2LeftTop"&主题2区左顶部&/div&&&&&& &div id="webbody2LeftFoot"&主题2区左底部&&&&&&& &div id="webbody2LeftFootLeft"&主题2区左底部左边&/div&&&&&&&& &div id="webbody2LeftFootRight"&主题2区左底部右边&/div&&&&&& &/div&&&& &/div&&&& &div id="webbody2Right"&主题2区右&&&&& &div id="webbody2RightTop"&主题2区顶部&/div&&&&&& &div id="webbody2RightFoot"&主题2区底部&/div&&&& &/div&& &/div&& &div id="foot"&底部区域&/div&&/div&
3.新建一个CSS文档，命名为“style.css”,并保存在站点文件夹下。
/*基本信息*/body {font:12px Tmargin:0text-align:background:#FFF;}/*页面层容器*/#content {width:100%}/*页面头部*/#head {width:1000margin:0height:100background:#900000}/*页面主体1*/#webbody1 {width:1000margin:0height:200background:#FEFEFE}/*页面主体1*/#webbody2 {width:1000margin:0height:200background:#FCFCFC}/*页面底部*/#foot {width:1000margin:0height:50background:#900000}/*主题1区左*/#webbody1Left {width:746 /*设定宽度*/text-align: /*文字左对齐*/float: /*浮动居左*/clear: /*不允许左侧存在浮动*/overflow: /*超出宽度部分隐藏*/}/*主题1区右*/#webbody1Right {width:254text-align:float: /*浮动居右*/clear: /*不允许右侧存在浮动*/overflow:hidden}/*主题2区左*/#webbody2Left {……}/*主题2区右*/#webbody2Right {……}/*主题2区左底部左边*/#webbody2LeftFootLeft {width:373 /*设定宽度*/……}/*主题2区左底部右边*/#webbody2LeftFootRight {width:373text-align:……}
4.“zzrsb.html”链接“style.CSS”文件，链接方法同第八讲中内容，到此为止，网页框架制作完毕。效果图如下：
图2-9-4 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：&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&[1]　
【课后小结】
&&& DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。本讲重点是以一个网页布局实例讲解了通过样式表文件格式化DIV区块的方法。　
【练习题】
&模仿练习题：
&&&根据本讲所讲内容，用DIV+CSS的方法完成组织人事部网页布局。
TA的推荐TA的最新馆藏[转]&
喜欢该文的人也喜欢如何使用CSS来进行网页排版 -css教程-PHP中文网QQ群微信公众号还没有收藏如何使用CSS来进行网页排版 第1天:选择什么样的DOCTYPE前言大家好！这个系列文章是按阿捷自己制作w3cn.org站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作，同时把过程中的心得和经验记录下来，希望对大家有点帮助。好了，让我们开始吧。第一天开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。查看本站首页原代码，可以看到第一行就是：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Frameset//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&&那么这些代码有什么含义？一定要放置吗？什么是DOCTYPE上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如&br&。完整代码如下：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Frameset//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&&我们选择什么样的DOCTYPE理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。注：上面说的&表现层的标识、属性&是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。呵呵，有点抽象了，这个概念需要我们在应用过程中逐步领会。补充DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。更多细节可以访问W3C的网站第2天:什么是名字空间DOCTYPE声明好以后，接下来的代码是：&html xmlns=&http://www.w3.org/1999/xhtml& lang=&gb2312&& 通常我们HTML4.0的代码只是&html&，这里的&xmlns&是什么呢？这个&xmlns&是XHTML namespace的缩写，叫做&名字空间&声明。名字空间是什么作用呢？阿捷自己的理解是：由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。例如：小王和小李都定义了一个&book&标识，如果小王的名字空间是&&，小李的名字空间是&&，那么当两个文档交换数据时，也不会混淆&book&标识，因为它属于不同的名字空间。更通俗的解释是：名字空间就是给文档做一个标记，告诉别人，这个文档是属于谁的。只不过这个&谁&用了一个网址来代替。XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是&http://www.w3.org/1999/xhtml&。如果你还不太理解也不要紧，目前阶段我们只要照抄代码就可以了。后面的lang=&gb2312&,指定你的文档用简体中文。第3天:定义语言编码第三步是定义你的语言编码，类似这样：&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /& 为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。通常这样定义就可以了。但是要补充说明的是，XML文档并不是这样定义语言编码的，XML的定义方式如下：&?xml version=&1.0& encoding=&gb2312&?& 你在的首页代码第一行就可以看见类似的语句，这也是W3C推荐使用的定义方法。那为什么我们不直接采用这种方法呢？原因是一些浏览器对标准的支持不完善，不能正确理解这样的定义方法，比如IE6/windows。所以在目前过渡方案下，我们依然推荐使用meta方式。当然，你可以两种方法都写。看本站源代码，你会发现语言编码定义的地方还多一句：&meta http-equiv=&Content-Language& content=&gb2312& /& 这是针对老版本浏览器写的，以保证各种浏览器都能正确解释页面。注意：在上面声明语句的最后，你看到有一个斜杠&/&，这和我们以前的HTML4.0的代码写法不同。原因是XHTML语法规则要求所有的标识都必须有开始和结束。例如&body&和&/body&、&p&和&/p&等，对于不成对的标识，要求在标识最后加一个空格，然后跟一个&/&。例如&br&写成&br /&、&img&写成&img /&，加空格的原因是避免代码连在一起浏览器不识别。第4天:调用样式表用web标准设计网站，过渡的方法主要是采用XHTML+CSS，css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS，如果你以前不常用，那么现在就开始学习吧。要制作符合web标准的网站，不懂CSS是设计不出漂亮的页面的。事实上，所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局，现在要改用p来定位和布局。这是思维方式的变化，一开始有些不习惯。呵呵，任何变革都会有阻力的，为了享受标准带来的&益处&，放弃一些老的传统做法是值得的。外部调用样式表在以前，我们通常采用2种方法使用样式表：页面内嵌法：就是将样式表直接写在页面代码的head区。类似这样： &style type=&text/css&& &!-- body { background : color : } --& &/style& 外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。 &link rel=&stylesheet& rev=&stylesheet& href=&css/style.css& type=&text/css& media=&all& /& 在符合web标准的设计中，我们使用外部调用法，好处不言而喻，你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。双表法调用样式表查看某些符合标准站点的原代码，你可能看到，在调用样式表的地方有如下2句：&link rel=&stylesheet& rev=&stylesheet& href=&css/style.css& type=&text/css& media=&all& /& &style type=&text/css& media=&all&&@import url( css/style01.css );&/style& 为什么要写两次呢？实际上一般情况下用外联法调用(就是第一句)就足够了。我这里使用双表调用只是一种示例。其中的&@import&命令用于输入样式表。而&@import&命令在netscape 4.0版本浏览器是无效的。也就是说，当你希望某些效果在netscape 4.0浏览器中隐藏，在4.0以上或其它浏览器中又显示的时候，你可以采用&@import&命令方法调用样式表。第5天:head区的其他设置这些技巧主要讲meta标签设置的，其实与符合web标准关系不大，只要注意在最后加&/&关闭标签就可以，但是既然是入门教程，就写得详细一点吧。收藏夹小图标如果你将本站加入收藏夹，可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单，首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区：&link rel=&icon& href=&/favicon.ico& type=&image/x-icon& /&&link rel=&shortcut icon& href=&/favicon.ico& type=&image/x-icon& /&为搜索引擎准备的内容代码如下，替换成你自己站点的内容就可以：允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索，推荐采用robots.txt方法&meta content=&all& name=&robots& /& 设置站点作者信息&meta name=&author& content=&,阿捷& /& 设置站点版权信息&meta name=&Copyright& content=&www.w3cn.org,自由版权,任意转载& /& 站点的简要介绍(推荐)&meta name=&description& content=&新网页设计师。web标准的教程站点，推动web标准在中国的应用& /& 站点的关键词(推荐)&meta content=&designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie& name=&keywords& /& 先介绍这么多。补充说明，前面花了5节都是讲head区的代码，实际页面内容还一字未提，呵呵，不要急，其实head区是非常重要的，看一个页面的head的代码就可以知道设计师是否够专业。第6天:XHTML代码规范在开始正式内容制作之前，我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。1.所有的标记都必须要有一个相应的结束标记以前在HTML中，你可以打开许多标签，例如&p&和&li&而不一定写对应的&/p&和&/li&来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个&/&来关闭它。例如:&br /&&img height=&80& alt=&网页设计师& src=&../images/logo_w3cn_200x80.gif& width=&200& /& 2.所有标签的元素和属性的名字都必须使用小写与HTML不一样，XHTML对大小写是敏感的，&title&和&TITLE&是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：&BODY&必须写成&body& 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字&onMouseOver&也必须修改成&onmouseover&。3.所有的XML标记都必须合理嵌套同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：&p&&b&&/p&/b& 必须修改为：&p&&b&&/b&/p& 就是说，一层一层的嵌套必须是严格对称。4.所有的属性必须用引号&&括起来在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:&height=80& 必须修改为：&height=&80&&特殊情况，你需要在属性值里使用双引号，你可以用&，单引号可以使用'，例如：&alt=&say'hello'&& 5.把所有&和&特殊符号用编码表示任何小于号（&），不是标签的一部分，都必须被编码为& 任何大于号（&），不是标签的一部分，都必须被编码为& 任何与号（&），不是实体的一部分的，都必须被编码为& 注：以上字符之间无空格。6.给所有属性赋一个值XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：&td nowrap& &input type=&checkbox& name=&shirt& value=&medium& checked& 必须修改为：&td nowrap=&nowrap&& &input type=&checkbox& name=&shirt& value=&medium& checked=&checked&& 7.不要在注释内容中使“--”“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:&!--这里是注释-----------这里是注释--& 用等号或者空格替换内部的虚线。&!--这里是注释============这里是注释--& 以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。第7天:CSS入门在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了，可以跳过这一节，直接进入下一节。CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。1.基本语法规范分析一个典型CSS的语句：p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 其中&p&我们称为&选择器&(selectors)，指明我们要给&p&定义样式；样式声明写在一对大括号&{}&中；COLOR和BACKGROUND称为&属性&(property)，不同属性之间用分号&;&分隔；&#FF0000&和&#FFFFFF&是属性的值(value)。2.颜色值颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。3.定义字体web标准推荐如下字体定义方法：body { font-family : &Lucida Grande&, Verdana, Lucida, Arial, Helvetica, 宋体,sans- } 字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； Lucida Grande字体适合Mac OS X； Verdana字体适合所有的Windows系统；Lucida适合UNIX用户 &宋体&适合中文简体用户; 如果所列出的字体都不能用，则默认的sans-serif字体能保证调用; 4.群选择器当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12 } 5.派生选择器可以使用派生选择器给一个元素里的子元素定义样式，例如这样：li strong { font-style : font-weight : normal；} 就是给li下面的子元素strong定义一个斜体不加粗的样式。6.id选择器用CSS布局主要用层&p&来实现，而p的样式通过&id选择器&来定义。例如我们首先定义一个层&p id=&menubar&&&/p&然后在样式表里这样定义：#menubar {MARGIN: 0BACKGROUND: #FEFEFE;COLOR: #666;} 其中&menubar&是你自己定义的id名称。注意在前面加&#&号。id选择器也同样支持派生，例如：#menubar p { text-align : margin-top : 10 } 这个方法主要用来定义层和那些比较复杂，有多个派生的元素。7.类别选择器在CSS里用一个点开头表示类别选择器定义，例如：.14px {color : #f60 ;font-size:14} 在页面中，用class=&类别名&的方法调用：&span class=&14px&&14px大小的字体&/span& 这个方法比较简单灵活，可以随时根据页面需要新建和删除。8.定义链接的样式CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：a:link{font-weight :text-decoration :color : #c00 ;}a:visited {font-weight :text-decoration :color : #c30 ;}a:hover {font-weight :text-decoration :color : #f60 ;}a:active {font-weight :text-decoration :color : #F90 ;} 以上语句分别定义了&链接、已访问过的链接、鼠标停在上方时、点下鼠标时&的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。呵呵，看了这么多，有点头晕吧，实际上CSS的语法规范还有很多，这里列的只是一些常用的，毕竟我们是循序渐进，不可能一口吃成胖子:)第8天:CSS布局入门CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(p)来定位，通过层的margin,padding,border等属性来控制版块的间距。1.定义p分析一个典型的定义p例子：#sample{ MARGIN: 10px 10px 10px 10PADDING:20px 10px 10px 20 BORDER-TOP: #CCC 2BORDER-RIGHT: #CCC 2BORDER-BOTTOM: #CCC 2BORDER-LEFT: #CCC 2BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-COLOR: #666;TEXT-ALIGN:LINE-HEIGHT: 150%; WIDTH:60%; } 说明如下：层的名称为sample，在页面中用&p id=&sample&&就可以调用这个样式。 MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。&10px 10px 10px 10px&分别代表&上右下左&(顺时针方向)四个边距，如果都一样，可以缩写成&MARGIN: 10&。如果边距为零，要写成&MARGIN: 0&。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位&px&。MARGIN是透明元素，不能定义颜色。 PADDING是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成&PADDING:0px&。单独指定左边可以写成&PADDING-LEFT: 0&。PADDING是透明元素，不能定义颜色。 BORDER是指层的边框，&BORDER-RIGHT: #CCC 2&是定义层的右边框颜色为&#CCC&，宽度为&2px&，样式为&solid&直线。如果要虚线样式可以用&dotted&。 BACKGROUND是定义层的背景。分2级定义，先定义图片背景，采用&url(../images/bg_logo.gif)&来指定背景图片路径；其次定义背景色&#FEFEFE&。&no-repeat&指背景图片不需要重复，如果需要横向重复用&repeat-x&,纵向重复用&repeat-y&,重复铺满整个背景用&repeat&。后面的&&是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE COLOR用于定义字体颜色，上一节已经介绍过。TEXT-ALIGN用来定义层中的内容排列方式，center居中,left居左,right居右。LINE-HEIGHT定义行高，150%是指高度为标准高度的150%，也可以写作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一样的意思。 WIDTH是定义层的宽度，可以采用固定值，例如500px，也可以采用百分比，象这里的&60%&。要注意的是:这个宽度仅仅指你内容的宽度，不包含margin,border和padding。但在有些浏览器中不是这么定义的，需要你多试试。下面是这个层的实际表现:演示页面我们可以看到边框是2px的灰色，背景图片在右下没有重复，内容距离上和左边框20px，内容居中，一切和预想的一样。hoho，虽然不好看，但它是最基本的，掌握了它，你就已经学会一半的CSS布局技术了。就是这样，不算难吧！(另一半是什么？另一半是层与层之间的定位。我会在后面逐步讲解。)2.CSS2盒模型自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层&p&。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的sample层就是一个典型的盒。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。3.辅助图片一律用背景处理用XHTML+CSS布局，有一个技术一开始让你不习惯，应该说是一种思维方式与传统表格布局不一样，那就是：所有辅助图片都用背景来实现。类似这样：BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no- 尽管可以用&img&直接插在内容中，但这是不推荐的。这里的&辅助图片&是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。例如：相册中的图片、图片新闻中的图片，上面的3d盒模型图片都属于内容的一部分，它们可以用&img&元素直接插在页面里，而其它的类似logo，标题图片，列表前缀图片都必须采用背景方式或者其他CSS方式显示。这样做的原因有2点： 将表现与结构彻底相分离(参考阅读另一篇文章：《理解表现与结构相分离》)，用CSS控制所有的外观表现，便于改版。
使页面更具有易用性，更有亲和力。例如：盲人使用屏幕阅读机，用背景技术实现的图片就不会被朗读出来。第9天:第一个CSS布局实例接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用p也可以实现。技术有一个成熟的过程，把p看成和TABLE一样的工具，如何运用就看你的想象力了。注：在实际应用过程中，p在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，我们开始：1.确定布局w3cn的最初设计草图如下：用表格的设计方法的话，一般都是上中下三行布局。用p的话，我考虑使用三列来布局,成为这样。2.定义body样式先定义整个页面的body的样式,代码如下：body { MARGIN: 0PADDING: 0 BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-COLOR: #666;FONT-SIZE:12LINE-HEIGHT:150%; } 以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。3.定义主要的p初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义:/*定义页面左列样式*/#left{ WIDTH:200MARGIN: 0PADDING: 0BACKGROUND: #CDCDCD;}/*定义页面中列样式*/#middle{ POSITION:LEFT:200TOP:0WIDTH:300MARGIN: 0PADDING: 0BACKGROUND: #DADADA;}/*定义页面右列样式*/#right{ POSITION:LEFT:500TOP:0WIDTH:280MARGIN: 0PADDING: 0BACKGROUND: #FFF; } 注意：定义中列和右列p我都采用了POSITION:，然后分别定义了LEFT:200TOP:0和LEFT:500TOP:0这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。这时候整个页面的代码是：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&html xmlns=&http://www.w3.org/1999/xhtml& lang=&gb2312&&&head&&title&欢迎进入新《网页设计师》:web标准教程及推广&/title&&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&&meta http-equiv=&Content-Language& content=&gb2312& /&&meta content=&all& name=&robots& /&&meta name=&author& content=&ajie(,阿捷& /&&meta name=&Copyright& content=&www.w3cn.org,自由版权,任意转载& /&&meta name=&description& content=&新网页设计师,web标准的教程站点,推动web标准在中国的应用.& /&&meta content=&web标准,教程,web, standards, xhtml, css, usability, accessibility& name=&keywords& /&&link rel=&icon& href=&/favicon.ico& type=&image/x-icon& /&&link rel=&shortcut icon& href=&http://www.w3cn.org/favicon.ico& type=&image/x-icon& /&&link rel=&stylesheet& rev=&stylesheet& href=&css/style01.css& type=&text/css& media=&all& /&&/head&&body&&p id=&left&&页面左列&/p&&p id=&middle&&页面中列&/p&&p id=&right&&页面右列&/p&&/body&&/html& 这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？4.100%自适应高度?为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置&height:100%;&，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个p一个绝对高度:&height:1000&，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中详细介绍。第10天:自适应高度如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用p布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套p，把三列放进一个p中，就做到了底部对齐。这里是实现例子(白色背景框模拟一个页面)：这个例子的页面主要代码如下：&p id=&header&&&/p&&p id=&mainbox&&
&p id=&menu&&&/p&
&p id=&sidebar&&&/p&
&p id=&content&&&/p&&/p&&p id=&footer&&&/p&具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加，#content的高度就会增高，同时#mainbox的高度也会撑开，#footer层就自动下移。这样就实现了高度的自适应。另外值得注意的是：#menu和#content都是浮动在页面右面&FLOAT:&,#sidebar是浮动在#menu层的左面&FLOAT:&，这是浮动法定位，还可以采用绝对定位来实现这样的效果。这个方法存在另一个问题，就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满。(不能使用#mainbox的背景色，因为在Mozilla等浏览器中#mainbox的背景色失效。)好了，主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦。如果你希望尝试其他布局，推荐看看以下文章:第11天:不用表格的菜单布局初步搭建起来，我开始填充里面的内容。首先是定义logo图片：样式表：#logo {MARGIN: 0padding:0WIDTH: 200HEIGHT:80}页面代码：&p id=&logo&&&a title=&网页设计师& href=&http://www.w3cn.org/& &&img height=&80& alt=&链接到w3cn.org首页& src=&images/logo_w3cn_200x80.gif& width=&200& /&&/a&&/p& 以上代码现在应该容易理解。先在CSS定义了一个logo的层，然后在页面中调用它。需要说明的是，为了使网页有更好的易用性，web标准要求大家给所有的、属于正式内容的图片，加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字)，所以不要只写成无意义的图片名称。接下来是定义菜单。1.不用表格的菜单(纵向)我们先来看菜单的最终效果：演示页面通常方法我们至少嵌套2层表格来实现这样的菜单，间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现；背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码，你会看到只有如下几句：&p id=&menu&& &ul&&li&&a title=&网站标准& href=&web_standards.html&&什么是网站标准&/a&&/li&&li&&a title=&标准的好处& href=&web_standards_value.html&&使用标准的好处&/a&&/li&&li&&a title=&怎样过渡& href=&../../templates/index.html&&网页模板下载&/a&&/li&&li&&a title=&相关教程& href=&../index.html&&WEB标准相关教程&/a&&/li&&li&&a title=&工具& href=&&&网页制作软件&/a&&/li&&li&&a title=&资源及链接& href=&../../help/index.html&&使用帮助&/a&&/li&&/ul&&/p&没有用任何table,而用的是无序列&li&，整个菜单的效果实现的秘密完全在于id=&menu&，我们再来看CSS中关于menu的定义：(1)首先定义了menu层的主要样式:#menu {MARGIN: 15px 20px 0px 15 /*定义层的外边框距离*/PADDING:15 /*定义层的内边框为15px*/BACKGROUND: # /*定义背景颜色*/COLOR: #666; /*定义字体颜色*/BORDER:#fff 2 /*定义边框为2px白色线条*/WIDTH:160 /*定义内容的宽度为160px*/} (2)其次定义无序列表的样式：#menu ul {MARGIN: 0PADDING: 0BORDER: /*不显示边框*/LINE-HEIGHT: LIST-STYLE-TYPE:}#menu li {BORDER-TOP: #FFF 1 MARGIN: 0}说明：这里用的是id选择器的派生方法定义(参考第7天：CSS入门的介绍)了在menu层中的子元素&ul&和&li&的样式。LIST-STYLE-TYPE: none一句表示不采用无序列表的默认样式，即：不显示小圆点（我们后面用自己的图标来代替小圆点）。BORDER-TOP: #FFF 1则定义了菜单之间的1px间隔线。(3)定义onmouseover效果#menu li a {PADDING:5px 0px 5px 15DISPLAY: FONT-WEIGHT: BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8 WIDTH: 100%; COLOR: #444; TEXT-DECORATION:}#menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8COLOR: # }解释如下：&display:&表示将标签a当作块级元素来显示，使得链接变成一个按钮； &BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8&这一句定义了替代li的小圆点的图标。&transparent&指背景为透明，&2px 8px&指定图标的位置是距左边2px，距上边8px。这一句也可以拆分写成四句：&BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8 BACKGROUND-REPEAT: no- BACKGROUND-COLOR:& &#menu li a:hover&定义了当鼠标移动到链接上以后的颜色变化和小图标变化。ok，不用表格的菜单就这样实现了。大家可以明显感觉到，原来写在HTML里的表现样式全部剥离放到CSS文件里去了。页面代码节约了大半。通过CSS要修改菜单样式就很简单了。2.不用表格的菜单(横向)上面是纵向的菜单,如果要显示横向菜单，用li也可以吗？当然是可以的，下面给出代码，效果就在本页顶部:页面代码&p id=&submenu&& &ul&&li id=&one&&&a title=&首页& href=&http://www.w3cn.org/&&Home&/a&&/li&&li id=&two&&&a title=&关于我们& href=&http://www.w3cn.org/aboutus.html&&关于我们&/a&&/li&&li id=&three&&&a title=&网站标准& href=&http://www.w3cn.org/webstandards.html&&网站标准&/a&&/li&&li id=&four&&&a title=&标准的好处& href=&http://www.w3cn.org/benefits.html&&标准的好处&/a&&/li&&li id=&five&&&a title=&怎样过渡& href=&http://www.w3cn.org/howto.html&&怎样过渡&/a&&/li&&li id=&six&&&a title=&相关教程& href=&http://www.w3cn.org/tutorial.html&&相关教程&/a&&/li&&li id=&seven&&&a title=&工具& href=&http://www.w3cn.org/tools.html&&工具&/a&&/li&&li id=&eight&&&a title=&资源及链接& href=&http://www.w3cn.org/resources.html&&资源及链接&/a&&/li&&li id=&nine&&&a title=&常见问题& href=&http://www.w3cn.org/faq.html&&常见问题&/a&&/li&&/ul&&/p& 样式表代码#submenu { MARGIN: 0px 8px 0px 8 PADDING: 4px 0px 0px 0 BORDER: #fff 1 BACKGROUND: # COLOR: #666; HEIGHT:25 } #submenu ul { CLEAR: MARGIN: 0 PADDING:0 BORDER: 0 LIST-STYLE-TYPE: TEXT-ALIGN: DISPLAY:} #submenu li { FLOAT: DISPLAY: MARGIN: 0 PADDING: 0 TEXT-ALIGN: center} #submenu li a { DISPLAY: PADDING:2px 3px 2px 3 BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8 FONT-WEIGHT: WIDTH: 100%; COLOR: #444; TEXT-DECORATION: } #submenu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8 COLOR: # } #submenu ul li#one A { WIDTH: 60px} #submenu ul li#two A { WIDTH: 80px} #submenu ul li#three A { WIDTH: 80px} #submenu ul li#four A { WIDTH: 90px} #submenu ul li#five A { WIDTH: 80px} #submenu ul li#six A { WIDTH: 80px} #submenu ul li#seven A { WIDTH: 60px} #submenu ul li#eight A { WIDTH: 90px} #submenu ul li#nine A { WIDTH: 80px} 以上代码不逐一分析了。横向菜单的关键在于：定义&li&样式时的&FLOAT:&语句。另外注意UL定义中的DISPLAY:一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔。好了，你也可以动手试试，用li实现各种各样的菜单样式。Tips:如果你子菜单的宽度总和大于层的宽度，菜单会自动折行，利用这个原理可以实现单个无序列表的2列或者3列排版，这是原来HTML很难实现的。第12天:校验及常见错误辛苦了好多天，我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合web标准？W3C和一些志愿者网站提供了在线校验程序，来帮助我们检查页面是否符合标准，并提供了修正错误的帮助信息。这些校验非常有用，是我调试页面第一步要做的事情。1.XHTML校验校验网址：校验方式:网址校验、文件上传校验校验成功，会显示&This Page Is Valid XHTML 1.0 Transitional!&,如图：校验失败，会显示更多校验选项和错误信息，如图：一般选择&Show Source&和&Verbose Output&可以帮助你找到错误代码所在行和错误原因。XHTML校验常见错误原因对照表No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。end tag for &img& omitted, but OMITTAG NO was specified--图片标签没有加&/&关闭。an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。element &p& undefined---p标签不能用大写，要改成小写p。required attribute &alt& not specified---图片需要加alt属性。required attribute &type& not specified---JS或者CSS调用的标签漏了type属性。其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的，比如忘记了一个&/li&其他&li&标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，其他的错误也都没有了。如果你的页面通过XHTML1.0校验，可以在页面上放置一个图标： 代码如下：&p& &a href=&http://validator.w3.org/check/referer&&&img src=&http://www.w3.org/Icons/valid-xhtml10& alt=&Valid XHTML 1.0!& height=&31& width=&88& /&&/a& &/p&2.CSS2校验校验网址：校验方式:网址校验、文件上传校验、直接贴入代码校验校验成功，会显示&恭喜恭喜，此文档已经通过样式表校验! &,hoho,校验信息支持中文噢。如图：校验失败，会显示两类错误：错误和警告。错误表示一定要修正，否则无法通过校验；警告表示有代码不被W3C推荐,建议修改。CSS2校验常见错误原因对照表(错误)无效数字 : color909090 不是一个 color 值 : 909090 ---十六进制颜色值必须加&#&号，即#909090(错误)无效数字 : margin-topUnknown dimension : 6pixels ---pixels不是一个单位值，正确写法6px(错误)属性 scrollbar-face-color 不存在 : #eeeeee --- 定义滚动条颜色是非标准的属性(错误)值 cursorhand不存在 : hand是非标准属性值，修改为cursor:pointer(警告)Line : 0 font-family: 建议你指定一个种类族科作为最后的选择 --W3C建议字体定义的时候，最后以一个类别的字体结束，例如&sans-serif&，以保证在不同操作系统下，网页字体都能被显示。(警告)Line : 0 can't find the warning message for otherprofile --表示在代码中有非标准属性或值，校验程序无法判断和提供相应的警告信息。同样，通过检验后，可以放置一个CSS校验通过图标，代码如下：&p& &a href=&http://jigsaw.w3.org/css-validator/&& &img style=&border:0;width:88height:31px& src=&http://jigsaw.w3.org/css-validator/images/vcss& alt=&Valid CSS!& /& &/a& &/p&以上就是如何使用CSS来进行网页排版 的详细内容，更多请关注php中文网其它相关文章！共3篇126点赞收藏分享：.&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号}