网页制作之DIV+CSS
文章平均质量分 64
gjpdeyx
Enjoy the life!
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
选择符的命名原则
<br />其实这个主题还蛮无聊的。因为我想来想去,选择符的命名,其实并不是那么重要。况且,对于不同的人,有不同的习惯,我在这里也没法定出什么完美的标准来号召大家都使用。<br />不过,规划好选择符的命名,还是有几点好处的:<br />1. 节约时间。不得不承认,我本人经常把10%-20%左右的时间花在斟酌选择符命名上。当然,或许这只是我个人的强迫症问题。<br />2. 防止冲突。虽然概率很小,但还是会遇得到这种情况:某个选择符的名字,已然被用过了,导致样式冲突。这种情况通常发生在不同尺度的转载 2010-06-21 17:24:00 · 653 阅读 · 0 评论 -
8款在线CSS优化工具/组织和压缩CSS
CSS的优化通常包括两方面: 格式化CSS和精简CSS。 精简CSS的办法是把具有相同属性的元素合并在一起,但这会降低代码的可读性,使代码的后期维护很麻烦,稍不注意就出错。 格式化CSS一般就是多行模式或单行模式的选择,比如我个人就完全受不了多行模式 下面是一些在线的CSS优化工具,能让你方便的对CSS文件进行各种优化处理。 1. Online CSS Opti转载 2010-05-17 16:06:00 · 551 阅读 · 0 评论 -
CSS 命名规范
CSS 命名规范XHTML-CSS写作建议所有的xhtml代码小写属性的值一定要用双引号("")括起来,且一定要有值每个标签都要有开始和结束,且要有正确的层次空元素要有结束的tag或于开始的tag后加上"/"表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等到的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜转载 2010-05-18 11:08:00 · 454 阅读 · 0 评论 -
网页段落行间距控制
本文主要讲解如何用CSS控制网页段落行间距的三个实例:1、使用百分比设置行间距,2、使用像素值设置行间距,3、使用数值来设置行间距。1、使用百分比设置行间距本例演示如何使用百分比值来设置段落中的行间距。p.small {line-height: 90%}p.big {line-height: 200%}这是拥有标准行高的段落。在大多数转载 2010-05-17 16:10:00 · 3959 阅读 · 0 评论 -
一些细节
1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: div{maring:30px;margin:28px}转载 2010-05-12 13:32:00 · 348 阅读 · 0 评论 -
CSS样式表设计的十条技巧
1.css 字体简写规则 当使用css定义字体时你可能会这样做: font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif; 事实上你可以简写转载 2010-05-12 13:34:00 · 337 阅读 · 0 评论 -
如何对齐文本框和旁边的图像按钮
一个文本框旁边一个按钮是很经常用到的网页内容,比如搜索框等等,而如果旁边的按钮使用图像的话,他们竖直方向就很不容易对齐,即使使用 vertical-align、padding和margin等都不行(特别是在IE中,Firefox中使用vertical-align还可以)。例如有如下代码:原创 2010-05-13 14:28:00 · 477 阅读 · 0 评论 -
IE里面不显示背景图片
在IE里面怎么不显示背景图片,解决方法:ie/工具/internet选项/高级/显示图片 勾选原创 2010-05-12 13:09:00 · 593 阅读 · 0 评论 -
实现类似textarea这样可以滚动显示内容的方法
/*————————————————— 作者:阿辛(Xinple) 时间:2005-11-4 00:21 地点:http://xinple.org ————————————————-*/ 今天晚上收到过眼的博客-行走在此间的一封Email,问我怎样实现一个类似下面的效果:1.听周杰伦这孩子最新专辑的主打歌,已经几日了,转载 2010-05-11 15:17:00 · 1141 阅读 · 0 评论 -
CSS快速让图片变灰,网站快速变灰
目前很多网站都变成灰色调掉念地震的死者。站长们快都把网站风格改成灰色吧。只需要几行CSS代码就可以了。img { FILTER: gray; }a:link img {FILTER:gray}a:hover img {FILTER:gray }a:active img {FILTE转载 2010-05-11 10:56:00 · 748 阅读 · 0 评论 -
用CSS代码让网站图片变灰
这里提供css滤镜代码,html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }使用方法:这段代码可以变网页为黑白,将代码加到网站页面CSS最顶端就可以实现素装。如果网站没有使用CSS,可以在网页/模板的HTML代码和 之间插入:html{filter:progid:DXImageT转载 2010-05-11 10:58:00 · 805 阅读 · 0 评论 -
奉献一个让网站变灰的代码
让互联网也变黑白,沉痛哀悼被地震夺去生命的同胞们。css代码:body{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}放在最顶部即可。代码是css,不要放在里面如果首页有flash的话,最好加上flash背景透明的代码!如下: //透明flash背景 //屏转载 2010-05-11 10:32:00 · 410 阅读 · 0 评论 -
DivCSS网页布局中CSS无效的十个常见原因
我们从52CSS.com中学习DivCSS网页布局的知识,可是W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错。验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能。下面十个细微的失效问题难住了大批程序员,本文就告诉你如何解决。在本文开始前介绍一些使用W3C验证程序时需要注意的问题。 1、不要担心验证程序的警告转载 2010-05-24 11:34:00 · 550 阅读 · 0 评论 -
CSS基础:DIVcss初学者需要引起重视的10个问题与技巧
DIVcss初学者往往感觉自己遇到很多莫明其妙的问题,其实只是一些小细节没有引起重视,在52CSS.com中,有多篇文章提醒大家经引起重视,下面罗列了10个问题与技巧,温故而知新。 一、检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 二、检查CSS是否转载 2010-05-24 11:44:00 · 420 阅读 · 0 评论 -
DIV+CSS页面设计中的IE6的文字溢出BUG
<br />为什么这个div的文字在ie6里会多出3个字符,在页面制作中用DIV+CSS用的多了有时会遇到文字溢出的现象,出现此现象是由IE6的3PX的BUG所引起的。<br />以下为出现该BUG的实例:<br /><div style="width:400px"><br /><div style="float:left"></div> <br /><!-- --><br /><div style="float:right;width:400px">↓注释在IE6中造成文字溢出实例</转载 2010-06-23 17:43:00 · 506 阅读 · 0 评论 -
DIV+CSS教程:CSS之网页滚动条样式overflow的学习
<br />一个元素的内容需要的现实空间超出了元素的尺寸时我们应该怎么办,我们可以设置这个固定区域让他产生滚动条,滚动条如何来实现,来看我下面的解说:<br />这里我们设置滚动条可以利用overflow这个命令,下面我们来学习一下overflow的应用;<br />一、首先来了解一下overflow<br />overflow:内容溢出时的设置,可以设置对象是否显示滚动条,<br />overflow-x:指水平方向内容溢出时的设置<br />overflow-y:指垂直方向内容溢转载 2010-06-23 17:42:00 · 1432 阅读 · 0 评论 -
CSS样式在IE6下无效的问题解决方法
<br /> 点评:网页采用了 UTF-8 编码格式,这本来没有问题,问题是外部 CSS 文件默认是 ANSI 编码,并没有保存为 UTF-8 格式。<br />问题症状: <br />1、<link href="css.css" rel="stylesheet" type="text/css" /> <br />通过link方式引用css,在ie7,ie8可以正常显示,ie6不能正常显示。 <br /><br />解决: <br />1、改变文件编码格式为utf-8,并在css文件加上转载 2010-06-11 17:08:00 · 584 阅读 · 0 评论 -
IETester网页兼容性测试利器也难调众口
今天说某个页面变形了,因为前段时间重装以后用的是正版,就是IE6,所以就没装IEtester。这下没办法了,只好装了一个。现在不是最新的是IEtester 到0.4.4了,装了最新版的。然后新建窗口,嗯,IE6,IE7都还好,怎么新建IE8就不行了 。弹出提示框:无法加载所需的IE版本。 听朋友说IE7有IE8的内核。然后就上网查查了。以下为网摘:原创 2010-05-31 10:20:00 · 1159 阅读 · 0 评论 -
CSS基础教程整理
这里只把一些我自己还需要改进的地方发上来。————————————————————————1.网页不是静态的、绝对的媒体。这意味着内能伸缩变形,用户应该被允许调整自己喜欢的方式,包括字体大小和屏幕大小。 因为这样,建议使用"em"和"%"在font-size上(宽度和高度),相比下px不能够在大部分浏览器改变大小,所以要少用,可以用在边框的大小上。 2.css可以处理原创 2010-05-25 16:59:00 · 638 阅读 · 0 评论 -
页脚最小高度100%保持在页面底部的布局方法
有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+。下面我们看步骤:1、为了让浏览器识别高度100%我们需要先转载 2010-05-27 17:11:00 · 700 阅读 · 0 评论 -
左中右3栏布局中最先显示中栏内容的方法
对于一个左中右3栏布局的页面,比如home.donews.com,用户最想看到的是中栏的信息,左右2栏其实网站的相关信息的导航入口,所以中栏信息是最重要的,应该在页面显示顺序上优先于左右2栏。或者也可以这么说就是要将一个页面的最重要的信息优先于页面其他元素显示,无论是3栏还是2栏布局,说得很对。 浏览器显示页面是一行一行的按顺序执行代码,也就是说写在前面的先执行显示,而对于左中右转载 2010-05-27 13:15:00 · 454 阅读 · 0 评论 -
DIV CSS网页布局:最小高度(min-height)的妙用
最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozilla 支持,IE7开始也支持了,但IE7处于测试阶段,等正式版发布到普及需一段也许比较长的时间,除非MS把它捆绑在某个操作系统上,如何在现有基础上(IE6 80-90%),合理、妙用最小高度了?假定有二个BOX,我们需要它的最小高度为150转载 2010-05-25 17:54:00 · 686 阅读 · 0 评论 -
CSS floats来创建三栏网页布局的方法
三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。现在,我们都开始抛弃基于表转载 2010-05-27 14:58:00 · 380 阅读 · 0 评论 -
DivCSS小结:浏览器默认HTML的CSS样式属性
这个“浏览器默认HTML的CSS样式属性”,在你需要还原默认值的时候,比较有用。开始的时候应用通配选择器 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了。 但通配选择器在大型网站的构建中,影响性能,可以参考52CSS.com的相关文章,大家还是需要谨慎一些。 以前一直在找这份文档,今天偶然在w3上看到了。除了inl转载 2010-05-24 11:36:00 · 2605 阅读 · 0 评论 -
居中的问题
关于居中的问题,我只写body{text-align:center}就可以居中了但是只写上page-container{margin:auto}出面了和上面几位同学一样的问题,不能居中哪位大可以解释一下吗————————————————————————————在IE中,只需加入body{text-align:center}就能实现居中,但page-container原创 2010-05-24 13:53:00 · 628 阅读 · 0 评论 -
在链接css或js文件时后面带有问号参数是什么意思?
<br /><br />在链接css或js文件时后面带有问号参数是什么意思?<br /><link href="/stylesheets/display.css?1166154827" media="screen" rel="Stylesheet" type="text/css" /><br /> <script src="/javascripts/prototype.js?1166154827" type="text/javascript"></script><br />如上转载 2010-07-02 05:29:00 · 2335 阅读 · 0 评论 -
网站中图片变形如何解决
网站中的图片,特别是图片列表,很少有大小一样的。但是每张图片都要跟其他图片有点距离,不能粘在一起。 我以前的做法是把图片放在一个div里面,然后给图片限定宽高,可能是以前做的网站的图片都处理得差不多大小,所以也没发现什么破绽。 但是这次做的一个网站,由于图片大小相差有点大,所以很明显的看出变形了。 解决办法: 把图片的宽原创 2010-05-07 17:05:00 · 2408 阅读 · 0 评论 -
网页中多个样式表顺序问题
<br />当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。正如以前所提及的,网页制作者和读者都有能力去指定样式表。<br /> <br />当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。<br /> <br />网页制作者应该小心地使用! important 规则,因为它们会超越用户任何的! important 规则。例如,一个用转载 2010-06-26 16:43:00 · 534 阅读 · 0 评论 -
div css表单布局的五个小技巧
<br />div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意。<br /><br /> 1、表单文本输入的移动选择:<br /><br /> 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如:<br /><br />Example Source Code [www转载 2010-06-26 16:36:00 · 632 阅读 · 0 评论 -
Goodbye to CSS Hack
看看下面这段代码,是否倍感亲切但又觉得很陌生呢:.test { background-color: black; /* firefox, opera, ie8 */ [;background-color: green;] /* safari, chrome */ *background-color: blue; /* ie7 */ _backg转载 2010-04-21 16:18:00 · 377 阅读 · 0 评论 -
CSS hack:区分IE6,IE7,firefox
区别IE6与FF: background:orange;*background:blue;区别IE6与IE7: background:green !important;background:blue;区别IE7与FF: background:o转载 2010-04-20 17:59:00 · 325 阅读 · 0 评论 -
实现了不用图片的圆角
昨天下午实现了不用图片的圆角,今天发上来,大家分享分享。呵呵以下分别是.html文件和.css文件,分别保存以后,放在同一个目录中,就可以看到效果了。 nav.html http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">导航原创 2010-04-16 15:55:00 · 474 阅读 · 0 评论 -
一个比较繁琐的导航
一个用了多个ul和li的导航。图如上传 listNav.html源文件: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">listNav 高考 动态原创 2010-04-16 15:47:00 · 550 阅读 · 0 评论 -
用DIV+CSS布局中,如何设置图片与文字在同一高度?
如果把文字和图片放在同一个图层的,文字可以做到居中,但是图片就不能,因为图片默认是左上对齐的!这就是为什么在制作的时候看到图片会靠上的原因。如果你令到图片居中了,文字就会相对于图片右下对齐了!如果你想2个都居中的话,就不能把他们放在同一个div,或者你试下把他们放在2个div中,或者一个图片放div中,文字直接放页面中,不放div ,这样还可以给网页瘦身。把那个放图片和文字的层cs原创 2010-04-15 12:03:00 · 10332 阅读 · 0 评论 -
IE6下DIV错位
这是因为IE6采用的内核默认把DIV之间的距离增加了3~5个PX。 针对firefox ie6 ie7的CSS样式,现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!一个针对IE7不错的hack方式就是使用"*+htm转载 2010-04-13 14:06:00 · 536 阅读 · 0 评论 -
CSS个人小结
原图是指用ps设计出来由图层整合而成的最终的设计图。FSCapture.exe的捕捉活动窗口的快捷键是F2如何去掉背景图上的字?使用切片工具把图片上的所有图片切下来以后,通过“文件|存储为Web所用格式”,选择“存储”,在“切片”下选择“所有切片”(选中的切片只有当前的一个),将所有切片导出,它会自动在保存路径下生成一个images文件夹.背景图片一定要设置宽和高。当页面中的元原创 2009-12-22 21:37:00 · 453 阅读 · 0 评论 -
CSS中有序列表的一些特殊代码形式
以前我们面对这些有着顺序或是有数字注明排序的内容时大多是在数据前自行加上一个数值,或是由程序加上这个数值。而如果使用有序列表则不需要这么麻烦,根本不用自行去填写序数,当单层列表的时候这种特性似乎并不明显,而当使用多层的时候其特性就很明显了。那么还是先来了解一下有序列表的代码形式:这就是列表的内容了,这是第一句这就是列表的内容了,这是第二句这就是列表的内容了,这是第三句这就是转载 2009-11-02 13:55:00 · 922 阅读 · 0 评论 -
常用的CSS命名规则
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:原创 2009-11-02 13:19:00 · 395 阅读 · 0 评论 -
DIV+CSS网页布局及网站设计常犯错误
1、导航菜单使用图片、FLASH 导航菜单使用图片、FLASH当然比纯文本来得好看一些,但是搜索引擎并不认识你的图片和FLASH。如果你非要使用漂亮的图片来做导航的话,可以使用背景替换的方法(我会在下次谈到这一个方法的);如果你要使用FLASH做导航,那我就没你办法了。建议做一个导航菜单链接的xml文提交到搜索引擎。2、不恰当地使用图片 为了网页美观,经常会到处贴满图片,这样做是不正确的,与内容无关的图片能少就少吧。我们可以把这些图片做成容器的背景。3、内容里特殊字体的运用 我承认转载 2010-06-26 16:46:00 · 556 阅读 · 0 评论 -
img图片元素下多余空白解决方案
在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」,根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的B<br /> 在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」,根据原因的不同要用不同的解决方法,这里转载 2010-06-25 13:32:00 · 625 阅读 · 0 评论
分享