css中如何让网页全屏显示

html-css014

css中如何让网页全屏显示,第1张

让页面在不同分辨率下都全屏显示，完整代码参考如下：

<!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%才行。