div定位

最新推荐文章于 2023-03-11 13:46:13 发布

原创最新推荐文章于 2023-03-11 13:46:13 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#360

本文详细介绍了使用HTML与CSS进行网页布局的方法，包括不同元素的定位方式及样式设置。通过具体样例展示了如何实现左中右三栏布局，并设置了特定背景颜色。

<html>
<head>
<title></title>
<meta name="page-view-size" content="1280*720">
</head>
<style type="text/css">
.left1Style {
position:absolute;width:160;height:180;left:200;top:70;background-color:#CCFFFF;
}
.left2Style {
position:absolute;width:160;height:200;left:360;top:60;background-color:#CCFFFF;
}
.FocusStyle {
position:absolute;width:260;height:220;left:520;top:50;;background-color:#CC99CC;
}
.right1Style {
position:absolute;width:160;height:200;left:780;top:60;background-color:#CCFFFF;
}
.right2Style {

position:absolute;width:160;height:180;left:940;top:70;background-color:#CCFFFF;
}

.prov1{

</style>
<script type="text/javascript">
var weatherURL="http://ivas-wf.wasu.cn:8080/pws-tv/nw/city?provId=0571&cityId=0571";
var cityArrayDiv={};

function int(){
document.getElementById("topCitydDiv1").className="left1Style";
document.getElementById("topCitydDiv2").className="left2Style";
document.getElementById("topCitydDiv3").className="FocusStyle";
document.getElementById("topCitydDiv4").className="right1Style";
document.getElementById("topCitydDiv5").className="right2Style";
}
</script>
<body leftmargin="0" topmargin="0" onload="int()">
<!-市->
<div id="topCitydDiv1" >

</div>
<div id="topCitydDiv2" >

</div>
<div id="topCitydDiv3" class="FocusStyle" >

</div>
<div id="topCitydDiv4" >

</div>
<div id="topCitydDiv5" >

</div>

<!-省->

</body>
</HTML>