<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS test</title>
<style type="text/css">
body
{
margin: 0; /*背景图片固定居中
http://www.w3school.com.cn/css/pr_background-position.asp
http://www.198484.com/?action=show&id=51
*/
background-image: url('images/bg1.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
#header
{
}
#inner-header
{
margin: 0 auto;
width: 960px;
background-color: Gray;
height: 80px; /*布局块阴影,如果不想支持低版本IE可去掉滤镜
http://blog.imbolo.com/cross-browsers-css-shadow/
*/
box-shadow: 3px 3px 4px #000;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
}
#main
{
background-color: Gray;
margin: 10 auto;
width: 960px;
min-height: 500px;
height: auto; /*
背景半透明
http://blog.csdn.net/zenwong/archive/2008/08/29/2846546.aspx
*/
filter: alpha(opacity=70); /*IE*/
-moz-opacity: 0.7; /*Mozilla*/
opacity: 0.7; /*FF*/ /*
圆角效果,不考虑低版本IE
http://blog.imbolo.com/creating-rounded-corners-with-css/
*/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#footer
{
margin: 0 auto;
width: 960px;
height: 100px; /*渐变效果
http://www.zhangxinxu.com/wordpress/?p=743
*/
filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); /*IE8*/
background-color: Gray; /* 一些不支持背景渐变的浏览器 */
background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background: -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
</style>
<!--[if IE]>
<style type="text/css">
#main
{
height: 500px;
}
body
{
text-align:center;
}
#inner-header
{
text-align:left;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="inner-header">
<h1>
CSS Demo</h1>
</div>
</div>
<div id="main">
</div>
<div id="footer">
</div>
</body>
</html>
转自:http://www.cnblogs.com/onlytiancai/archive/2011/04/23/2025728.html
分享到:
相关推荐
在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`<div>`元素是一...
在网页设计中,"DIV+CSS上下左右绝对居中"是一个常见的布局需求,尤其是在构建响应式网站时。这个主题涉及到CSS(层叠样式表)的布局技巧,它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
CSS3的`linear-gradient`函数允许我们创建线性渐变背景。例如,从左至右的红色到蓝色渐变: ```css .gradient-div { background: linear-gradient(to right, red, blue); } ``` 对于多行文本的`div`,我们可能...
在“css3半透明遮罩背景lightbox图片展示特效”中,我们主要关注的是如何使用CSS3来创建具有半透明遮罩和动态效果的图片展示组件,通常被称为Lightbox。Lightbox是一种流行的设计模式,当用户点击图片预览链接时,会...
创建圆角窗口时,可能还需要用到其他的CSS3特性,如阴影(`box-shadow`)、渐变(`linear-gradient`或`radial-gradient`)、背景裁剪(`background-clip`)等,以增加视觉效果。 5. **响应式设计**: 在移动优先...
在这个例子中,`<url1>` 和 `<url2>` 分别代表两张背景图片的URL,而 `<linear-gradient>` 和 `<radial-gradient>` 用于创建渐变背景。需要注意的是,多个背景图片按照声明的顺序叠加,最上面的图片位于最底层,而...
在网页设计中,`div` 和 `CSS` 是不可或缺的部分,尤其当涉及到界面美观和用户体验时,圆角设计显得尤为重要。圆角边框不仅能够使网页元素看起来更加柔和,还能提升整体设计的现代感。本篇文章将深入探讨如何使用 `...
使得IE支持CSS3 圆角阴影 渐变
在这个例子中,阴影向右下角偏移了2像素,具有3像素的模糊半径,颜色为半透明的黑色(50%的透明度)。 为了更好地理解并实践这个效果,我们可以创建一个<div>元素,并为其应用上述样式: ```html <!DOCTYPE html> ...
在这个特定的案例"div+css呈现圆角层示例"中,我们将探讨如何利用CSS技术创建具有圆角边框的`div`层,而无需依赖背景图片。这种技术对于提升网页的可读性和美观性至关重要,因为它可以减少HTTP请求,提高页面加载...
我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的...源代码+自己写的教程,希望对初学div+css的朋友有启发。
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
最后,`images`文件夹可能包含了用于装饰或功能的图像资源,例如背景图片或图标。在CSS中,可以使用`background-image`属性将这些图片应用到元素上,以增强视觉效果。 综上所述,创建"css+div漂亮的圆角tab选项卡...
例如,可以为背景添加渐变阴影: ```css body { background-color: #f0f0f0; transition: background-color 0.5s ease; } body.shaded { background-color: rgba(0, 0, 0, 0.5); } ``` 然后,使用jQuery切换类...
在网页设计中,纯div+css实现的图片轮播是一种常见的动态效果,它能为网站增添生动性,吸引用户注意力。下面将详细讲解这个主题,包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...
这个可谓是css的高级写法 兼容IE8/IE9/IE10/IE11 火狐,谷歌,360等各种主流浏览器 相对于body居中的另外一种写法 原理比较难以理解,这里只简单的说下如何使用: 1、在body的根目录下建立两个...
在网页设计中,"div+css 可伸缩的圆角"是一个常见的需求,它涉及到CSS3中的边框半径属性,以及如何构建响应式的布局。让我们深入探讨这个主题。 首先,`div`是HTML中的一种块级元素,通常用于组织页面结构。`div`...
在网页设计中,"DIV始终居中的半透明弹出层"是一种常见的用户界面元素,用于显示重要的信息或者交互,如提示、警告、登录框等。本文将深入探讨如何实现这样的功能,包括HTML结构、CSS样式以及可能涉及的JavaScript...
JavaScript(JS)虽然主要负责动态交互,但在某些情况下,可以用于辅助实现CSS样式,例如封装DIV圆角样式。本文将深入探讨如何使用JS来封装和应用CSS圆角效果,并通过提供的压缩包文件中的示例进行解析。 首先,让...
纯CSS控制DIV背景透明效果,没有什么好解释的,代码全在文件里面,直接预览或者用记事本打开即可。rgba参数(red,green.,blue,alpha),alpha值0-1 ie滤镜参数#3363370b,前两位为16进制透明度, 比如说值是上面用到的...