CSS教程-技术资讯-IDC中文资讯站-客观公证的IDC产业权威媒体,关注域名、虚拟主机、服务器、网络、开源技术资讯，整合运营商资源，客观评价各地机房带宽线路质量、IDC企业名录等信息。

	设为首页
	加入收藏
	联系我们

热门关键字：　虚拟主机　 vps 　质量　 internet 　服务商　华夏名网　华夏

Web服务器

FTP服务器

Mail服务器

DNS

Proxy

Windows操作系统

Linux

FreeBSD

Solaris

Sco

HP-UX

IBM-AIX

邮件系统

Mac OS

Access

Mysql

Mssql

PostgreSQL

Oracle

Informix

Sybase

DB2

数据库其他

Shell

C/C++

Perl

Java

Ajax

网络编程

JSP

PHP

ASP

源码天堂

NET

XML

Flash

CSS教程

网络技术

路由技术

VPN

		当前位置：主页>技术资讯>CSS教程>列表

共41页/603条记录首页 1 [2] [3] [4] [5] [6] [7] 下一页末页

CSS页面布局中HTML结构化设计
	作者：新客网搜集整理　您正在学习WEB标准CSS网页布局吗？是不是还不能完全掌握纯CSS布局？通常有两种需要您特别注意：　　第一种可能是你还没有理解CSS处理页面的原理。　　在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。　　另一种原因是你对那些非常熟悉的表现层属性束手无策。　　例如：cellpadding,、hspace、align="left"等等，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，再给出一个列表，详细列出原来的表现属性用什么CSS来代替。　　结构化HTML　　我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。　　如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重...…
发布于2008-05-29 00:00:00 详细内容(23次阅读) 查看评论(0次评论)

CSS设计中选择器的巧妙使用
	作者：新客网搜集整理　id用于标识页面唯一元素，id的名称是控制某一内容块的手段，通过将某内容块置入div并赋予唯一的id，就可以用CSS选择器来精确定义每一个页面元素的外观表现，包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。　　可以通过不同规则来定义不同内容块里的链接样式。类似这样：#nav a:link或者 #main a:link或者#footer a:link。也可以定义不同内容块中相同元素的样式不一样。例如，通过#main p和#sider p分别定义#main p和#sider p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中（PDA还是手机或者网络电视）有影响，它们可以被定义为任何的表现外观。　　一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的text-indent规则就...…
发布于2008-05-29 00:00:00 详细内容(11次阅读) 查看评论(0次评论)

CSS开发：合理的编码与组织技巧
	作者：新客网搜集整理　　CSS代码更清晰高效的一些经验是许多网页制作者与开发者都关心的问题。但是大概没有什么魔法，可以保证一下就把你的样式表缩小到百分之多少，合理的CSS 编码与组织技巧，的确能够帮助你的更有效率地写出更清晰高效的代码，自然CSS样式表大小的缩减还能减少下载的时间。　　一、排版：　　1、关键词和操作符之间加适当的空格。　　2、相对独立的程序块与块之间加空行　　3、较长的语句、表达式等要分成多行书写。　　4、划分出的新行要进行适应的缩进，使排版整齐，语句可读。　　5、长表达式要在低优先级操作符处划分新行，操作符放在新行之首。　　6、循环、判断等语句中若有较长的表达式或语句，则要进行适应的划分。　　7、若函数或过程中的参数较长，则要进行适当的划分。　　8、不允许把多个短语句写在一行中，即一行只写一条语句。　　9、函数或过程的开始、结构的定义及循环、判断等语句中的代码都要采用缩进风格。　　10、C/C++语言...…
发布于2008-05-28 00:00:00 详细内容(15次阅读) 查看评论(0次评论)

学习完全掌握纯CSS布局网页
	作者：新客网搜集整理　　你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：　　第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。　　另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。　　结构化HTML　　我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。　　如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑&...…
发布于2008-05-26 00:00:00 详细内容(17次阅读) 查看评论(0次评论)

提高CSS文件可维护性的五种方法
	作者：新客网整理转载未知　当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。　　1.分解你的样式　　对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。　　而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。 /*--------------------------...…
发布于2008-05-22 00:00:00 详细内容(12次阅读) 查看评论(0次评论)

全国哀悼日网站灰黑色CSS滤镜代码
	作者：新客网搜集整理根据国务院文件，5.19-5.21为全国哀悼日，在此期间，全国和各驻外机构下半旗志哀，停止公共娱乐活动，外交部和我国驻外使领馆设立吊唁簿。5月19日14时28分起，全国人民默哀3分钟，届时汽车、火车、舰船鸣笛，防空警报鸣响。 Admin5与很多草根网站都将整站换成素装。并建议中国所有站点更换为素装。国务院决定5月19日至21日为全国哀悼日为方便站点哀悼，特提供css滤镜代码，以表哀悼。以下为全站CSS代码。 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。如果网站没有使用CSS，可以在网页/模板的HTML代码<head>和</head> 之间插入： <style> html{filter:progid:DXImageTransform.Microsoft.BasicImage(gr...…
发布于2008-05-19 00:00:00 详细内容(7次阅读) 查看评论(0次评论)

实例教程 CSS实现圆角的三种方法
	作者：博客园未知以下直接给出代码：第一种：<Html> <head> <style> #a{ border-left:1px #333 solid; border-right:1px #333 solid; width:300px; height:500px; } .b{ height:1px; overflow:hidden; border-left:1px #333 solid; border-right:1px #333 solid; } </style> </head> <body> <div> <div class="b" style="margin-left:3px;width:294px;background:#333"></div> <div class="b" style="margin-left:2px;width:296px;"></div> <div class="b" style="margin-left:1px;width:298px;"></div> <div id="a"> </div> </div> </body> </H...…
发布于2008-05-19 00:00:00 详细内容(22次阅读) 查看评论(0次评论)

总结：CSS网站布局的八则技巧
	作者：新客网整理　1.若有疑问立即检测　　在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用，请见 http://validator.w3.org 。请注意，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。　　2.使用浮动功能时记得适当清除指令　　浮动是个危险的功能，未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况，请先确定您的做法是正确的。请参阅52CSS.com网站上的教学。　　3.边界重合时利用padding或border来避免　　您可能会为了一点不应该出现的空间而焦头烂额，或者您需要一点点空间时，怎样都挤不出来。如果您有用到margin，那么很容易产生边界的重合。　　4.尝试避免同时对元素指定padding/border以及高度或宽度　　Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题，但如果�...…
发布于2008-05-14 00:00:00 详细内容(3次阅读) 查看评论(0次评论)

关于CSS控制DIV水平居中问题
	作者：新客网整理　关于CSS 控制DIV水平居中问题，我看到很多新人搞不明月。记得第一次看CSS是一个老外写的书，那个里面谈到居中使用。　　margin-left:auto; 　　margin-right:auto; 　　其实等同于：　　margin:0 auto; 　　于是可以使用这种方式，但是有人用IE时发现没有居中。这里建议你看看是否遗漏了DTD声明。＜!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”＞　　非常多的人犯过类似的错误！这种方法也可以说屡试不爽，但是在某些情况下还是行不通的。于是有了第二种方法。　　margin-left:50%; 　　left: -width/2; 　　这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽，那么你就应该设置left:-384px。很好，已经有两种方法了，可以说已经能够解决你可能遇到的问题了。　　有时候你会发现，这两个还不行。不能兼容一...…
发布于2008-05-13 00:00:00 详细内容(4次阅读) 查看评论(0次评论)

IE对网页中引入CSS样式表的限制
	作者：新客网整理转载　首先介绍一下HTML文档与CSS 的关联常见有4种方式：　　1、使用link标记　　＜link rel="stylesheet" type="text/css" href="sheet.css" /＞　　2、使用style元素　　＜style type="text/css"＞　　body{background:#fff;} 　　h1{font-size:2em;} 　　＜/style＞　　3、使用@import指令　　＜style type="text/css"＞　　@import url(sheet1.css); 　　@import "sheet2.css"; 　　＜/style＞　　4、使用style属性的内联样式(inline style) 　　＜p style="color:#f00;"＞这是红色的字＜/p＞　　在实际应用中，使用style属性的内联样式是不推荐使用的，XHTML1.1已经将其标准为不建议使用，原因很简单这种方式不比font标记强多少，削弱了CSS集中控制整个文档外观的优点。　　前3种方式利用了link标记和style标记，在IE(包括IE6、IE7和IE8 beta1)中有如下限制：　　◆ ...…
发布于2008-04-30 00:00:00 详细内容(12次阅读) 查看评论(0次评论)

CSS教程：弄懂闭合浮动元素
	作者：　按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？　　有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，所以我个人不大喜欢。　　后来又有了一种新的方式，使用 :after 伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用 CSS 生成，但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证 html 比较干净，所以用得还是比较多的。　　再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就�...…
发布于2008-04-24 00:00:00 详细内容(5次阅读) 查看评论(0次评论)

CSS盒模型制定宽度和高度的原理
	作者：新客网整理　当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。　　#test{margin:10px;padding:10px;width:100px;height:100px;} 　　如上一段的代码，很多时候我们会把它所占的位置计算成width:120px，height:120px，因为在正常的理解下，padding是内边距，应该是包括在width里面的，而margin是外边距，所以width＝margin-left + margin-right + width，但是浏览器对于CSS盒模型的解释却并非如此，所以最终我们会发现布局出来的网页宽度与高度都会超出我们预期的计算，最后造成显示上的错位。　　其实不然，对于test所占的位置的真正计算应该是width=margin-left + margin-right + padding-left + padding-right + width，也就是宽度真正所占的大小应该是内边距+外边距+宽度本身，也就是说test真正的大小应该是140px才对。高度的计算与宽度的计算是一样的。　　...…
发布于2008-04-23 00:00:00 详细内容(5次阅读) 查看评论(0次评论)

CSS使用ul进行网页的多列布局
	作者：新客网整理转载　　几天在用CSS写三列布局的时候突然想到的这样一个方法，这个想法自己都觉得有些疯狂，如果其中有什么不对的地方请各位不吝指教。　　当需要写一个三列布局的时候，一般情况下我会选择使用如下的DIV布局方式：　　　　使用这样的嵌套方式无疑可以使代码出错的概率减少很多，但同时这样的布局也略显复杂，对于后期的维护也略显不便。我们在布局导航时经常会使用到一个方法，那就是使用〈ul〉列表来进行布局，而导航可以形容为多列式的布局，既然如此，那么我们也就可以使用〈ul〉来进行页面的多列布局。　　　　这是一个固定宽度的布局，也就是说流动性不强，流动性的布局目前还没有试验过，等有时间了再试验一下，下面贴上这个布局的代码： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <h...…
发布于2008-04-22 00:00:00 详细内容(2次阅读) 查看评论(0次评论)

Div+CSS布局设计网站设计的优点分析
	作者：互联网业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？ Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 <DIV>Very excellent webmaster club www.CHINAZ.com </DIV> 如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P> 是一样的。 DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码 CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和...…
发布于2008-04-20 22:50:56 详细内容(5次阅读) 查看评论(0次评论)

WEB2.0标准教程：第十二天校验及常见错误
	作者：辛苦了好多天，我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合web标准？W3C和一些志愿者网站提供了在线校验程序，来帮助我们检查页面是否符合标准，并提供了修正错误的帮助信息。这些校验非常有用，是我调试页面第…
发布于2008-04-18 16:56:02 详细内容(4次阅读) 查看评论(0次评论)