在CSS网页里设成宽度为100%全屏,但网页里的table里宽度又怎么设置了?table宽度不会随着屏幕变化而变化?

html-css027

在CSS网页里设成宽度为100%全屏,但网页里的table里宽度又怎么设置了?table宽度不会随着屏幕变化而变化?,第1张

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:table {width: 70%}。

3、浏览器运行index.html页面,此时无论网页大小如何变化,table总能占用网页70%的宽度,可以实现随着屏幕变化而变化。

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

<!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>

css设置一张图拉伸填满整个窗口,我们可以通过给这个图片设置width,height都给他们100%的高度和宽度,然后在就能看到填满全屏了,举个例子:

<html>

<head>

<style>

.class{

width:100%

//通过class来控制

height:100%

}

</style>

</head>

<body>

<div

id='content'>

<div

class='img'>

<img

src='图片地址'>

</img>

</div>

</body>

</html>