让页面在不同分辨率下都全屏显示,完整代码参考如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>实现两边固定宽度,中间自适应宽度-</title>
<style>
body{ margin:0 padding:10px}
#head{ margin-bottom:10px height:50px background-color:#999999}
#main{}
#left{ width:200px float:leftmargin-right:-200px background-color:#FF9900}
#mid{ width:autobackground:#00FF00margin:0 220pxborder:1px solid #000}
#right{ width:200pxmargin-left:-200px float:right background-color:#CCCC00}
#foot{ margin-top:10px clear:both height:50px background-color:#CCCCCC}
</style>
</head>
<body>
<div id="head">我是头部</div>
<div id="main">
<div id="left">我是左边,宽:200px</div>
<div id="right">我是右边,宽:200px</div>
<div id="mid">我是中间,宽自适应</div>
</div>
<div id="foot">我是底部</div>
</body>
</html>
一、高斯模糊是使用ps等工具实现的,方法如下(以ps为例):
1、在ps中打开背景图;
2、点击菜单栏中的滤镜;
3、点击模糊,再选择高斯模糊,如图;
5、通过调整半径来调整模糊的强度(半径越大越模糊),如图:
二、全屏显示的css代码:
.bg {
background-image:url(scale.jpg)
-moz-background-size: 100% 100%/* Firefox 3.6 */
-o-background-size: 100% 100%/* Opera 9.5 */
-webkit-background-size: 100% 100%/* Safari 3.0 */
background-size: 100% 100%/* Firefox 4.0 and other CSS3-compliant browsers */
-moz-border-image: url(scale.jpg) 0/* Firefox 3.5 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale')/* for <ie9 */
}
全屏主要就是要宽度铺满浏览器窗口,将宽度定义为100%即可。如下这个示例:
<html><head>
<style>
body{width:100%margin:0padding:0}
.header{width:100%height:auto}
.header img{width:100%display:blockborder:0}
</style>
</head>
<body>
<div class="header">
<img src"图片地址">
</div>
</body>
</html>
主要是头部图片所在容器的父级得是body,或者其父级宽度不管多少级,都是100%才行。