http://www.aoaob.com 奥奥比网络致力于在网络领域为以网络设计和开发的广大人员提供教程资讯 zh-cn aoaob.com Fri, 30 Jul 2010 13:18:09 +0800 http://www.aoaob.com/Article_2065.html 目录 介绍 针对浏览器的选择器 让IE6支持PNG透明 移除超链接的虚线 给行内元素定义宽度 让固定宽度的页面居中 图片替换技术 最小宽度 隐藏水平滚动条 一. 介绍 这篇文章包括了8个非常有用的解决办法, 在进行css设计遇到问题时你就会用到它们. 二. 针对浏览器的选择器 这些选择器在你需要针对某款浏览器进行css设计时将非常有用. IE6及 Wed, 19 Mar 2008 18:48:38 +0800 http://www.aoaob.com/Article_1517.html 　　CSS 语法 　　CSS语法由三部分构成：选择器、属性和值： 　　selector {property: value} 　　选择器(selector)通常是你希望定义的HTML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：　　 　　body {co Sun, 6 Jan 2008 00:47:17 +0800 http://www.aoaob.com/Article_1516.html 　　1. css 字体简写规则 　　当使用css定义字体时你可能会这样做： font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif; 　　事实上你可以简写这些属性： 　　font: 1 Sun, 6 Jan 2008 00:47:16 +0800 http://www.aoaob.com/Article_1515.html 说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补。实用性一般，但是这个方法挺新颖的。　 　　1.display:none;的缺陷 　　搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略 　　屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。　 　　2. visibility: hidden ;的缺陷 　　这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据 Sun, 6 Jan 2008 00:47:15 +0800 http://www.aoaob.com/Article_1514.html 　　网页布局技巧实例，想让DIV居中，如何编写CSS？ 　　div居中的设置该如何编写css？我们在传统的表格布局中，只要设置表格的居中属性就实现了居中的块元素。应用div css网站布局，div的居中该如何编写css来控制它呢？ 　　主要的样式定义如下： 　　body {text-align: center;}　　#center { margin-right: auto; mar Sun, 6 Jan 2008 00:47:14 +0800 http://www.aoaob.com/Article_1513.html 你也许已经意识到，你可以通过指定每一键接的不同风格以建立CSS翻滚效果，这些链接包括普通的链接link (normal), 访问，翻转，以及激活。并且，你可能也知道CSS类型的顺序可以产生效果上的差别，CSS代码后顺序的风格将会取代针对于相同元素的前顺序的风格。建立翻滚效果的类型顺序显得相当重要。 现在让我们看看如何安排链接状态的类型在不产生冲突的情况下支持正常的翻滚效果，并且如何重新安排这 Sun, 6 Jan 2008 00:47:14 +0800 http://www.aoaob.com/Article_1512.html 　　在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者不知道em为何物或者它相当于多少px。国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是 Sun, 6 Jan 2008 00:47:13 +0800 http://www.aoaob.com/Article_1511.html 　　在以前，为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面，这样才能够在打印的时候获得令人满意的效果。现在，通过使用结构化的XHTML和CSS，你可以实现同样的效果而只用花费少得多的精力。 　　从屏幕显示到打印效果 　　大多数的Web页面都是设计适用于在计算机屏幕上观看的。然而，有的时候用户需要将某些页面打印出来，也许就是为了保留一个长期的记录，或者将其 Sun, 6 Jan 2008 00:47:13 +0800 http://www.aoaob.com/Article_1510.html 　　三栏布局是最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。 　　绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗 Sun, 6 Jan 2008 00:47:12 +0800 http://www.aoaob.com/Article_1509.html 　　css的学习和其他的学习一样,都需要特定的方法才能比较快的去掌握它.要想掌握CSS, 首先要学会HTML，我刚开始是从零开始学习的，花了一个月时间学习HTML，没有老师，书就是我唯一的老师，也没有上网的条件！一个月过后，我就开始学习CSS，刚开始看的第一本CSS书是《CSS网页样式设计》看了几天后发现根本看不懂！，之后换了一本《HTML参考大全》，这本书是网页制作师的案头常备之书！之所以更 Sun, 6 Jan 2008 00:47:11 +0800 http://www.aoaob.com/Article_1508.html LI代码的格式化: A).运用CSS格式化列表符： 以下是引用片段：ul li{ list-style-type:none; } B).如果你想将列表符换成图像，则： 以下是引用片段：ul li{ list-style-type:none; list-style-image: url(/blog/images/icon.gif); } C).为了左对齐，可以用如下代码 Sun, 6 Jan 2008 00:47:11 +0800 http://www.aoaob.com/Article_1507.html 一、CSS定位：position 　　语法： 　　position : static | absolute | fixed | relative 　　取值： 　　static :默认值。无特殊定位，对象遵循HTML定位规则。 　　absolute :将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进 Sun, 6 Jan 2008 00:47:10 +0800 http://www.aoaob.com/Article_1506.html 　　在一个具有图形背景的按钮中添加CSS风格的文本，这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率，从而有效地提高按钮外表图像的三维效果。 　　相比于常规的图形按钮，这些图形/CSS混合按钮可易于建立和载入，因为你只需要为空白按钮外面建立和载入一个图像，而不是为每一个按钮建立各自的图像。 　　同一个图像可以使用在网页所有按钮的背景。按钮的文本标签都是 Sun, 6 Jan 2008 00:47:09 +0800 http://www.aoaob.com/Article_1505.html alpha滤镜给制作网页特效提供了较大的创作空间，但由于它控制参数较多，在实际应用时，为了确定一组合适的参数值，不得不反复调整修改，在编辑窗口和预览窗口来回倒腾，甚是麻烦，本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”，在测试板上输入参数值后，点一下鼠标，立即可看到结果，完全的“立等可见”，使你很快就能获得一组合适地参数值，从而给你节约许多宝贵时间。　　测试板具体的制作方法：　　1 Sun, 6 Jan 2008 00:47:08 +0800 http://www.aoaob.com/Article_1504.html CSS语法立意让网页内容与视觉呈现分离，一方面使得页面维护工作更容易，不会因内容或视觉效果改变影响到另一方，这样的页面设计，也对搜寻引擎更为友善，更容易搜寻到页面内容。 CSS，Cascading Style Sheets 串接样式表，网页外观的控制语法 World Wide Web最早是以文件的概念组成，希望透过网页与超链接，让文件与知识更容易连接援引。从HTML语法大量使用文件概 Sun, 6 Jan 2008 00:47:07 +0800 http://www.aoaob.com/Article_1503.html 　　用CSS实现的固定表头的HTML表格。 曾经在项目中实现过一个固定表头的HTML表格，但使用了非常臃肿的代码，因为实际上是画了三个一样的表格。一个纯粹用HTML和CSS实现的固定表头的表格，其简化代码如下： 以下是引用片段：<HTML XMLns="http://www.w3.org/1999/xHTML" XML:lang="en" lang="en"><head&g Sun, 6 Jan 2008 00:47:07 +0800 http://www.aoaob.com/Article_1502.html 　　用惯了Windows的人对各种各样的鼠标样式一定不会陌生。当鼠标移动到不同的地方时，当鼠标执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生变化。而在网页上往往只有当鼠标在超级链接上时才出现一个手形，在其它地方似乎没有什么变化，同充满动感的网页显得不怎么和谐。实际上，用CSS可以方便地定义许多种鼠标形状。用本文介绍的方法，可以在网页的作何地方设置鼠标的不同样式。 　　在Dre Sun, 6 Jan 2008 00:47:06 +0800 http://www.aoaob.com/Article_1501.html 　　css对文字的布局上没有靠容器底部对齐的参数，目前使用的一个不错的方法也比较好.就是用position属性来解决，看下面的代码，用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近的距离还可以精确到像素，自己可以调节，是不是很不错呢? 以下是引用片段：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tran Sun, 6 Jan 2008 00:47:05 +0800 http://www.aoaob.com/Article_1500.html 一、空格运算符 （1）CSS语言 简单地说，CSS语言类似JS语言，是通过客户端下载后，通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言，离JS这种基于对象的比较完善的“弱类型”语言，还差相当一段距离。要知道CSS样式是定义出来的，而样式的呈现是根据文档流顺序和CSS优先级别，浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能（尤以IE为甚），所以样式定义的语法有 Sun, 6 Jan 2008 00:47:05 +0800 http://www.aoaob.com/Article_1499.html 　　样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如"font-size"属性只对可卷动的媒体类型有效(屏幕)。 　　声明一个媒体属性可以用@import或@media引入： 以下是引用片段：@import url(loudvoice.css) speech; @media print { /* style sheet f Sun, 6 Jan 2008 00:47:04 +0800 http://www.aoaob.com/Article_1498.html 　　CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一，通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误： 　　1. 检查HTML元素是否有拼写错误、是否忘记结束标记 　　即使是老手也经常会弄 Sun, 6 Jan 2008 00:47:04 +0800 http://www.aoaob.com/Article_1497.html <style>.cal_0 table{ border:none; font-family:tahoma; font-size:9px; text-align:center; }.cal_0 th{ height:17; background-image:e­xpression("url("+MyCal.color+"_h.gif)"); border-bottom:e&s Sun, 6 Jan 2008 00:47:03 +0800 http://www.aoaob.com/Article_1496.html 　　应用CSS制作的新闻网站中的文章列表：ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号(比如方块或实心的黑点)的列表内容。CSS网页布局中，除了新闻列表、链接运行ul、li制作以外，我们通常将菜单也用ul、li来实现。 以下是引用片段：<!DOCTYPE html PUBLIC "-//W3C//DTD XH Sun, 6 Jan 2008 00:47:02 +0800 http://www.aoaob.com/Article_1495.html 使用DIV+CSS排版不是用换个标签然后再去按照表格的方式去排版，而是做到内容与表现的分离。 1: ID用于标识页面单独元素以及持久行的结构性元素 方便JS的调用 类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形式无关 ：leftContent 而使用有意义的定义方式：sideBar等等。命名方式遵循“驼峰式大小写（标志符由多个单词组成 除首词首字母小写外 其 Sun, 6 Jan 2008 00:47:02 +0800 http://www.aoaob.com/Article_1494.html 　　前端时间写了一篇《利用CSS框架进行高效率的站点开发》，有不少朋友问我相关的问题。很早5key就在公司进行CSS框架的架构，也对不少朋友提出CSS框架的建议。效果是很明显的。当然，CSS框架有利也有弊，最近也看了一些相关的文章。一些感想，与大家分享。 　　CSS框架之利： 　　1、开发效率的提高。 　　如果你是一个企业建站的前端开发，相信在大部分时间里进行着同类站点的代码工作。定义 Sun, 6 Jan 2008 00:47:01 +0800 http://www.aoaob.com/Article_1493.html 表格是数据的载体，不再是布局的方式，虽然我们不需要表格来进行网页布局了，但很多表格式的数据，还是需要表格这一形式发挥它的作用！我们知道Dreamweaver在表格制作方面做得非常出色，但是在某些时候还是必须结合css才能达到一些特定效果，下面我们先把有关表格边框的css语法整理出来，然后另外介绍怎样用css美化表格的边框。 1.上边框宽度 以下是引用片段：　　语法:border-to Sun, 6 Jan 2008 00:47:00 +0800 http://www.aoaob.com/Article_1351.html Adobe CS3 Web大战微软Expression 你的选择会在哪？ 就在美国加州时间2007年3月27日，Adobe对外正式发表了从创办公司25年以来最大的创意产品线Creative Suite 3，以下简称CS3。另一方面微软也正摩拳擦掌为Expression、WPF、Silverlight等的使用者体验平台(UX Platform) 并为企业做好「RIA」需求为导向所进行铺路 Mon, 31 Dec 2007 07:18:35 +0800 http://www.aoaob.com/Article_1042.html 引子： 今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》，思考了一下，本来想写《CSS样式的复合定义与复合调用及简单的模块化设计》，但是内容太大，还是来点简单的实惠。所以改叫《CSS样式——从空格谈起》吧。 一、空格运算符 （1）CSS语言 简单地说，CSS语言类似JS语言，是通过客户端下载后，通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言，离JS这种 Thu, 20 Dec 2007 21:42:41 +0800 http://www.aoaob.com/Article_808.html 翻译说明： 这是Solid State Group网站上的一篇很友好的文章，解决了我在设计中遇到的很多问题，故在此我翻译其文，并对原作者表示非常感谢！ 查看原文：http://diger.cn/blog/?p=324英文地址： http://www.solidstategroup.com/page/1592 1、说明本文阐述了8条我们发现的在用CSS设计中有用的解决方案。 2、浏览器特 Tue, 20 Nov 2007 20:20:39 +0800 http://www.aoaob.com/Article_734.html 今天有点闲，想向大家请教一下id和class的使用。 按照字面的意思，id是指一个元素在整个文档中的“唯一标志”，而class则是它所属的“类别”。按照语法，同名的id在一个文档里只应该出现一次，而class名可重复使用。 但是在具体使用的时候，哪些样式该用id，哪些样式改用class呢？有个答案很简单： 那些只会在页面中出现一次的元素应该用id来表示。比如页头（header） 页尾（f Sun, 28 Oct 2007 13:26:08 +0800