手机
当前位置:查字典教程网 >网页设计 >心得技巧 >html 左中右自适应布局(使用calc css表达式)
html 左中右自适应布局(使用calc css表达式)
摘要:在最新的html标准中有了个calccss表达式,我们可以用这个来计算布局。但是在古老的IE中,却不支持,为了所有浏览器的支持,这里用了js...

在最新的html标准中 有了个calc css表达式,我们可以用这个来计算布局。

但是在古老的IE中,却不支持,为了所有浏览器的支持,这里用了js来做。

截图:

1

code:

<!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 id="left"></div>

<div id="center"></div>

<div id="right"></div>

</body>

</html>

【html 左中右自适应布局(使用calc css表达式)】相关文章:

网站网页100-1%的内容是导航

新手快速学习制作网站ICON的步骤

响应式布局总结(推荐)

网页设计经验谈

div 超出隐藏 文字超出div部分隐藏css代码

网页设计中的文字的大小的搭配的方法 小文字,大体验

设计好用、易用web应用程序的10个技巧

html自适应表格的方法

响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

如何设计制作自适应网页

精品推荐
分类导航