1）有HTML和CSS基础 学习本系列教程前，要求您有一定的html和css基础，制作过网页，会用表格进行网页布局，这样学习起来才会很轻松。如果您对这些还不懂，建议先学习这些知识，然后再来学习本教程。 2）转变观念 在以前我们制作网站时，总是习惯于先考虑外观、颜色、字体及布局等所有表现在页面上的内容。但外观并不是最重要的，相反最终用户在访问网页时的体验才是优先要考虑的。一个由div＋css布局且结构良好的页面可以通过css定义成任何外观，在任何网络设备上（包括手机、PDA和计算机）上以任何外观表现出来，而且用div＋css布局构建的网页以够简化代码，加快显示速度。 所以要想学好div＋css，首先要转变观念，需要抛弃传统的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现页面的外观。给网站浏览者更好的体验。 3）多动手、多动脑 说到这点，有点小儿科了，就像我们上小学时老师常常教我们的那样。为什么我在这里也做为一点列出来呢，我是通过评论发现，有些同学提的问题太没水平了，稍微动下脑筋就明白了，或者自己动手一试就知道了，但他就懒得试。举个简单的例子，拿浏览器兼容来说吧，你写个样式之后，在IE和火狐分别打开看一下不就明白了，但就是不去做。还有一个同学留言要我把一个实例中的图片打包发给他，我一看代码，就用到一张图片，无语了，有你留言的这个时间，自己也早把图片下载下来了。所以在这里告诫大家，一定要多动手、多动脑，不要怕麻烦。一定要自己多做实验，这样能更快掌握。
XHTML CSS知识小汇
这篇文章是介绍xhtml css基础的相关知识点，对于一些简单的语法与概念在这里不作为讨论范围。首先说一下我们要讨论的内容： 文档类型 语言编码 html标签 css样式 css优先级 css盒模型组成 1）文档类型 当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01 中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。 2）语言编码 接下来我们还会发现这样一句话： <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF- 8编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。 3）html标签 html标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。 成对的标签： <head>{…}</head> <body>{…}</body> <div>{…}</div> <span>{…}</span> <p>{…}</p> …… 单一的标签： <img src="" /> <br /> ……. 还需说明一点的是按xhtml规范，标签必须用小写。 4）css样式 加载css样式有以下四种 外部样式 内部样式 行内样式 导入样式 外部样式形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。例如—— <link href="layout.css" [...]
css中文字体（中英对照）
在写一个网站的样式表的时候，都会不可避免地用到一些中文字体，比如说微软雅黑、黑体等，除非是做英文站。在 CSS 中写入中文字体的方法一般采用 font-family:"微软雅黑","黑体";这样类似的表达方式，但是对于像 WordPress 这样需要 UTF8 编码平台来说，一个不注意没有转换编码就会导致中文字体无法按照希望的字体表形出来。所以我们可以通过英文、unicode 这种形式来表达中文，比如说刚才的 font-family:"微软雅黑","黑体";就可以写成 font-family:"Microsoft Yahei","SimHei"; 这样看起来是不是也可以统一一点呢。 中文字体与英文、unicode 对应的太多，背也背不下来，就搜集了一张表格收藏记录一下，希望也是你想要的： 中文名 英文名 Unicode Mac OS 华文细黑 STHeiti Light [STXihei] 534E65877EC69ED1 华文黑体 STHeiti 534E65879ED14F53 华文楷体 STKaiti 534E658769774F53 华文宋体 STSong 534E65875B8B4F53 华文仿宋 STFangsong 534E65874EFF5B8B 丽黑 Pro LiHei Pro Medium 4E3D9ED1 Pro 丽宋 Pro LiSong Pro Light 4E3D5B8B Pro 标楷体 BiauKai 680769774F53 [...]
增强样式表可读性的技巧
A.使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。这里就不展开描述。 B.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。 C.区分大小写 当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。 class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。 D.取消class和id前的元素限定 当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如： div#content { /* declarations */ } fieldset.details { /* declarations */ } 可以写成 #content { /* declarations */ } .details { /* declarations */ } 这样可以节省一些字节。 E.默认值 通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样： * { margin:0; padding:0; } F.不需要重复定义可继承的值 CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。 G.最近优先原则 如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码 Update: Lorem ipsum dolor set 在CSS文件中，你已经定义了元素p，又定义了一个class=update p { [...]
CSS HACK——针对ie6,ie7,ie8以及firefox
浏览器市场的混乱，给设计师造成很大的麻烦，设计的页面兼容完这个浏览器还得兼容那个浏览器，本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点，ie8的出现就更头疼了，原来hack ie7的方法又不能用了，怎么办呢？ 第一种方法： 应用微软提供的代码： <meta http-equiv="x-ua-compatible" content="ie=7" /> 把这段代码放到<head>里面，在ie8里面的页面解析起来就跟ie7一模一样的了，所以，基本上可以无视ie8，剩下的代码只需要这样写就可以了 background:#ffc; /* 对firefox有效*/ *background:#ccc; /* 对ie7有效 */ _background:#000; /* 只对ie6有效 */ 说明： firefox能解析第一段，后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了，所以只认background:#ffc，看到的是黄色； ie7前两短都能认，以最后的为准，所以最后解析是background:#ccc，看到的是灰色； ie6三段都能认，而且“_”这个只有ie6能认，所以最后解析是_background:#000，看到的是黑色 这已经是最简单和最好理解的写法了，如果你是google进来的，我可以很负责任的告诉你，这种方法是ok的，我测试过。 ie8的那段兼容7的代码我也测试过了，在我现在的windos 7 测试版所带的ie8是没问题的，以后ie8正式版出来还管不管用就不知道了。 ps：如果你发现按我这样写还是有问题的话，请查看一下你的html头，看看<head>之前的内容是不是这样的标准写法 <!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"> 这个是现在比较规范的写法，如果你是用dreamweaver做页面的话，默认也是这种规范的，切记，非这种规范写法的，兼容性不能保证。 第二种方法： 要求苛刻的朋友是不愿意在页面头部增加<meta http-equiv="x-ua-compatible" content="ie=7" />这样一句代码的，因为这样的结果是每个页面都得加。那么要想兼容这几个浏览器还真得想别的办法了。在之前发布的“全面兼容的css透明滤镜 ”文章中，可能当时测试的疏忽，IE8的兼容性没有解决好，现在这个问题也可以解决了。 以下是兼容IE6/IE7/IE8/FF的写法，注意下面的顺序不可颠倒 margin-bottom:40px; /*ff的属性*/ margin-bottom:140px9; /* IE6/7/8的属性 */ color:red; /* [...]
CSS布局教程（实例讲解）G
CSS布局典型案例 本节综合前面学习的布局知识，制作比较典型的网页布局实例，先分析这个例子布局的要求。这个例子要求页面有上下4行区域，分别用作广告区、导航区、主体区和版权信息区。而主体区又分为左右2个大区，左区域用于文章列表，右区域用于8个主体内容区。看上去布局区域比较多，用表格布局需要很多行代码才能完成。利用div和CSS可以很好地完成，并且代码比较简练。 根据实例要求作图，并分析布局的结构，从而方便编写div布局的结构代码，这里有一个网页布局结构分析图（如下），并在每个区域做了id命名（#符号开头），以方便div编写。 图11.13 网页布局结构分析 从分析图可以看出整个页面的结构，其中，#top代表广告区、#nav代表导航区、#mid代表主体区、#left代表#mid所包含的左区域、#right代表#mid所包含的右边区域、#bt代表版权信息区。 #right区域包含8个具体内容区，由于这些内容区的尺寸相同，所以在实例中将会使用class选择符作为统一样式，对这个8个区域进行CSS样式指定。根据结构分析图可以编写XHTML部分的结构代码，代码如下： <div id="top">顶部广告区</div> <div id="nav">导航区</div> <div id="mid"> <div id="left">纵向导航区</div> <div id="right"> <div class="content">内容A</div> <div class="content">内容B</div> <div class="content">内容C</div> <div class="content">内容D</div> <div class="content">内容E</div> <div class="content">内容F</div> <div class="content">内容G</div> <div class="content">内容H</div> </div> </div> <div id="footer">底部版权区</div> [...]
Recent Comments