在我的元素中,我有一个网页。
对于网络主页,我想将其分为页眉和页脚之间的四个部分。
首页核心代码如下:
<body style="background:url(./image/taiyi.jpg); height:100%; width:100%;">
<div id="header"></div>
<script type="text/javascript">
$(function () {
$("#header").load("header_02.html");
});
</script>
<div class="upleft"></div>
<div class="upright"></div>
<div class="downleft"></div>
<div class="downright"></div>
<!--footer start-->
<div id="footer"></div>
<script>
$(function () {
$("#footer").load("../footer_02.html");
});
</script>
<!--footer end-->
</body>
footer_02.html 的代码如下:
<style>
.footer {
position: fixed;
bottom: 0;
left: 0;
z-index: 9;
font-size: 13px;
}
</style>
<div class="footer w100 ">
<div class="w1100 mc cb">
<p>Cel:0xxx-8xxxx1531 | address:John street poster:518055 E-mail:h@su.xxx.com ©research center</p>
<div class="contact">
<p><a href="../introduction/job.html" target="_blank">employee</a> | <a href="../map.html" target="_blank">contact us</a> | joke me:</p><a href="javascript:void(0);" class="weixin"><span></span></a><a href="../map.html" target="_blank" class="map"></a>
</div>
</div>
</div>
现在,我想定义四个部分:upleft、upright、downleft、downright。它们是 float 的taiyi.jpg,我可以定义大小。但是我不知道如何为它们定义CSS
它们的大小相同。谁能帮我个忙?
最佳答案
你必须添加更多的 CSS 样式,比如你已经完成的页脚
<style>
.upleft, .downleft{
width: 50%;
height: 250px;
float: left;
clear: left;
}
.upright, .downright{
width: 50%;
height: 250px;
float: right;
clear: right;
}
</style>
通过这种方式,您应该将主页划分为 4 个矩形 最好为两个样式类都添加clear 属性。
关于html - Web主页中四个DIV的css如何定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57784476/