订阅: RSS

兼容浏览器的网页细线表格设计

细线表格如果单纯设置边框,很难保证浏览器兼容。常见的做法是利用 CSS2 的 "border-collapse:collapse;" 属性合并表格边框;并对 table 元素设置左边框和上边框,对 th 和 td 元素设置右边框和下边框。

Markup:

<table>    <tr>        <th>table head (row1, col1)</th>... 
				
分类:CSS-HTML | 评论: 0 | 查看次数:

CSS3制作网页下拉菜单代码解释

当我在为 WordPress 编写 Notepad 主题 时,顺道学习了一些新的 CSS3 特性,现在此分享。查看演示可以看到一款类似 Mac 风格的多级下拉菜单,使用 border-radius,box-shadow 和 text-shadow 创建。在 Firefox,Safari 和 Chrome 浏览器中能够完美地渲染。即便是诸如 IE7+ 等不兼容 CSS3 的浏览器,也可以正常呈现页面,只不过忽略了对圆角和阴影的渲染。

...
分类:CSS-HTML | 评论: 0 | 查看次数:

CSS3的简单又实用的3个属性

这篇文章介绍了 5 个实用的 CSS 属性。你应该很熟悉,但很可能很少会使用到。我并不是在谈论展望全新的 CSS3 属性,我指的是旧的 CSS2 中的属性,如:clip,min-height,white-space,curosr 和 display 等一些被所有浏览器广泛支持的属性。因此,千万不要错过这篇文章,因为你可能发现它们竟有如此之大的用途。

1、CSS Clip

剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素:你必须指定其 position 属性为 absolute,然后指定相对于元素的 top,right,bottom,left 值。

...
分类:CSS-HTML | 评论: 0 | 查看次数:

css3阴影属性box-shadow注意事项

css3阴影属性box-shadow的一些注意点:

box-shadow:阴影水平偏移值(可取正负值); 阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色;

Firefox支持Box Shadow(阴影):-moz-box-shadow:2px 2px 5px #333333;

webkit内核的Safari和Chrome支持Box Shadow(阴影):-webkit-box-shadow:2px 2px 5px #333333;

Opera支持Box Shadow(阴影):box-shadow:2px 2px 5px #333333;

...
分类:CSS-HTML | 评论: 0 | 查看次数:

CSS3的border-radius(圆角)

border-radius(圆角)的几点说明:

border-radius:长度
Firefox支持border-radius(圆角):-moz-border-radius:2px;
webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:2px;
Opera支持border-radius(圆角):border-radius:2px;
IE不支持border-radius(圆角)

...
分类:CSS-HTML | 评论: 0 | 查看次数:

table建站,XHTML建站和DIV建站的不同

最近有客户问到“table建站、DIV建站以及XHTML建站的区别”,其实这也是国内网站建设逐步走向成熟的标志。网站建设,简单的来说,就是“这个人长的怎么样”和“这个人内心怎么样”。一部分是外观所展示出来的“视觉效果”、另一部分是藏在里面的“代码元素”。

我们先来举一个简单的例子,用这3种不同的代码风格,实现同一个页面效果:

1.首先是用table来写,需要8行代码:

...
分类:网页设计 | 评论: 0 | 查看次数:

再论清除浮动的空DIV方法

CSS 使用浮动会造成布局的混乱,通常清除浮动的方法是,利用一个如下样式的空 Div:

<div class="clear"></div>.clear{clear:both;}

更为优良的 CSS 代码是:

.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clear{zoom:1;}
...
分类:CSS-HTML | 评论: 0 | 查看次数:

如何使得CSS代码更具有易维护性

如何让你的CSS代码更具有组织性和易维护性,为什么你的样式表总是臃肿和混乱的?有些时候是源于一开始书写时的混乱和草率,有时候也是因为后期的维护和各种HACK的需要,但不管如何,书写出干净、易于管理的CSS很简单,下面是10条改进的方法:
1.井井有条。
和许多其他的事情一样,首先要保持一个良好的组织性,而不是想到ID就写ID,想到CLASS就写CLASS,而要使样式表保持一个连贯的结构,这能让你充分的利用样式的继承。首先定义你最常用的项目,然后是不太常用到的然后是其他,这会使你的CSS属性得到正确的继承,当你需要重新定义一个特殊的风格时会很简单,也会使得你以后对该CSS的修改和编辑更加迅速,因为它遵从简单、可读、有逻辑的结构。
...

分类:CSS-HTML | 评论: 0 | 查看次数:

DIV元素与SPAN元素的区别

首先讲两个概念,一个是行内元素,一个是块级元素。行业元素是指该元素标记的内容不不会对现在的结构造成影响,属于应用样式,辅助应用样式表等作 用;而块级元素为一个块状,单独占据一行,相当于在一个该元素前后各加一个换行。

两者最明显的区别是:DIV(division)是一个块级元素,可以包含段 落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。 块元素相当于内嵌元素在前后各加一个
...

分类:CSS-HTML | 评论: 0 | 查看次数:

CSS代码布局八条最常见的错误

很多人对于CSS都是边干边学习,因为它不像C#之类的语言那么复杂,看起来似乎挺简单,然而正是这种对CSS的不完整的理解,导致了许多的CSS代码破坏了布局,或者带来了无休止的调试,以下总结了八条最常见的错误,以及它们的解决之道:
1.不阅读或者没有读过W3C标准的文档。

...

分类:CSS-HTML | 评论: 0 | 查看次数: