三面环绕CSS+DIV广告代码
作者:唐布拉草原 日期:2008-08-16 21:10
CSS实用教程(2)
作者:唐布拉草原 日期:2008-08-16 10:35
从基础到精通:CSS实用教程(三)
十二.控制BOX的样式
样式表规定了一个容器BOX,它将要储存一个对象的所有可操作的样式。包括了对象本身、边框空白、对象边框、对象间隙四个方面。
为了大家更好地理解这些属性的意义,以及互相之间的关系,请看下面这个图示:
1.边框空白(MARGIN)
如图所示,位于BOX模型的最外层,包括四项属性。
格式分别如下:
·margin-top:顶部空白距离
·margin-right:右边空白距离
·margin-bottom:底部空白距离
·margin-left:左边空白距离
空白的距离可以用带长度单位的数字表示。
如果使用上述属性的简化方式margin,可以在其后连续加上四个带长度单位的数字,来分别表示margin-top、margin-right、margin-bottom、margin-le
CSS实用教程(1)
作者:唐布拉草原 日期:2008-08-16 10:34
样式表CSS在网页中占着极重要的地位,它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写,译为“层叠样式表单”。CSS几乎可以定义所有的网页元素,CSS虽然功能强大,但平时我们用到的是很少的,最常见的有:定义字体大小(用CSS定义的字体大小不会浏览器的字体设置而改变)、去掉超链下划线、超链接变色等等。下面详细、简练地讲如何使用CSS。
CSS基础学习:样式表CSS简明教程
样式表CSS在网页中占着极重要的地位,它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写,译为“层叠样式表单”。CSS几乎可以定义所有的网页元素,CSS虽然功能强大,但平时我们用到的是很少的,最常见的有:定义字体大小(用CSS定义的字体大小不会浏览器的字体设置而改变)、去掉超链下划线、超链接变色等等。下面详细、简练地讲如何使用CSS。
CSS多种居中方式
作者:唐布拉草原 日期:2008-08-12 23:18
还有居中最简单的方法就是 margin:auto; 加入 这个属性,再设定宽度就可以了
一、单行内容的居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了
height: 4em;
line-height: 4em;
overflow: hidden;
}
优点:
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点:
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是:
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话,overflow: hidden 一定要
为什么?
请比较以下两个例子:
图片特效CSS代码
作者:唐布拉草原 日期:2008-07-31 19:32
src="图片地址" style="border:3 solid #ff0000(框边颜色)"></center>
2 加双边框
<center><img
src="图片地址" style="border:5 double green"></center>
3 加立体框
<center><img src=图片地址
style="border:25 outset #ff88ff"></center>
4 加立体框(a)
<center><img
src="图片地址" style="border:25 inset #ff88ff"&
保存CSS 中加载的图片。保存网页CSS图片软件
作者:唐布拉草原 日期:2008-07-21 12:11
IE7 下自适应高度 CSS 绝对简洁实用
作者:唐布拉草原 日期:2008-07-18 11:44
CSS精简压缩工具
作者:唐布拉草原 日期:2008-06-23 12:03
http://www.cleancss.com/
CleanCSS是一个免费的CSS精简压缩工具,通过这个在线工具,可以将你的CSS文件压缩、优化成更精简,这将大大提高你的网站的载入速度。进入CleanCSS后, 你可以输入要压缩的CSS代码或是该CSS文件的所在URL地址, 然后选择代码布局和相应的精简压缩选项, 最后点击生成即可.
当然, 这里所说的压缩并不是像.zip文件那样的压缩, CSS文件的压缩呢, 其实就是指通过对CSS代码中重复的地方进行合并来达到减少代码的效果. 不过, 对于那些需要经常修改到CSS代码的朋友来说, 并不推荐使用这个工具
css 定义图片边框样式
作者:唐布拉草原 日期:2008-06-20 23:10
{
border: 4px solid #ffffff;
filter:progid:dximagetransform.microsoft.glow(color=#000000,strength=3);
}
<style>
.out {
position:relative;
background:#bbb;
margin:10px auto;
width:285px
}
.in {
background:#fff;
border:1px solid #555;
padding:10px 5px;
position:relative;
top:-5px;
left:-5px;
&


