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

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

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的更方便。

相关文章
|
6天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
11 0
|
10天前
|
前端开发 开发者 容器
【掰开揉碎】详解 CSS3 Grid 布局
【掰开揉碎】详解 CSS3 Grid 布局
|
14天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
19天前
|
前端开发 开发者 容器
彻底学会CSS grid网格布局
【4月更文挑战第1天】 彻底学会CSS grid网格布局
15 0
|
20天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
3天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
7天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
15 1
|
7天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
12天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
21 0
|
15天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
12 0