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

标签 html css

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

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

首页核心代码如下:

<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/

相关文章:

jQuery on() 仅在 $(document).ready 的主体中声明时触发

html - 如何摆脱 GMail HTML 电子邮件中的 "Show trimmed content"?

html - 让侧边栏正常运行?

html - 如果输入接受属性包含 MIME 类型列表,则 W3C 验证错误

html - 高度属性html中的响应表?

html - 同一行上具有不同大小的文本,如何将较小的文本与较大的文本水平居中对齐?

javascript - JQuery Append函数自动关闭Div

java - 如何从 HTML 表单调用 servlet

html - 将页脚保持在底部

javascript - 从 shadowDOM 内部加载链接时不加载外部字体