昵称ᨐ 2021-06-02 15:16 采纳率: 66.7%
浏览 36

页面布局，网页布局。

网页布局页面要求：页面标题为“主页”，页面分为页面头部信息（coral）、LOGO（brown），页面导航（peachpuff），页面主要内容（yellow），页面版权信息（aquamarine）和广告（cornflowerblue），请根据上图完成页面布局

 

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2021-06-02 15:33
    关注

    这个用div+flex就行看看软大神的博客讲的挺清除的http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html.我写了个模板你改一下类名啥的或者div+float布局

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 100vh;
            /* background: red; */
        }
        .head{
            width: 100%;
            height: 10%;
            background: red;
        }
        .navBox{
          width: 80%;
          height: 20%;
          margin: 0 auto;
          display: flex;
        }
        .navBox>.logo{
            width: 20%;
            height: 100%;
            background: goldenrod;
        }
        .navBox>.nav{
            width: 80%;
            height: 100%;
            background: gold;
        }
        .bodyBox{
            width: 100%;
            height: 70%;
            /* background: gray; */
            display: flex;
        }
        .bodyBox>.left,.right{
            width: 10%;
            height: 100%;
            background: blue;
        }
        .bodyBox>.center{
            width: 80%;
            height: 100%;
            background: greenyellow;
        }
        .bodyBox>.center>.banquan{
             width: 100%;
             height: 10%;
             background: red;
        }
        .bodyBox>.center>.a{
            width: 100%;
             height: 90%;
             background: grey;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="head"></div>
        <div class="navBox">
          <div class="logo"></div>
          <div class="nav"></div>
        </div>
        <div class="bodyBox">
            <div class="left"></div>
            <div class="center">
            <div class="a"></div>
                <div class="banquan">

                </div>
            </div>
            <div class="right"></div>

        </div>
    </div>
</body>
</html>
    评论

报告相同问题？

  • 页面布局设计详解：12种主流网页布局模式
    2025-07-14 16:55
    UI罐头的博客 网页布局设计是影响用户体验与转化率的关键因素。本文系统介绍了12种高效布局方法，包括卡片式、分屏、大标题等，每种布局对应不同场景需求。合理选择布局需考虑内容属性、用户意图及品牌调性，推荐使用即时设计等...
  • HarmonyOS 实战开发——页面布局方式
    2024-08-21 17:37
    「已注销」的博客 一个丰富的页面需要很多组件组成，那么，我们如何才能让这些组件有条不紊地在页面上布局呢？这就需要借助容器组件来实现。容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助开发者...
  • 详解jQuery移动页面开发中的ui-grid网格布局使用
    2020-10-23 05:34
    它的一个核心特性就是对移动页面布局的优化，其中就包括了ui-grid布局。 在ui-grid网格布局中，JqueryMobile框架提供了四种预设的布局类，分别是ui-grid-a、ui-grid-b、ui-grid-c和ui-grid-d，分别对应两列、三列、...
  • 移动页面web布局实践.zip_html5_弹性布局_移动端 web开发_移动端web
    2022-09-24 08:05
    移动端页面开发，web弹性布局实践，很多好的实例可以学习。
  • 简单的JSP页面布局
    2014-12-03 16:37
    "简单的JSP页面布局"是一个关键的话题，因为它涉及到如何有效地组织和展示网页内容，以提供良好的用户体验。 JSP页面布局通常包括头部、主体和底部等部分，每个部分可能包含多个元素，如导航栏、内容区域和页脚。...
  • CSS Flex布局详解及其重要属性应用
    2024-10-09 13:47
    使用场景及目标：适合于需要灵活调整界面布局的设计场景，在实际开发过程中可以帮助快速构建整齐划一又具有良好弹性的页面布局，提升用户体验并提高开发效率。 阅读建议：由于涉及较多CSS的具体操作细节与实践应用...
  • iOS实际开发中使用数据驱动页面布局
    2024-07-24 17:27
    胖虎1的博客 通过对比可以发现，在实际开发过程中，使用数据驱动页面布局的方式更加灵活且更容易扩展。每一个小元素都拥有完整的功能，在添加或删除时，我们只需要对数据略微进行修改，而不需要大幅度修改约束代码或添加大量的...
  • 移动应用开发：创建摄像头监控界面.pptx
    2023-08-06 11:17
    WebView组件功能强大，除了具有一般View的属性和设置外，还可以对url请求、页面加载、渲染、页面交互进行强大的处理，Android 4.4版本之后，直接使用Chrome作为内置网页浏览器。WebView常用的方法包括loadUrl、...
  • Android开发Android Studio六大基本布局详解
    2024-06-17 14:21
    未来无限的博客 本文详解Android Studio六大基本布局。
  • CSS布局方式详解[项目源码]
    2025-11-17 14:05
    响应式布局使得网页能够兼容多种设备，包括移动设备、平板电脑和桌面浏览器，是现代Web设计不可或缺的布局方式。 每种布局方式都有其特定的使用场景和优缺点，开发者需要根据项目需求和设计目标来选择最合适的布局...
  • 没有解决我的问题, 去提问