css专栏
文章平均质量分 58
zhouminghong
这个作者很懒,什么都没留下…
展开
-
为什么要学习css,css对网站设计的好处
CSS语法立意让网页内容与视觉呈现分离,一方面使得页面维护工作更容易,不会因内容或视觉效果改变影响到另一方,这样的页面设计,也对搜寻引擎更为友善,更容易搜寻到页面内容。 CSS,Cascading Style Sheets 串接样式表,网页外观的控制语法 World Wide Web最早是以文件的概念组成,希望透过网页与超链接,让文件与知识更容易连接援引。从HTML语法大量使用文件概念的标签(例原创 2008-01-14 14:49:00 · 1343 阅读 · 0 评论 -
第7天:CSS入门
在了解XHTML代码规范后,我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了,可以跳过这一节,直接进入下一节。CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。1.基本语法规范分析一个典型CSS的语句:p {COLOR:#FF0000;BACKGROUND:#FFFFFF}转载 2007-12-02 15:08:00 · 441 阅读 · 0 评论 -
第6天:XHTML代码规范
在开始正式内容制作之前,我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。1.所有的标记都必须要有一个相应的结束标记以前在HTML中,你可以打开许多标签,例如和而不一定写对应的和来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。例如:2.所有标签转载 2007-12-02 15:07:00 · 519 阅读 · 0 评论 -
第5天:head区的其他设置
这些技巧主要讲meta标签设置的,其实与符合web标准关系不大,只要注意在最后加"/"关闭标签就可以,但是既然是入门教程,就写得详细一点吧。收藏夹小图标如果你将本站加入收藏夹,可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单,首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下。然后将下面的代码嵌入head区:为搜索引擎准备的转载 2007-12-02 15:06:00 · 382 阅读 · 0 评论 -
第4天:调用样式表
用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的。事实上,所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局。这是思维方式的变化,一开始有些不习惯。呵呵,任何变转载 2007-12-02 15:05:00 · 297 阅读 · 0 评论 -
第2天:什么是名字空间
DOCTYPE声明好以后,接下来的代码是:通常我们HTML4.0的代码只是,这里的"xmlns"是什么呢?这个"xmlns"是XHTML namespace的缩写,叫做"名字空间"声明。名字空间是什么作用呢?阿捷自己的理解是:由于xml允许你自己定义自己的标识,你定义的标识和其他人定义的标识有可能相同,但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生,转载 2007-12-02 15:03:00 · 290 阅读 · 0 评论 -
第1天:选择什么样的DOCTYPE
前言大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧第一天开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。查看本站首页原代码,可以看到第一行就是:打开一些符合标准的站点,例如著名web设计软转载 2007-12-02 15:02:00 · 333 阅读 · 0 评论 -
css布局中的居中问题
如何使DIV居中主要的样式定义如下:body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }说明:首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再原创 2007-12-02 14:59:00 · 335 阅读 · 0 评论 -
同一个页面用多个id有什么影响
我们知道在样式表定义一个样式的时候,可以定义id也可以定义class,例如: ID方法:#test{color:#333333},在页面中调用内容 CLASS方法:.test{color:#333333},在页面中调用内容 id一个页面只可以使用一次,class可以多次引用。有网友问,id和class好象没什么区别,我在页面中用了多个id在IE中显示也正常,用原创 2007-12-02 14:57:00 · 394 阅读 · 0 评论 -
第8天:CSS布局入门
CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距。1.定义DIV分析一个典型的定义div例子:#sample{ MARGIN: 10px 10px 10px 10px;PADDING:20p转载 2007-12-02 15:09:00 · 553 阅读 · 0 评论 -
第9天:第一个CSS布局实例
接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。注:在实际应转载 2007-12-02 15:12:00 · 368 阅读 · 0 评论 -
第10天:自适应高度
如果我们想在3列布局的最后加一行页脚,放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中,我们用大表格嵌套小表格的方法,可以很方便对齐三列;而用div布局,三列独立分散,内容高低不同,就很难对齐。其实我们完全可以嵌套div,把三列放进一个DIV中,就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面):Body这里是#header{ MARGIN: 0px; BORDE转载 2007-12-02 15:14:00 · 304 阅读 · 0 评论 -
计算机的工作原理
半个世纪以来,计算机已发展成为一个庞大的家族,尽管各种类型的性能、结构、应用等方面存在着差别,但是它们的基本组成结构却是相同的。 现在我们所使用的计算机硬件系统的结构一直沿用了由美籍著名数学家冯·诺依曼提出的模型,它由运算器、控制器、存储器、输入设备、输出设备五大功能部件组成。 随着信息技术的发展,各种各样的信息,例如:文字、图像、声音等经过编码处理,都可以变成数据。于是,计算机原创 2008-01-14 15:08:00 · 3180 阅读 · 0 评论 -
计算机的基本组成及其相互联系
一、计算机硬件系统结构: 1、采用二进制形式表示数据指令 2、将程序事先存入计算机内存中,使计算机在工作时能够自动高速的顺序从存储器中取出指令加以执行。 3、由运算器、存储器、控制器、输入、输出设备五大基本部件组成计算机硬件系统,工作流程如图:原创 2008-01-14 15:05:00 · 1988 阅读 · 0 评论 -
计算机的诞生与发展,及其特点
一、计算机的概念: 是一种能迅速而高效的自动完成信息处理的电子设备,它能按照程序对信息进行加工、处理、存储。 二、计算机的诞生与发展 1、诞生:1946年,美国为计算弹道轨迹而研制成功了世界第一台计算机。 2、发展: 阶段 时间 逻辑器件 应用范围 第一代 1946——1958 真空电子管原创 2008-01-14 15:02:00 · 4865 阅读 · 0 评论 -
CSS floats创建三栏网页布局
三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。 现在,我们都开始抛弃基于表格的布局技术原创 2008-01-14 14:45:00 · 408 阅读 · 0 评论 -
Div + CSS:absolute与relative的运用
Div + CSS 进行网页布局,适当地运用 absolute 与 relative,能给布局带来意想不到的效果和方便,达到事半功倍…本文介绍了关于 absolute 与 relative 的运用。 详细讲解两者的关系,需要配合例子,请先看例子:以下是引用片段:http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http:原创 2008-01-14 14:44:00 · 957 阅读 · 0 评论 -
第12天:校验及常见错误
辛苦了好多天,我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合web标准?W3C和一些志愿者网站提供了在线校验程序,来帮助我们检查页面是否符合标准,并提供了修正错误的帮助信息。这些校验非常有用,是我调试页面第一步要做的事情。1.XHTML校验 校验网址:http://validator.w3.org/ 校验方式:网址校验、转载 2007-12-02 15:17:00 · 818 阅读 · 0 评论 -
第11天:不用表格的菜单
布局初步搭建起来,我开始填充里面的内容。首先是定义logo图片:样式表:#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}页面代码:以上代码现在应该容易理解。先在CSS定义了一个logo的层,然后在页面中调用它。需要说明的是,为了使网页有更好的易用性,web标准要求大家给所有的、属于正式内容的图片,加一个alt属性。这个alt转载 2007-12-02 15:16:00 · 403 阅读 · 0 评论 -
常用CSS缩写语法总结
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:颜色16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2;原创 2007-12-02 14:56:00 · 236 阅读 · 0 评论 -
可变换的效果
下面的技巧在某些情况下会很有用。这是我在2003年4月,用标准重构Fast Company magazine(www.fastcompany.com)站点时大量采用的方法。我们在整个站点的大多数标题中使用了13*13点的小图标,就象这样:width="13" height="13" alt="*" /> FIRST IMPRESSION 我们用这种方法编码有两个原因。一个原因是,原创 2007-12-02 14:55:00 · 354 阅读 · 0 评论 -
css布局轻松升级
设想这样一个情景来代替前面的例子,我们已经在一个包含100个文档的站点中用标签编码了这些图标。这些图标匹配着整个站点各个的题目。几个星期后,站点的所有者决定更改这个站点的look and feel。新的图标和老的图标有着不同的规格。天哪!我们将需要回到所有的100个文档里面,去改变每一个标签,来更新它的image路径。对于一个项目的预算,这额外所需的时间就会推迟原先的期限。时间就是金钱。 把那原创 2007-12-02 14:53:00 · 397 阅读 · 0 评论 -
固定在左上角,不固定宽度,采用百分比(%)定义宽度来自适应页面
#content { position: absolute; top: 0px; left: 0px; margin: 20px; background: #FFF; border: 5px solid #666; width: 74%; /* ie5win fudge begins */ padding: 10px 10% 10px 15%; voice-family: "/"}/""; voi原创 2007-05-24 10:49:00 · 628 阅读 · 0 评论 -
技巧:CSS代码编写的两则小技巧
在一行内声明CSS 我们来对比下面两段代码: h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} h2 { font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;原创 2007-07-31 15:43:00 · 376 阅读 · 0 评论 -
实例讲解用CSS设置多彩的连接下划线
链接下划线可以改变颜色吗?下面给大家讲解如何利用CSS改变连接下划线颜色。 我们在进行Web页面设计的时候,根据不同的需要,可能会想要去除链接下划线的效果。而此效果只需要一句话就可以解决了。代码如下: text-decoration:none; 如果保留着链接文字的下划线,默认的颜色属性是如链接文字同样的颜色,看下面的例子:http://www.w3.org/TR/原创 2007-07-31 15:36:00 · 579 阅读 · 0 评论 -
微软风格的CSS横向菜单
x4u站长资讯x4u站长资讯水平导航菜单(DIV+CSS)x4u站长资讯x4u站长资讯body{x4u站长资讯 background: #FFF;x4u站长资讯 font-family: Arial, Helvetica, sans-serif;x4u站长资讯 color: #666666;x4u站长资讯 padding: 0px;x4u站长资讯 margin: 5px;x4u站长资讯 t原创 2007-07-31 15:31:00 · 703 阅读 · 1 评论 -
CSS制作水平导航菜单效果
startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; inode = navRoot.childNodes[i];if (node.nodeName=="SPAN") {node.onmouseover=functi原创 2007-07-31 10:02:00 · 527 阅读 · 0 评论 -
CSS提高网页的维护更新效率
随着互联网经济的不断发展,互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信息量,我们对网页中每一个栏目的增删,都会是一个很复杂的过程。为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观,而其个性化的表现未受任何损失。为了能充分用好样式表的强大性和灵活性,笔者就怎样有效使用样式表原创 2007-07-31 10:01:00 · 468 阅读 · 0 评论 -
与表格边框有关的CSS语法
表格是数据的载体,不再是布局的方式,虽然我们不需要表格来进行网页布局了,但很多表格式的数据,还是需要表格这一形式发挥它的作用!cCX站长资讯 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框。 cCX站长资讯 具体内容包括:上边框宽度、右边框宽度原创 2007-07-31 10:00:00 · 382 阅读 · 0 评论 -
实例CSS中如何正确的使用 id 和 class?
按照字面的意思,id是指一个元素在整个文档中的“唯一标志”,而class则是它所属的“类别”。按照语法,同名的id在一个文档里只应该出现一次,而class名可重复使用。但是在具体使用的时候,哪些样式该用id,哪些样式改用class呢?有个答案很简单:那些只会在页面中出现一次的元素应该用id来表示。比如页头(header) 页尾(footer),导航菜单(main-menu)等。但是真原创 2007-07-31 09:59:00 · 858 阅读 · 0 评论 -
css布局
body{ background:#999; text-align:center; color: #333; font-family:arial,verdana,sans-serif; } #header{ width:776px; margin-right: auto; margin-left: auto; padding: 0px; background: #EEE; height:60原创 2007-05-24 11:05:00 · 325 阅读 · 0 评论 -
固定宽度,采用在body样式中定义居中属性(text-align: center;)
body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: verdana, arial, helvetica, sans-serif; color: #c060; background-color: #CCC; text-align: center; /* part 1 of 2 centering hack */原创 2007-05-24 10:47:00 · 2251 阅读 · 0 评论 -
采用float浮在左上角,固定宽度
#content { float: left; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */ voice-family: "/"}/""; voice-family:inherit; width: 370px; } html转载 2007-05-24 10:52:00 · 819 阅读 · 0 评论 -
背景和边框
在标题下面增加一个窄窄的边框,加上淡淡的背景色,你能够创建一种三维的效果,却不需使用图片。这个CSS和前面的例子很相似,仅仅改变一点颜色和在底部增加一个2点宽的边框。h1 {font-family: Arial, sans-serif;font-size: 24px;color: #666;padding: 4px;background-color: #ddd;border-bottom:原创 2007-12-02 14:44:00 · 310 阅读 · 0 评论 -
增加背景
背景可以增强标题的整洁效果。增加一点补白和背景颜色,我们就有了一个不需要图片的,但又很有样子的标题。如下:h1 {font-family: Arial, sans-serif;font-size: 24px;color: #fff;padding: 4px;background-color: #696;} 我们把文字改成白色,周围加上4个点的补白,再把背景改成绿色。就象图2-4显示的那样,原创 2007-12-02 14:43:00 · 304 阅读 · 0 评论 -
应用样式后的标题
让我们在文字的下面增加一条1点宽的灰色边框,以增强清晰度(看图2-3):h1 {font-family: Arial, sans-serif;font-size: 24px;color: #369;padding-bottom: 4px;border-bottom: 1px solid #999;} 带有灰色下边框的样式化标题我们在文字的下方增加了一点补白,来让线条附近宽松一点。由于原创 2007-12-02 14:41:00 · 519 阅读 · 0 评论 -
简单的样式
使用CSS,最容易做的事情就是给我们的标题设置不同的字体样式。我们可以建立一个CSS规则,它将把样式应用到页面中出现的所有标签(或者是整个站点,当使用一个外部样式表的时候)。随后,如果我们想要改变整个站点上所有出现标签的地方的颜色、尺寸、字体的话,我们所有需要做的事情就是修改一些CSS规则,然后它们将立即改变。听上去非常诱惑人,不是吗?让我们认识一下我们自己的超级酷的标题:Super Co原创 2007-12-02 14:37:00 · 351 阅读 · 0 评论 -
DIV和CSS布局入门
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无原创 2007-08-21 10:30:00 · 564 阅读 · 0 评论 -
css 抛弃表格
label{ float: left; width: 120px; font-weight: bold; } input, textarea{ width: 180px; margin-bottom: 5px; } textarea{ width: 250px; height: 150px; } .boxes{ width: 1em; } #submitbutton{ margin-left:原创 2007-05-24 11:07:00 · 355 阅读 · 0 评论 -
固定在左上角,固定宽度,采用的是绝对(absolute)定位
#content { position: absolute; top: 0px; left: 0px; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */ voice-family: "/"}/""; voice-family:i原创 2007-05-24 10:50:00 · 559 阅读 · 0 评论