在前面应用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布局教程
基于web标准的网站设计指南
2010年4月24日
hellow world 内页css样式
天津网站制作中内页内容区container层和三个栏目介绍链接linkarea层是左右结构，形成“两列”布局。对contain CSS设置，编码如下hello world"内页主体内容css样式
#show #main #container {
float:left;
width:510px;
...
Tags: hellow world 内页css样式
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:
2010年4月23日
”hello world“案例之页面布局css样式
”hello world“案例之页面布局css样式
XHTML编码完成后，CSS将发挥它的强大作用，天津软膜天花将结构化的XHTML文档定义成与效果图一致的页面。先编写页面布局，再细化页面元素，一步一步实现。
页面的主体结构由4层构成，分别是top、header、main和footer，这其中还包含logoarea、banner、container和linkarea这4个嵌套在内部的层。由于首页与内页的外观有很大差别，为了便于讲述，暂时将CSS样式分别写在首页与内页HTML文件的<head>区域，完成所有CSS样式编码以后再进行合并与优化。进行整体布局声明。选择body标签，定义外边距margin和内边距padding都为0，文本颜色设置为黑色(#000)。将内外边距声明为0可以消除部分浏览器的默认边距属性。进行整体布局声明的CSS代码编写如下。
...
Tags: ”hello world“案例之页面布局css样式
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:
2010年4月22日
hello world 案例xhtml编码
完成上面的准备工作后就可以开始XHTML编码了，根据规划的提示一步一步地深入编写，首先是整体的页面结构，然后往里面填内容。无论是首页还是内页，主体结构都由4部分组成：top, header, main和footer。这4部分中的header层包括logoarea和banner，main层包括container和linkarea。它们的嵌套关系与结构如图所示。首页与内页的container层有所区别，首页中由文章标题与文章内容索引两块组成，可以用hl和p标签。内页中由文章标题、文章内容和作者时间信息3块组成。在后面编写内页的XHTML代码时需要将这部分内容加进去。依据上面的思路，编写如下主体结构XHTML代码。
...
Tags: hello world 案例xhtml编码
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:
2010年4月21日
web布局实例"hello world"——案例效果图分析
从规划、切图到XHTML编码，再到编写CSS样式组建网页，直至最终对CSS编码进行精简，本案例给出了CSS网页布局的一般工作流程。布局简单也富有变化是本案例的特点，首页可以看成“一列式”布局，而内页变换成为“两列式”布局，这一切仅需要CSS—编码即可实现。下面就从Hello World开始进入CSS的精彩世界，一起感受CSS的无限魅力吧！
页面制作人员（Web Page Building）在切割图片以及进行HTML、CSS编码以前，应当对页面效果图进行详细的观察与分析，将页面各元素的组成关系理顺，在脑海中形成大概的轮廓。然后根据这样的思路去切割图片，编写页面的HTML文件，最后应用CSS样式将HTML页面还原成与效果图一致的效果。
...
Tags: web布局实例hello world——案例效果图分析
发布:zxh5566 | 分类:css布局实例 | 评论:0 | 引用:0 | 浏览:
2010年3月11日
CSS代码优化技巧
利用继承性优化代码
在CSS中，子元素会自动继承父元素的属性值，如颜色、字体、大小、行距等排版格式。已经在父元素中定义过的属性，在子元素中可以直接继承，不需要事重复定义。例如，在下面的代码中，我们就可以把清除超链接下划线的声明全部删除，然后在a元素中统—定义，通过继承而影响所有超链接伪类：
可以优化为：但要注意，并不是所有属性都可以继承。一般来说，如布局、盒模型属性的display, width、height等只使用自己的属性值，不会继承上级元素。
...
Tags: CSS代码优化技巧
发布:zxh5566 | 分类:css浏览器兼容解决方案 | 评论:0 | 引用:0 | 浏览:
2010年3月10日
属性的组织
规划好CSS文件，组织好样式规则，而CSS样式的声明与属性的书写也很讲究。虽然属性与两个概念相比更简单，可是还有一些非常好的、能够保持规则整洁的方法很值得一提。
1．按字母顺序组织
对于属性书写来说，按属性的字母顺序进行排列，可以防止属性重复声明或被覆盖这种偶然事件的发生。例如，当某个选择符已被定义了很多声明，在页面更新时，忽然想为它添加一个margin属性，也许以前你已经声明了margin属性，但时间久了也就忘记了，在很长的样式代码中间，你可能也没有发现已经声明了margin属性。如果按照字母顺序排列，就很容易发现margin己被定义了两次，这个问题自然也就可以避免。这是一个细节问题，但在设计师的工作中这是很常见的“小臭虫”。
...
Tags: 属性的组织
发布:zxh5566 | 分类:CSS网站元素设计 | 评论:0 | 引用:0 | 浏览:
2010年3月9日
个人blog网站布局
Blog（博客）是继Email、BBS、ICQ之后出现的第四种网络交流方式，是一种集个人自由表达、深度交流沟通的网络新方式。从2005年开始，博客开始在中国兴起，国内目前经常使用博客的人数达到2800万，都市白领成为博客群体的主力。
Blog网站存在有多种形式，有专门提供博客服务的平台或门户网站，这类网站一般规模比较大，结构复杂，遵循商业化运作模式，公司化经营，团队运作，如博客中国、博客网、 新浪博客也有个人建立的博客站点一或博客页面，功能相对简单，结构单一，一般主要有2个页面，即日志分类列表和日志详细页。
...
Tags: 个人blog网站布局
发布:zxh5566 | 分类:css网页布局 | 评论:0 | 引用:0 | 浏览:
2010年3月8日
ie7不支持的过滤器小结
CSS Filter利用浏览器的问题或者未支持的特性来隐藏针对特殊版本浏览器的CSS样式规则。由于IE7修复了这些问题并且改进了CSS支持，一些CSS filter将不再适用。如果使用这些Filters，你应该了解它们的效果。这样我们就可以针对IE和其他浏览器更有效地使用过滤器以适应改影；CSS设计方法。在IE7中，下面这些过滤器不再被支持，虽然前面曾经提到，这儿再简单汇总以下。
1. • HTML filter
这个CSS过滤器是基于一个解析错误。它被用于显示排除内容。这些内容将被IE 7和以后的版本忽略。
...
Tags: ie7不支持的过滤器小结
发布:zxh5566 | 分类:css浏览器兼容解决方案 | 评论:0 | 引用:0 | 浏览:
2010年3月7日
列表版式基础
列表在网页布局和排版方面都具有强大功能，是设计师最喜欢选用的元素，因此使用频率相当地高。传统网页布局中列表多用于多行单列的标题信息的排列，由于列表信息比较整齐直观，非常方便浏览者浏览，使用频率仅次于表格。在标准网页布局下，由于CSS定义了强大的列表属性，以及各种浏览器对CSS列表属性的狗空前支持，使列表可以配合div元素实现更多的网页布局。
XHTML列表框架
XHTML支持三种列表形式：有序列表、无序列表和定义列表。
◆有序列表
表中，每个列表项前都标有数字，表示顺序，如1,2,3，或a,b.c等，盒列表用ol元素表示，每个列表项用li元素表示。
...
Tags: 列表版式基础
发布:zxh5566 | 分类:css网页布局 | 评论:0 | 引用:0 | 浏览:
网站分类
文章归档
Tags
- 选择合适的标签 (2)
- css基本语法 (2)
- 边界值 (2)
- 文字排版 (2)
- 布局模型 (2)
- CSS选择符的命名 (2)
- 表单设计的其他建议 (2)
- 基于背景控制的导航优化 (2)
- 什么是web标准 (1)
- web标准如何构成 (1)
- css布局与table布局的区别 (1)
- css2.0的优势是什么 (1)
- 传统的table布局与css布局的区别 (1)
- 如何向web标准过渡 (1)
- 发挥css2.0的作用 (1)
- 什么样的网站才符合web标准 (1)
- 什么叫网站重构 (1)
- css布局是不是意味着必须手写代码 (1)
- 使用web标准之后表格还有用吗 (1)
- 可以继续使用html吗 (1)
- xhtml基础 (1)
- 选择合适的doctype (1)
- 给css留下接口 (1)
- 良好的xhtml编写习惯 (1)
- css属性与选择符 (1)
- id及class选择符 (1)
- 标签指定式选择符 (1)
- 通配选择符和css数值单位 (1)
- 应用css到网页中 (1)
- 认识div (1)
- 理解div (1)
- 使用合适的对象来布局 (1)
- 一列自适应 (1)
- 二列固定宽度 (1)
- 二列宽度自适应 (1)
- 二列固定宽度居中 (1)
- 三列浮动中间列宽自适应 (1)
- 高度自适应 (1)
- 页面的纵向布局 (1)
- 用CSS设计网站导航 (1)
- 横向导航 (1)
- 导航系统 (1)
- 相关链接：XHTML中元素间的CSS属性继承 (1)
- 初学web标准的几个误区 (1)
- web标准的商业价值是什么 (1)
- web标准的常见问题 (1)
- 详解css布局与table布局的区别 (1)
- 表格布局的神话与没落 (1)
- 什么是web2.0 (1)
- css布局的基本思路 (1)