技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
三列COL HTML做法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{
color:#fff;
text-align:center;
}
h1{
color:#333;
}
.container{
background:#ccc;
margin:0 auto;
width:800px;
}
.container .centerCol{
background:#C90;
height:200px;
margin:0 200px;
}
.contentWrap{
float:left;
width:100%;
}
.container .leftCol{
background:#000;
height:200px;
float:left;
margin-left:-800px;
width:200px;
}
.container .rightCol{
height:200px;
background:#696;
float:left;
margin-left:-200px;
width:200px;
}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<body style="height:2000px">
<h1>三列COL HTML做法</h1>
<div class="container">
<div class="contentWrap">
<div class="centerCol">
Html center
</div>
</div>
<div class="leftCol">
Html left
</div>
<div class="rightCol">
Html right
</div>
</div>
</body>
</html>