WEB标准_CSS布局 - css布局实例http://zxh6655.cn/网站布局实录! - RainbowSoft Studio Z-Blog 1.8 Arwen Build 90619zh-CNCopyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号Mon, 06 Sep 2010 09:50:50 +0800切割及导出图片zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/164.htmlTue, 04 May 2010 17:44:39 +0800http://zxh6655.cn/post/164.html经过上面的规划，下面开始图片的切割、优化和导出，为页面成形提供必要的原料。在切割前应该胸有成竹，对某些区域图片的实现，应该思考以更恰当的方法，放置在合适的容器中，而且不额外增加页面HTM，编码。在保证图片质量的情况下尽可能地优化图片文件，减小体积，使浏览更加流畅。为了实现三列在高度上的自适应，即当中部内容较多时，页面自然地撑开而增加高度，此时三列结构在视觉上是存在的，因而可以给“包围”层wrap设置一个背景图片，并且设置—垂直方向重复排列。
下面开始3个页面共有元素的图片切割。共有元素包括左侧标签链接区域、右侧网站LOGO与图片推荐，以及中部主内容区域的Banner图片、网站导航和底部导航与友情链接。天津网站制作网站首页中部内容区图片的切割。栏目图片调用共有5个图片，除此而外还有栏目标题部分的图片，将栏目标题分隔线单独切割出来
...

]]>css布局实例http://zxh6655.cn/post/164.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=164http://zxh6655.cn/cmd.asp?act=tb&id=164&key=42c9da01古典风格网站设计案例布局规划zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/163.htmlMon, 03 May 2010 10:12:42 +0800http://zxh6655.cn/post/163.html本章案例是一个古典风格的天津软膜天花网页，古色古香的气息扑面来，相对较为复杂的结构给HTML与CSS编码造成一定难度。通过细致的分析与规划，逐步理清各元素的关系，看似复杂的页面也能轻松地编写代码，形成嵌套合理且语义明确的HTML文档。利用浮动将各元素于合适的位置，并尽量减少嵌套，将相对重要的内容置于文档前部。灵活地运用CSS背景设置，将多个图片集成于同一个图片文件，利用背景图片的定位设置显示不同的区域。使用列表元素别致的链接悬停交互效果为页面增加良好的气氛。
...

]]>css布局实例http://zxh6655.cn/post/163.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=163http://zxh6655.cn/cmd.asp?act=tb&id=163&key=187ce879变化之美——风格调整zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/162.htmlSun, 02 May 2010 09:49:29 +0800http://zxh6655.cn/post/162.html    在Web开发工作中会出现令天津网站制作人员非常烦恼的修改，例如当页面制作与网站后台程序都已完成，客户提出调整、修改。以传统Web开发模式进行构架，这样的修改、调整会出现困难与障碍，开发人员不得不进行返丁，按照调整后的方案重新规划、制作。而应用DIV+CSS进行的Web开发，以合适的标签来组织文档，建立了良好的XHTML结构，内容与表现相分离。这使得页面的调整、修改在一定范围内不需要改变任何XHTML标记，仅通过修改CSS样式对页面进行重构，即可“演变”出风格完全不同的页面，从而大大减少了页面XHTML编码与网站程序员的工作。现在本案例也模拟面临调整、修改，原来的效果比较简洁、素雅，现在根据要求加以润色，以轻盈的色彩来表现整个页面，页面在结构上没有出现太大变化，只是很多地方运用更加鲜亮的色彩。网站重构并非高深莫测，只要页面结构合理，重构方案往往都可以仅通过CSS实现。在重构时灵活地利用已有元素之间的关系，充分发挥CSS的优势。下面开始对天津软膜天花网站页面进行分析并切割图片，为页面重构作准备。
...

]]>css布局实例http://zxh6655.cn/post/162.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=162http://zxh6655.cn/cmd.asp?act=tb&id=162&key=8137696d“变化之美”网站页面布局css样式zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/161.htmlSat, 01 May 2010 11:52:53 +0800http://zxh6655.cn/post/161.html经熟知这是典型的三行两列式布局，整个页面布局的CSS样式，需要对5个div层进行定义以建立初步的页面布局框架，这5个div分别是header, main, container, sider和 footer~下面首先进行整体布局声明，CSS编码如下。上述编码中，定义外込边距ma玛in和内边距padding都为o；文本颜色设置为黑色（#000）（字大小设置为12px；去除列表项预设标记；去除文本装饰，这里主要是去除了默认情况下链接文本的下划线。header层是页面头部元素的容器，header层与内容层有一定的距离，在这里定义下外边距为20px即可实现这样的留白。main层是内容区container层与侧边栏sider层的容器，天津软膜天花的主要任务是实现水平居中，在CSS中定义它的宽度并让它水平居中即可。main层的具体CSS编码如下。container层内容区与sider层侧边栏是页面中部的主体，它们将main正层分分为左左右两块，container层酲的下内边距定义为10px，是为了让内容文字与底部版权区域产生一定的距离，避内容文字紧紧贴在版权区域。container层与sider层浮动方向的定义，体现了CSS布局中“反向浮动”的思想。按照正常的天津网站建设和天津网站制作文档流，container层在上部或左侧，而sider层位于下部或右侧。对这两个层进行相反于正常文档流的浮动，让页面的主要内容位于文档编码的前面部分，但在视觉上它依然是位于右侧的位置footer层是页面底部版权区域，上边框为一条蓝色的实线，在布局中可以通过CSS将这条线勾勒出来。在IE浏览器中不管是否清除浮动，在IE浏览器中不管是否清除浮动，页面布局的外观视觉效果都是一致的。但在Fire fox浏览器中，不清除浮动会造成footer层布局错乱，footer层并未设置浮动，但它依然“跑”到了container层的下方，而并不是预想地出现在main层的下方。似乎Firefox浏览器未能正确地获取container层与sider层高度上的变化而紧随着container层浮动。经过clear清除浮动的定义，footer层已经位于main层的下方，但在Firefox浏览器中main层的高度依然不正确（可以定义main层的背景色进行查看）。如果要求精确地控制，则必须在main层内部设置一个辅助div层或其他XHTML标记，以用于清除浮动，这样Firefox浏览器才能正确地“理解”main层的高度。至此，CSS页面布局已经全部完成，由于在CSS编码中加入了辅助编码的背景色，可以清晰查看各部分的位置与排列，从而直观地判断CSS页面布局是否成功。

...]]>css布局实例http://zxh6655.cn/post/161.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=161http://zxh6655.cn/cmd.asp?act=tb&id=161&key=d3d79782“变化之美”网站制作案例之页面内容区与底部版权编码zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/160.htmlFri, 30 Apr 2010 19:15:43 +0800http://zxh6655.cn/post/160.html页面内容区包括文档标题和文档正文，—，该区域是本案例页面的核心内容。但页面编码比较简洁，看下面的XHTML编码。
<div id="container">
  <h1>简洁布局之变幻的CSS</h1>
  <p>天津网站建设编码中添加适当的注释可以辅助编码，使XHTML代码有更加清晰的结构。本案例页面结构相对简单，不难看出div结束标记是针对哪一个元素。面对团队其他成员或者页面结构复杂，无法快速看出相应的结束标记是属于哪一个元素，页面的结构会相对混乱，给Web开发工作带来不便。虽然Adobe Dreamweaver提供“选择父标签”工具，但不是每一位Web开发人员都使用此软件。所以通过简单的注释标识这些信息，可以让XHTML代码更加清晰易读。为了减小文件大小，在最终发布时可以去掉这些额外的注释信息。</p>
...

]]>css布局实例http://zxh6655.cn/post/160.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=160http://zxh6655.cn/cmd.asp?act=tb&id=160&key=cdb001d5“变化之美”网站制作案例之页面头部与导航编码zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/159.htmlThu, 29 Apr 2010 20:20:45 +0800http://zxh6655.cn/post/159.html    有了页面总体布局，下面开始各个页面元素的完善。首先从头部header层开始。这一区域主要有4个组成部分，分别是网站LOGO、网站标语、搜索框及网站导航菜单。下面依次

序开始编码。
<p id="logo">我爱天津网站建设</p>
上面网站LOGO部分的XHTML代码将链接文字包含在段落p里面，通过给链接元素a设置CSS样式应用背景图片，将LOGO图片显示出来，然后再合理地隐藏掉链接文字。有些做法是将LOGO图片通过img标签直接引用进来，然后给图片增加超链接。毛这里不否定这样的方法，但当用户禁用图片与CSS样式时，可能无法确定所在站点的名称。而以为链接文字的方法，但当用户禁用图片与CSS样式时，可能无法确定所在站点的名称。而以为链接文字：设置背景图片的方式引入LOGO，能够适应更多的浏览环境，即使图片不显示、CSS样式被禁用，站点名称都不会丢失，具有更强的适应性。网站标语的XHTML编码如下。
...

]]>css布局实例http://zxh6655.cn/post/159.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=159http://zxh6655.cn/cmd.asp?act=tb&id=159&key=a20cadce”变化之美“案例网站制作xhtml编码zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/158.htmlWed, 28 Apr 2010 21:49:44 +0800http://zxh6655.cn/post/158.html准备好图片，已进行详细的规划，下面开始编写XHTML代码。让代码具有语义是每一位Web开发人员的追求，应该特别注意恰当地使用XHTML标签。编写代码时注意运用一些小技巧以提高天津网站建设的开发效率；当多人团队协作开发时，应注意协同一致，要有标准的命名规范与文件结构，这样可以让团队成员清晰明了地查看XHTML代码。页面具有良好的XHTML结构是CSS布局的重点，以准确的XHTML标签来组织页面是必须重视的环节。天津网站制作在实际编码中不断地总结经验，对照相关资料权衡、斟酌，以最恰当的标签来组织页面。这样的环节往往容易被网页制作人员所忽视，总是认为将页面组织起来就行，是不是具有良好的结构、语义，也不管嵌套是否合理，这会给将来的重构工作带来灾也没有准确、有效地理解内容与表现分离的思想。首先写出页面主体元素的结构，再进一步深人对各个区域内的元素进行细化。也就是先描出大体框架，再向框架内填相应的内容，最终完成全部XHTML代码的编写。页面总体布局需要建立5个div层，分别是header、main、container、sider和footer。其中main层作为“包围层”以实现内容区与侧边栏的居中。页面主体元素XHTML编码如下:
...

]]>css布局实例http://zxh6655.cn/post/158.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=158http://zxh6655.cn/cmd.asp?act=tb&id=158&key=93e9e6b1简洁布局的css网站制作之布局规划zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/157.htmlMon, 26 Apr 2010 21:02:17 +0800http://zxh6655.cn/post/157.html目前的社会分工越来越细，天津网站制作人员的工作不再贯穿于天津网站建设的全部流程，页面设计人员（美工）可以从美学的角度进行更加规范化、更具专业的设计。而网页制作人员的工作则是对页面效果图进行分块、切割，编写XHTML与CSS代码，最终形成网页。首先要细致地分析效果图，做到胸有成竹，然后再根据页面的特点及版式需要进行详细的规划。
...

]]>css布局实例http://zxh6655.cn/post/157.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=157http://zxh6655.cn/cmd.asp?act=tb&id=157&key=31145b13CSS编码精简与合并zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/156.htmlSun, 25 Apr 2010 16:12:13 +0800http://zxh6655.cn/post/156.html在前面应用CSS样式进行天津网站制作编码时，将CSS样式分别写在首页与内页HTML文件的<head>内，这样的方式被称为文档级样式表。此方式一方面有利于案例的讲解；另一方面也利于读者朋友在编码时形成清晰的思路。在初学或对CSS不够熟悉时，推荐以此方式进行编码实践、支练习，在最终完成全部编码后再进行精简与合并。备份原有编码，新建一个CSS文件，命名为maln.css。复制首页的CSS样式并保存该皮件，分别删除首页与与内页<head>内CSS编码并建立外部CSS样式链接，<head>内加载外部样式表的方式被称为链接式外部样式表，在大多数时候都是以这样的方式将CSS引入HTML文档的。在本案例中，首页与内页的container层和linkarea层的CSS编码有很多重复，显得过于臃肿，针对这部分CSS编码进行精简与合并。在main.css文件中，已经保存有首页的全部CSS样式编码，现在仅需要重新定义内页与之有区别的属性即可。对于重复的属性，CSS将实现继承、层叠和优先性的原则。将具有特殊性的CSS属性作用于内页的相关HTML标签。conminer层在首页与内页的定义区别很大，不再进行精简，直接复制到main.css文件。天津软膜天花，container层hl元素的CSS编码在首页与内页分别如下。在main.css文件中添加上述编码后，未作设置的编码，将继承从首页复制到的main.css文件的CSS样式。对于有区别的属性，新添加的编码将层叠作用于container层hl元素。也是其他页面元素精简与合并的思路。两者除了宽度不同，其他属性都一样，只需要针对内页container层段落p设置一条属性时间作者信岩息的h6标签在首页中不存在，直接复制CSS编码至main.css文件。linkarea层的定义在首页与内页区别很大，不再进行精简，直接复制到main.css文件中。linkarea层内的dl、dt和dd有很多重复，CSS编码在首页与内页分别如下。dt和dd属性设置除了了dl的外边距有区别外，其他属性均相同。编码的精简已绍的继三的特点在天津网站建设中并未能完全展现，仅作为一种编码思路。撇开内页新增加的h6标签，仅重新定义11个属性就让网页“改头换面”了，可以看到CSS强大的功能与无限魅力。

...]]>css布局实例http://zxh6655.cn/post/156.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=156http://zxh6655.cn/cmd.asp?act=tb&id=156&key=d5a44d33hellow world 内页css样式zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/155.htmlSat, 24 Apr 2010 13:48:09 +0800http://zxh6655.cn/post/155.html天津网站制作中内页内容区container层和三个栏目介绍链接linkarea层是左右结构，形成“两列”布局。对contain CSS设置，编码如下hello world"内页主体内容css样式
#show #main #container {
 float:left;
 width:510px;
...

]]>css布局实例http://zxh6655.cn/post/155.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=155http://zxh6655.cn/cmd.asp?act=tb&id=155&key=7abf717d