做SEO
我们是认真的!

【seo网站优化推广】html 左中右自适应布局(使用calc css表达式)

复制代码


<!DOCTYPE HTML PUBLIC “-//IETF//DTD LEVEL1//EN”>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″>
<meta http-equiv=”description” content=”this is my page”>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<script>
var left,center,right,width;
window.onload=function(){
left=$(‘left’);
center=$(‘center’);
right=$(‘right’);
onresize();
};
window.onresize=function(){
try {
width = document.body.clientWidth;
center.style.width = (width – left.clientWidth – right.clientWidth – 0) + “px”;
}catch(e){
//小于0会报错
}
};
function $(id){
return document.getElementById(id);
}
</script>
<style>
body,html{
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#left,#center,#right{
width:200px;
height:100px;
background-color:rgb(34,124,134);
float:left;
height:100%;
}
#center{
background-color:red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

seo网站优化推广】html 左中右自适应布局(使用calc css表达式)
未经允许不得转载:广州seo小雨 » 【seo网站优化推广】html 左中右自适应布局(使用calc css表达式)