• HTML5-框架-计算机应用2115-2022年11月17日13:57:13

    目录

    HTML栅格化布局框架 

    2、demo演示

    栅格化理论：

    栅格化系统：

    网页栅格化：

    重点掌握内容：

    练习目标:

    HTML栅格化布局框架 

    1、将整个HTML浏览器的宽度设为单位1，那么为了操作栅格化方便，我们拆分为12等分。

    1/12≈8.33，所以我们根据这个单位创建了一个Base.css文件。其中包含，去掉内外边距，ul默认样式，以及col-1~~~~~col-12的所有划分，同时我们float处理col。

    1. * {
    2.     margin: 0px;
    3.     padding: 0px;
    4.     box-sizing: border-box;
    5. }
    6.  
    7. ul {
    8.     list-style: none;
    9. }
    10.  
    11. .col-1 {
    12.     width: 8.33%;
    13.     float: left;
    14. }
    15.  
    16. .col-2 {
    17.     width: 16.66%;
    18.     float: left;
    19. }
    20.  
    21. .col-3 {
    22.     width: 25%;
    23.     float: left;
    24. }
    25.  
    26. .col-4 {
    27.     width: 33.33%;
    28.     float: left;
    29. }
    30.  
    31. .col-5 {
    32.     width: 41.66%;
    33.     float: left;
    34. }
    35.  
    36. .col-6 {
    37.     width: 50%;
    38.     float: left;
    39. }
    40.  
    41. .col-7 {
    42.     width: 58.33%;
    43.     float: left;
    44. }
    45.  
    46. .col-8 {
    47.     width: 66.66%;
    48.     float: left;
    49. }
    50.  
    51. .col-9 {
    52.     width: 75%;
    53.     float: left;
    54. }
    55.  
    56. .col-10 {
    57.     width: 83.33%;
    58.     float: left;
    59. }
    60.  
    61. .col-11 {
    62.     width: 91.66%;
    63.     float: left;
    64. }
    65.  
    66. .col-12 {
    67.     width: 100%;
    68.     float: left;
    69. }

    2、demo演示

    以上是div拼接的效果图，我们利用搭积木的方式进行了网页的拼接，这个方法很方便，而且由于每个位置都有div容器作为占位，在放大缩小的过程中也有占位的内容让页面的结构更加稳定。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>基础框架BaseCss的使用title>
    9.     <link rel="stylesheet" href="src/base.css">
    10. head>
    11.  
    12. <body>
    13.     
    14.     <div id="top" class="col-12" style="background-color: red;height: 5vh;">
    15.         
    16.         <div class="col-1" style="background-color: #fff;height: 5vh;">div>
    17.         
    18.         <div class="col-2" style="background-color: #000;height: 5vh;color:#fff;;text-align: center;line-height: 5vh;">LOGOdiv>
    19.         
    20.         <div class="col-6" style="background-color: skyblue;height: 5vh;">
    21.             <ul class="top_caidan">
    22.                 <style>
    23.                     .top_caidan {
    24.                         width: 100%;
    25.                     }
    26.                     
    27.                     .top_caidan li {
    28.                         width: 33%;
    29.                         float: left;
    30.                         text-align: center;
    31.                         line-height: 5vh;
    32.                     }
    33.                 style>
    34.                 <li>一生二li>
    35.                 <li>二生三li>
    36.                 <li>三衍万物li>
    37.             ul>
    38.         div>
    39.         
    40.         <div class="col-2" style="background-color: #000;height: 5vh;color:#fff;;text-align: center;line-height: 5vh;">登录|注册div>
    41.         
    42.         <div class="col-1" style="background-color: #fff;height: 5vh;">div>
    43.     div>
    44.     
    45.     <div class="col-12" style="height: 2.5vh;">div>
    46.     
    47.     <div class="col-1" style="height: 5vh;">div>
    48.     <style>
    49.         #lunBo {
    50.             background-image: url("https://img-blog.csdnimg.cn/3f309a96859b4baf9f85565fcb5be307.png");
    51.             background-size: 100% 100%;
    52.         }
    53.     style>
    54.     <div id="lunBo" class="col-10" style="background-color: skyblue;height: 60vh;text-align: center;line-height: 60vh;">
    55.         轮播图
    56.     div>
    57.     <div class="col-1" style="background-color: #fff;height: 5vh;">div>
    58.     
    59.     <div class="col-12" style="height: 2.5vh;">div>
    60.     
    61.     <div id="info" class="col-12" style="height: 30vh;">
    62.         <div class="col-1" style="background-color: #fff;height: 30vh;">div>
    63.         <div class="col-1" style="background-color: #000;height: 30vh;">div>
    64.         <div class="col-8" style="background-color: lightcyan;height: 30vh;">div>
    65.         <div class="col-1" style="background-color: #000;height: 30vh;">div>
    66.         <div class="col-1" style="background-color: #fff;height: 30vh;">div>
    67.     div>
    68. body>
    69.  
    70. html>

    栅格化理论：

    栅格化是将矢量图形格式表示的图像转换成位图以用于显示器或者打印机输出的过程。
    栅（shan）格化，是一个专业术语，栅格即像素，栅格化即将矢量图形转化为位图（栅格图像）。最基础的栅格化算法将多边形表示的三维场景渲染到二维表面。

    栅格化系统：

    栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，已成为今日出版物设计的主流风格之一。

    网页栅格化：

    网页中的栅格系统：是以规则的网格阵列来指导和规范网页中的版面布局，使得网页便于阅读，让网页规范规整；

    重点掌握内容：

    1. 栅格化布局最小单位值。width:8.33%;
    2. 网页的垂直高度百分比设置单位：height:1vh;1vh就代表高度代表的是整个浏览器页面高度的1%。
    3. 子父容器的宽度比例。

    练习目标:

    我们利用栅格化进行网页布局，效率会高出很多，并且所有位置均有容器支撑，结构十分的稳定，为我们后面考试的内容就在这里个基础上进行文字，图片，音频，视频的增添，同时勾勒出一个比较美幻的页面。

  • 相关阅读:
    unity学习笔记-有关打包到安卓开机黑屏时间过长的心得
    有哪些比较流行的 C、C++和Java 的入门级项目？
    【go微服务】gRPC
    C++排序函数sort()和qsort()的参数比较函数的统一记忆方法
    pandas学习（五）merge
    【微服务】CentOS7 虚拟机 安装 Docker
    瑞吉外卖项目（二）
    【算法训练-二叉树 二】【重建二叉树】依据前序与中序遍历序列重建二叉树
    Mock快速入门使用及组件构造首页
    小红书运营怎么做，快速提升品牌印象
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/127902723