一起CSS

当前位置:一起CSS

3D效果CSS圆角

日期:2008-12-7 分类:CSS

先看效果吧:

CSS圆角

这种3D效果CSS圆角和《流行的CSS圆角》制作方法是一样的,只是左右上下边框颜色不一样,左上浅,右下深,看上去有阴影,因此就产生了这种3D效果。

既然制作方法和《流行的CSS圆角》一样,这里就不啰嗦了,下面给出相应的代码。

XHTML代码:

<div class="box">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
<h1>3D效果CSS圆角</h1>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

CSS代码:

*{
margin:0;
padding:0;
}
.box{
width:400px;
margin:20px auto;
}
h1{
font-size:2em;
color:#fff;
padding:20px;
text-align:center;
}
b{
display:block;
overflow:hidden;
height:1px;
background:#96C2F1;
border-width:0 1px;
border-style:solid;
}
.b1{
margin:0 5px;
background:#fff;
border:none;
}
.b2{
border-right:#eee;
}
.b3{
border-right:#ddd;
}
.b4{
border-right:#aaa;
}
.b4b{
border-left:#eee;
}
.b3b{
border-left:#ddd;
}
.b2b{
border-left:#aaa;
}
.b2,.b3,.b4{
border-left-color:#fff;
}
.b4b,.b3b,.b2b{
border-right-color:#999;
}
.b2,.b2b{
margin:0 3px;
border-width:0 2px;
}
.b3,.b3b{
margin:0 2px;
}
.b4,.b4b{
height:2px; margin:0 1px;
}
.b1b{
margin:0 5px;
background:#999;
border:none;
}
.content{
background:#96C2F1;
border-left:1px solid #fff;
border-right:1px solid #999;
}

查看效果

由于不同的边框要设置不同的颜色,所以 CSS 代码较多,容易混淆,请多看几遍。

更多例子:

查看:1,076 评论:4 标签:,

流行的CSS圆角

日期:2008-12-6 分类:CSS

这是比较流行的CSS圆角,制作方法和理解都有困难,但看完这篇文章,就能掌握这种方法。

先看效果:

css圆角

制作方法

为了更好的理解,先用简单的代码为例。

XHTML代码:

<b class="top">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
</b>

CSS代码:

b{
display:block;
}
.b1,.b2,.b3,.b4{
overflow:hidden;
height:1px;
border-left:1px solid #000;
border-right:1px solid #000;
}
.b1{
margin:0 5px;
background:#000;
}
.b2{
margin:0 3px;
border-width:0 2px;
}
.b3{
margin:0 2px;
}
.b4{
height:2px;
margin:0 1px;
}

这段代码效果如下图:

css圆角上半部分

.top 是一个容器,.b1 是圆角顶部的横线,.b2 .b3 .b4 分别是设置递减的左右 margin 和相应的 border ,他们便组成了圆角圆弧中的几个点。合在一起,就组成了上半部分的圆角。看下面的动态图就能很好的理解了。

css圆角示意图

为了看的更清楚,图中用了较粗的“线”和“点”,看起来锯齿比较明显,而网页上设置的 1px、2px 就不容易看出锯齿了。

下半部分和上半部分的原理是一样的,只是“倒”过来了。

完整的代码

XTHML代码:

<div id="box"><!--容器-->
<b class="top"><!--上半部分圆角-->
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
</b>

<div id="content">内容区</div>

<b class="bottom"><!--下半部分圆角-->
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</b>
</div>

CSS代码:

b{
display:block;
}
.b1,.b2,.b3,.b4{
overflow:hidden;
height:1px;
border-left:1px solid #000;
border-right:1px solid #000;
}
.b1{
margin:0 5px;
background:#000;
}
.b2{
margin:0 3px;
border-width:0 2px;
}
.b3{
margin:0 2px;
}
.b4{
height:2px;
margin:0 1px;
}
#content{
border:solid #000;
border-width:0 1px;
}

查看效果

注意各个数值的设置。

查看:776 评论:1 标签:,

用js让“footer”处于底部

日期:2008-12-2 分类:CSS,前端技术

当一个网页比较简单,内容比较少使得网页不足浏览器高的时候,为了显示更合理,我们希望让 footer 部分显示在浏览器的底部。先前介绍了《使用CSS定位页面的“footer”》,现在来用 javascript 来实现这种效果。

基本思路

以常见的架构来为例,容器 #container 内有上中下三部分,分别为 #header 、#content 、#footer。首先分别获取容器 #container 和浏览器的实际高度,如果容器 #container 的高度小于浏览器的高度,就让 #footer 绝对定位到底部。

代码实现

XHTML 代码:

<div id="container">
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>

javascript 代码:

<script language="javascript" type="text/javascript">
window.onload = function(){
var containerHeight = document.getElementById("container").scrollHeight;
var footer = document.getElementById("footer")
var allHeight = document.documentElement.clientHeight;
if(containerHeight < allHeight){
footer.style.position = "absolute";
footer.style.bottom = "0"
}
else{
footer.style.positong = "";
footer.style.bottom = "";
}
}
</script>

解释一下两个重要的属性 scrollHeight 和 clientHeight:

scrollHeight 层的实际高度,实际有多高就多高,与当前网页高度无关;

clientHeight 层在当浏览器屏幕的高度,非该层的实际高度。

为了让例子效果更明显,再加上一些 CSS 代码:

*{
margin:0;
padding:0;
}
#header{
background:#ff0000;
}
#content{
background:#00CCFF;
}
#footer{
background:#FFCC00;
width:100%;
}

这样,如果网页的高度小于浏览器的高度,那么 footer 部分就会定位到底部。

查看效果

查看:480 评论:没有评论 标签:

使用CSS定位页面的“footer”

日期:2008-11-29 分类:CSS

基本思路

首先考虑外层设置一个容器 div ,id 设为 #container ,使他的高度为浏览器窗口的高度,然后将 #footer 这个 div 设置为 #container 的子 div,并使用绝对定位的方式,使他固定到 #container 的底端,以实现希望的效果。

点击这里察看案例页面效果。 改变浏览器的高度和宽度,可以看到 Footer 部分的效果。

代码实现

下面先考虑HTML结构,这个演示页面的HTML代码非常简单。

<div id="container">
<div id="content">
<h1>Content</h1>
<p>请改变浏览器窗口的高度,以观察footer效果。</p>
<p>这里是示例文字,………,这里是示例文字。</p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>

然后设置CSS,

body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#container {
min-height:100%;
position: relative;
}
#content {
padding: 10px;
padding-bottom: 60px;
/* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}

1:首先要给 html 和 body 元素设置高度(height属性)为100% (第5行),这样先保证根元素的高度撑满整个浏览器窗口,然后下面才能使 #container 的高度撑满整个浏览器窗口。至于为什么用同时设置 html 和 body 元素,是因为 Firefox 和 IE 认为的根元素不一样,因此这里都给他们设置上。

2:然后把 #container 的高度也设置为 100% (第8行),但是要注意,这里使用了“min-height”属性,而不是普通的 height 属性,这是因为我们要考虑到,如果 #content 中的内容如果增加了,他的高度超过了浏览器窗口的高度,那么如果把 #container 的高度仍然是 100%,就会导致 #footer 仍然定位在浏器窗口的下端,从而遮盖了 #content 中的内容。而使用 min-height 属性的作用就是使 #container 的高度“至少”为浏览器窗口的高度,而当如果它里面的内容增加了,他的高度会也跟随着增加,这才是我们需要的效果。

但是需要说明的是,在 Firefox 和 IE7 中,支持 min-height 属性,而 IE6 中,并不支持 min-height 属性,但是“歪打正着”的是,IE6 中,会把 min-height 属性解释为 height 属性,但是 IE6 中 height 属性的效果却是 min-height 本来应该具有的效果,也就是说,在 IE6 中,子 div 的高度会撑大父 div 的高度。所以这样正好可以实现在 IE6、IE7 和 Firefox 中都可以正确实现我们希望的效果了。

3:接下来,将 #container 设置为相对定位(第9行),目的是使他成为它里面的 #footer 的定位基准,也就是所谓的“最近的定位过的祖先元素”。

4:然后把 #foooter 设置为绝对定位(第17行),并使之贴在 #container 的最下端(第18行)。

5:但是要注意,如果当我们把 #foooter 贴在 #container 的最下端以后,他实际上已经和上面的 #content 这个div 重叠了,为了避免覆盖 #content 中的内容,我们在 #contetn 中设置了下侧的 padding,使 padding-bottom 的值等于 #footer 的高度(第13行),就可以保证避免覆盖 #content 的文字了,这个高度的计算注意代码中的注释中给出的计算方法(第14行)。

点击这里察看案例页面效果。

文章摘自:前沿视频教室

原文地址:http://learning.artech.cn/20080328.css-footer-position.html

查看:687 评论:1 标签:

ie img 3px bug

日期:2008-11-22 分类:CSS

ie img 有 3px 的缝隙也是 ie 的经典 bug 之一,相信已经不陌生了,但还是先看看效果吧(也许你并没有见过):

效果1 效果2

效果1 图片下方有缝隙,这是最常见的;效果2 则不但下面有,右边也有,并且在 FF 和 opera 里,下方也有缝隙。这是因为效果2 图片的父元素是内联元素。

这个缝隙的大小网上说是 3px ,其实在 ie 里是 4px (你可以设置图片父元素的负 margin 测试),而效果2 在 FF 里下方有 3px 的缝隙,在 opera 里下方有 2px 的缝隙。

这个小缝隙在有些情况并不会造成太大的影响,不修复也没有关系;但如果对有些情况影响较大,那就不得不修复了。修复方法有很多:

1、改变XHTML排版,让 img 的后面紧跟标签(若没有文字的话),如:

<div><img src="" alt="" /></div>

而不是:

<div>
<img src="" alt="" />
<div>

2、为 img 设置 display:block ;

3、为父元素设置 font-size:0 ;

4、为 img 设置 vertical-align 属性,值可以是: top|bottom|text-top|text-bottom (其他值效果不好或没有效果)。

但是:

如果图片的父元素是内联元素的话,选择第 3 种方法,在 ie 里右边仍有 1px 的缝隙,而在 opera 里下方仍有 2px 的缝隙,请用相应的浏览器查看下面的效果:

查看效果

如果图片的父元素是内联元素的话,选择第 4 种方法,在 ie 里只能修复下方的缝隙,而右边的缝隙则不能修复。看效果:

查看效果

如果图片的父元素是块级元素的话,上面 4 种方法都能完全修复此 bug 。但为了保险,选择第1 、第2 种方法更妥当。

查看:1,668 评论:2 标签:,,

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved