gpt4 book ai didi

html - Web主页中四个DIV的css如何定义

转载 作者:太空宇宙 更新时间:2023-11-04 05:56:11 24 4
gpt4 key购买 nike

在我的元素中,我有一个网页。

对于网络主页,我想将其分为页眉和页脚之间的四个部分。

首页核心代码如下:

<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&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;address:John street&nbsp;&nbsp;&nbsp;poster:518055&nbsp;&nbsp;&nbsp;E-mail:h@su.xxx.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&copy;research center</p>
<div class="contact">
<p><a href="../introduction/job.html" target="_blank">employee</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="../map.html" target="_blank">contact us</a>&nbsp;&nbsp;|&nbsp;&nbsp;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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com