H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局

举报
红目香薰 发表于 2023/12/19 13:47:31 2023/12/19
【摘要】 ​  H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局HTML概述HTML，全称超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式，使得浏览器可以正确地解析和显示网页内容。HTML的主要元素包括：元素：包括段落、标题、链接、图像、列表等等。HTML为这些元素提供了特定的标签，如<p>、<...

​

 

 H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局

HTML概述

HTML，全称超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式，使得浏览器可以正确地解析和显示网页内容。

HTML的主要元素包括：

元素：包括段落、标题、链接、图像、列表等等。HTML为这些元素提供了特定的标签，如<p>、<a>、<img>、<ul>、<li>等。
属性：这些是HTML元素中可以包含的额外信息，如链接的href属性，图像的src和alt属性等。
样式CSS：HTML5引入了内联样式（通过HTML元素直接包含的样式）和外部样式表（通过CSS文件定义的样式）两种方式来控制网页的外观和格式。
脚本JavaScript：HTML5支持通过JavaScript嵌入到网页中，使得网页可以具有交互性。
HTML文档的基本结构通常包括一个<!DOCTYPE html>声明，一个<html>元素，以及若干个<head>和<body>元素。其中，<body>元素包含了网页的所有内容，如文本、图片、视频、音频、链接等等。

HTML是一种基础且重要的技术，它为创建网页提供了基础结构和框架，使得我们可以添加样式、脚本和内容。然而，仅仅使用HTML可能无法创建出具有复杂交互性和动态内容的网站，因此通常还需要配合CSS（用于样式设计）和JavaScript（用于添加交互性）的使用。

开发工具：Visual Studio Code

运行插件：Preview on Web Server

正文——百分比布局

css代码需要单独写一个base.css用来给予div的比例。

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
.col-1 {
  width: 8.33%;
  float: left;
}
.col-2 {
  width: 16.67%;
  float: left;
}
.col-3 {
  width: 25%;
  float: left;
}
.col-4 {
  width: 33.33%;
  float: left;
}
.col-5 {
  width: 41.67%;
  float: left;
}
.col-6 {
  width: 50%;
  float: left;
}
.col-7 {
  width: 58.33%;
  float: left;
}
.col-8 {
  width: 66.67%;
  float: left;
}
.col-9 {
  width: 75%;
  float: left;
}
.col-10 {
  width: 83.33%;
  float: left;
}
.col-11 {
  width: 91.67%;
  float: left;
}
.col-12 {
  width: 100%;
  float: left;
}

布局需求

top：头部菜单，gray灰色，宽度100%列宽，高度（5vh）
banner_text：横幅文字，skyblue天蓝色，左右1/12留白，正文10/12列宽，高度(10vh)
banner_img：横幅图片，浅蓝色lightblue，左右1/12留白，正文10/12列宽，高度(50vh)
list_info：信息列表，浅粉色lightpink，左右1/12留白，正文10/12列宽，高度（30vh）
footer：网站备案信息，黑色black，左右1/12留白，正文10/12列宽，高度(5vh)

布局源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>百分比布局</title>
    <link rel="stylesheet" href="css/base.css" />
  </head>
  <body>
    <!--top-->
    <div class="col-12" style="background-color: lightgray; height: 5vh"></div>
    <!-- banner_text -->
    <div class="col-12" style="height: 10vh">
      <div class="col-1" style="background-color: #fff; height: 10vh"></div>
      <div class="col-10" style="background-color: skyblue; height: 10vh"></div>
      <div class="col-1" style="background-color: #fff; height: 10vh"></div>
    </div>
    <!-- banner_img -->
    <div class="col-12" style="height: 50vh">
      <div class="col-1" style="background-color: #fff; height: 50vh"></div>
      <div
        class="col-10"
        style="background-color: lightblue; height: 50vh"
      ></div>
      <div class="col-1" style="background-color: #fff; height: 50vh"></div>
    </div>
    <!-- list_info -->
    <div class="col-12" style="height: 30vh">
      <div class="col-1" style="background-color: #fff; height: 30vh"></div>
      <div
        class="col-10"
        style="background-color: lightpink; height: 30vh"
      ></div>
      <div class="col-1" style="background-color: #fff; height: 30vh"></div>
    </div>
    <!-- footer -->
    <div class="col-12" style="height: 5vh">
      <div class="col-1" style="background-color: #fff; height: 5vh"></div>
      <div class="col-10" style="background-color: #000; height: 5vh"></div>
      <div class="col-1" style="background-color: #fff; height: 5vh"></div>
    </div>
  </body>
</html>

实际布局效果

整个布局内容为body内容的100%，根据提议需求所创建。

添加基础文字

<!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>百分比布局</title>
<link rel="stylesheet" href="css/base.css">
<body>
<!--top-->
<div class="col-12" style="background-color: lightgray;height: 5vh;">
    <style>
        .top_ul{
            width: 100%;
            text-align: center;
        }
        .top_ul li{
            width: 20%;
            float: left;
            line-height: 5vh;
            cursor: pointer;
        }
        .top_ul li:hover{
            background-color: #000;
            color: #fff;
        }
    </style>
    <ul class="top_ul">
        <li>DB开发工具</li>
        <li>Java开发工具</li>
        <li>.Net开发工具</li>
        <li>Python开发工具</li>
        <li>API接口工具</li>
    </ul>
</div>
<!-- banner_text -->
<div class="col-12" style="height: 10vh;">
    <div class="col-1" style="background-color: #fff;height: 10vh;"></div>
    <style>
        .banner_text{
            text-align: center;
            line-height: 10vh;
            font-size: 2rem;
            font-weight: bolder;
        }
    </style>
    <div class="col-10 banner_text" style="background-color: skyblue;height: 10vh;">
        合适的开发工具——项目成功的开始
    </div>
    <div class="col-1" style="background-color: #fff;height: 10vh;"></div>
</div>
<!-- banner_img -->
<div class="col-12" style="height: 50vh;">
    <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
    <style>
        .banner_img{
            text-align: center;
            line-height: 50vh;
            font-size: 3rem;
            font-weight: bolder;
            background-image: url("imgs/bg.png");
            background-size: 100% 100%;
        }
    </style>
    <div class="col-10 banner_img" style="background-color: lightblue;height: 50vh;">
        根据不同项目选择不同的工具
    </div>
    <div class="col-1" style="background-color: #fff;height: 50vh;"></div>
</div>
<!-- list_info -->
<div class="col-12" style="height: 30vh;">
    <div class="col-1" style="background-color: #fff;height: 30vh;"></div>
    <div class="col-10" style="background-color: lightpink;height: 30vh;"></div>
    <div class="col-1" style="background-color: #fff;height: 30vh;"></div>
</div>
<!-- footer -->
<div class="col-12" style="height: 5vh;">
    <div class="col-1" style="background-color: #fff;height: 5vh;"></div>
    <style>
        .footer_text{
            text-align: center;
            color: white;
            line-height: 5vh;
        }
    </style>
    <div class="col-10 footer_text" style="background-color: #000;height: 5vh;">
        某社团某某干事ICP经营许可证: 222 22222222 | ICP备22222222号公网安备000000000号Copyright&copy;0000 2222
    </div>
    <div class="col-1" style="background-color: #fff;height: 5vh;"></div>
</div>
</body>
</html>

基础文字效果

百分比布局总结

百分比布局相当于flax布局，css flex布局，我个人不太喜欢flex布局，因为它的属性并不是很好用，还是自己写的最靠谱，但是如果是bootstrap布局还是可以使用的，用着也挺方便，我们看看flex涉及到的属性：

  1. flex-direction: 这个属性定义了 flex 容器中项目在主轴上的方向。它可以是从左到右（row）或从右到左（column）。
  2. flex-wrap: 这个属性定义了 flex 项目的换行方式。如果 flex-wrap 设置为 nowrap，项目将在一行内排列，直到空间耗尽时才会换行。如果 flex-wrap 设置为 wrap 或 wrap-reverse，项目将在新的一行开始，如果需要的话。
  3. flex-flow: 这个属性是 flex-direction 和 flex-wrap 的简写形式，用于同时设置主轴方向和换行方式。
  4. justify-content: 这个属性定义了 flex 容器中主轴上的项目对齐方式。它可以对齐单个项目或者对齐一行项目。
  5. align-items: 这个属性定义了 flex 项目在交叉轴上的对齐方式。align-items 会考虑项目的长度和容器的空间。
  6. align-content: 这个属性用于在一行多项目的情况下，定义项目在交叉轴上的对齐方式。它通常与 flex-flow 或 align-items 一起使用。这些属性都是 CSS Flexbox 布局模型的一部分，用于控制项目在容器中的排列方式。

有喜欢的可以自行获取，但个人建议使用bootstrap的更方便。

​

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS HTML 容器
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入