Web前端开发北京林业大学 CSS布局与定位-单元作业

课程导航

Web前端开发	客观题	编程题
概论	单元测试1
HTML基础	单元测试2	单元作业1
CSS样式	单元测试3	单元作业2
CSS布局与定位	单元测试4	单元作业3
CSS3	单元测试5
JavaScript基础	单元测试6	单元作业4
JQuery & HTML5 & Bootstrap	单元测试7
期末考试	客观选择题	这个还是自己写吧

题目

在这里插入图片描述

将网页文件完成后，将.html文件上传。CSS样式采用内嵌样式完成。

浮动定位实现如下内容（见附件最终效果图）：

有外层容器盒子，居中，宽度为页面的70%宽。（2分）
内层盒子宽度相等，灰色背景。（2分）
2个内层盒子分为2列，两个盒子之间有15px空隙。（2分）
每列均有h2标题和一个段落构成（内容不限）。（4分）

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }

      .outer-box {
        /* flex布局 */
        display: flex;
        flex-flow: row nowrap;
        width: 70%;
        height: 100%;
        margin: 0 auto;
      }

      .inner-box {
        background-color: rgb(240, 240, 240);
        margin: 15px;
      }
    </style>
  </head>

  <body>
    <div class="outer-box">
      <div id="inner-box1" class="inner-box">
        <h2>HTML</h2>
        <p>
          超文本标记语言(Hyper Text Markup
          Language)，标准通用标记语言的下一个应用。HTML不是一种编程语言，而是一种标记语言(markup
          language)，是网页制作所必备的 “超文本” 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括
          “头” 部分（英语：Head）、和 “主体” 部分（英语：Body）。其中 “头” 部提供关于网页的信息， “主体”
          部分提供网页的具体内容。
        </p>
      </div>
      <div id="inner-box2" class="inner-box">
        <h2>CSS</h2>
        <p>
          层叠样式表(英文全称：Cascading Style
          Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）
          等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，
          支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
        </p>
      </div>
    </div>
  </body>

</html>

真实的hello world

原创文章 63 获赞 23 访问量 2万+

关注私信

Web前端开发 北京林业大学 CSS布局与定位-单元作业

题目

猜你喜欢

Web前端开发北京林业大学 CSS布局与定位-单元作业