简明现代魔法 -> CSS层叠样式表

用p标签网页区域分隔

设计美观的分割区域

实现这个效果,不算div层,在html代码上只需要一行p标签代码。

发布于 2009-11-13 分类:csszone

1像素宽图片做背景

background:url(images/footerbg.gif) 0 0 repeat-x #D3F0F0;

效果如本页的背景,通过 css 的 repeat-x 属性将图片横向叠加,实现背景。小技巧:对于显示一些非正文的文字信息,可以使用 #5F7A77 这个颜色,可以突出正文。

发布于 2009-11-12 分类:csszone

li元素的图片项目符号

list-style-image:url(images/sidebarLi.gif);

其实关键的一行代码就是list-style-image:url(images/sidebarLi.gif);

发布于 2009-10-29 分类:csszone

简单的CSS导航菜单制作

最常用的导航设计之一

列表元素默认是从上到下的方式排列,但是我们需要它们横向排列。只要将li元素的display方式改为block,然后将浮动float设为left即可实现。display:block;使得a链接对象由行间对象变成块对象,从而具有宽度、高度等属性。

发布于 2009-10-27 分类:csszone

控制层的可见性

visibility: hidden与display:none

有时候,我们需要一个层,但是这个层的内容不能显示出来。比如内容需要用JavaScript调用,被调用的那部分内容就不必在页面中显示出来了。用CSS可以实现,下面分别介绍2种方法。

发布于 2009-10-09 分类:csszone

CSS选项卡效果制作

灵活相应鼠标的一个选项卡设计

在网站设计中,使用选项卡可以省下很多空间。下面介绍一个简单好用的CSS选项卡。下面是CSS代码,还有部分Javascript代码可以察看本页源文件获得。

发布于 2009-10-09 分类:csszone

CSS盒模型

CSS设计基础中的基础

网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,如果是 Firebug 用户的话,就会很熟悉下面的图表了。

发布于 2009-09-24 分类:csszone

使用CSS控制段落首行缩进

text-indent的使用

text-indent的值为font-size的2倍,相当于缩进2个汉字。p[class="content"] 用于控制正文段落的首行缩进。p[class="tiltle"] 则用于控制标题类文字的样式。

发布于 2009-09-22 分类:csszone

CSS背景属性Background详解

你真正理解background属性了么?

这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域,包括 padding 和 border,但是不包括元素的 margin。它在Firefox, Safari ,Opera 以及 IE8 中工作正常,但是 IE6 和 IE7 中,background 没把 border 计算在内。

发布于 2009-09-19 分类:csszone

CSS浮动属性Float介绍

让你深刻理解浮动

float 是 css 的定位属性。在传统的印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对 定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了。

发布于 2009-09-10 分类:csszone

CSS中position的absolute和relative的应用

相对与绝对定位

之前老弄不明白,只能凭借一点短期内“虐出来的经验”制作需要的效果,后来仔细研究了一下Hutia的XScroller,并且仔细看了文档,才知道这个position属性其实是指本体对上级的定位。如果这么理解,就好办了。默认的属性值都是static,静态。就不用多说了。最关键的是 relative(相对)以及absolute(绝对)。

发布于 2009-08-26 分类:csszone

用clear:both清除浮动

控制float属性在文档流的物理位置

在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both;CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动)……

发布于 2009-08-26 分类:csszone

将HTML的标签样式写到CSS里

将内容与样式相分离

将以下代码写入CSS文件,即可控制h1、h2、h3、h4、h5、h6、p以及表格table的相关标签的样式,将这些标签里的中文设为宋体,英文设为Verdana。

发布于 2009-08-23 分类:csszone

用CSS制作细线表格

border-collapse:collapse;

border-collapse:collapse; 属性的使用。

发布于 2009-08-16 分类:csszone

CSS的发展历程

了解CSS的过去

从1990年代初HTML被发明开始样式表就以各种形式出现了,不同的浏览器结合了它们各自的样式语言,读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的,最初的HTML版本只含有很少的显示属性,读者来决定网页应该怎样被显示。但随着HTML的成长,为了满足设计师的要求,HTML获得了很多显示功能。

发布于 2009-08-13 分类:csszone
 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们