CSS中常见的两列布局、三列布局、百分比和多行多列布局!

news2024/11/25 15:01:00

 

目录

一、两列布局 

1、前言:

2. 两列布局的常见用法

 两列布局的元素示例:

代码运行后如下:

二、三列布局

1.前言

2. 三列布局的常见用法

三列布局的元素示例:

代码运行后如下:

三、多行多列

1.前言

2,多行多列布局的常见用法

 多行多列布局的元素示例:

四、百分比布局

代码运行后如下: 

五、综合练习

代码运行后如下:


# 实现两列布局有多种方法,这里我会介绍几种常见的技术,包括浮动<Flexbox>和<Grid>布局。#

一、两列布局 

1、前言:

  •  两列布局都有固定的长度,从内容上区分主要内容和侧边栏。页面布局整体上分为上、中、下3个部分,即header区域、container区域和footer区域。
  •  container又包含mainBox(主要内容区域)和sideBox区域(侧边栏)

 

2. 两列布局的常见用法

  •  两列布局的元素示例:

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

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>典型的网页结构示例:带横向导航栏</title>  
    <style>
        nav ul{
            height:30px;  /*给父盒设置高度,避免高度塌陷影响其他兄弟盒*/
            background-color: aquamarine;
        }
        nav ul li{
            margin-right: 20px;
            float:left;
        }
        #contact{
            width: 220px;
            height: 160px;
            background-color: pink;
            border: 2px black solid;
            position: fixed;
            left:1200px;
            top:450px;
        }
        main{
            width: 1604px;
        }
        aside{           
            width: 35%;
            height: 450PX;
            background-color: green;
            float: right;
            
        }
        article{
            /* width:100% */
          width: 65%;
          height: 450px;
          background-color: gray;
          float: left;
          

       }
       footer{
         width: 1600px;
         height: 50px;
         background-color:blue;
         /* float: left; */
         border: 2px black solid;
       }
    </style>
</head>  

<body>  
  
    <header>  
        <h1 align="center">广东云浮中医药职业学院</h1>  
        <p align="center">欢迎来到: <ins>计算机学院</ins></p>  
        <hr> 
        <nav>  
            <ul type="none">  
                <li><a href="#">首页</a></li>  
                <li><a href="#">关于我们</a></li>  
                <li><a href="#">学生风采</a></li>  
                <li><a href="#">联系方式</a></li>  
            </ul>  
        </nav>  
    </header>  
    <hr>  
    <main>  
        <section>  
            <article>  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <br><br><br>
                <img src="./img_src/云中医校徽.jpg" alt="文章配图" width="200" height="200">  
                <p>想了解广东云浮中医药职业学院:<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  
            </article>  

            <aside>  
                <h3>侧边栏</h3>  
                <p>侧边栏内容,如快速链接、广告等。</p>  
                <table border="1">  
                    <tr>  
                        <th>专业</th>  
                        <th>链接</th>  
                    </tr>  
                    <tr>  
                        <td>计算机应用技术</td>  
                        <td><a href="专业A详情页.html">专业A详情</a></td>  
                    </tr>  
                    <tr>  
                        <td>数字媒体技术</td>  
                        <td><a href="专业B详情页.html">专业B详情</a></td>  
                    </tr>  
                </table>  
            </aside>  
        </section>  
    
        <section id="contact">  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section>  
        <div style="clear: both;"></div>
    </main>  
    
    <footer>  
        <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  
    </footer>  
  
</body>  


</html>
  • 代码运行后如下:

 

 

二、三列布局

1.前言

  • 三列布局由3个独立的而成,仅比两列布局多了一项内容,最终是基于两列布局结构演变出来。
  • 页面布局整体上分为上、中、下3个部分,即header区域、container区域和footer区域。
  •  container又包含mainBox(主要内容区域)、SubsideBox(次要内容区)、sideBox区域(侧边栏)

2. 三列布局的常见用法

  • 三列布局的元素示例:

<!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>
        section{
            width: 1600px;
            height: 1000px;
           
 

        }
        #div1{
            width: 15%;
            height: 800px;
            background-color: rgb(224, 169, 41);
            float: left;
        }
        #div2{
            width: 23%;
            height: 800px;
            background-color: rgb(26, 114, 237);
            float: right;
        }
        #div3{
            width: 60%;
            height: 800px;
            background-color:rgb(186, 239, 71);
            margin-left: 16%;
            margin-right: 15%;
            float: none;
        }
    </style>
</head>
<body>
    <section>
        <div id="div1">盒子1</div>
        <div id="div2">盒子2</div>
        <div id="div3">盒子3</div>
       
    </section> 

</body>
</html>
代码运行后如下:

三、多行多列

1.前言

  • 多行多列常见于页面主要内容区域使用,将页面内容分成多行和多列的方式排列。
  • 常用于<float>元素设置,float:left float:right,使元素向左移,向右移。

2,多行多列布局的常见用法

  •  多行多列布局的元素示例:

<!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>
       

        section{
            width: 90%;
            height: 50%;
            border: 4px black solid;
            background-color: gray;
            position: absolute;
        }
        div{
            width: 15%;
            height: 100px;
            background-color: aqua;
            border: 5px solid #000;
            margin-bottom: 5px;
            float: left;
            margin-right: 2%;
            margin-top: 2%;

        }
    </style>
</head>
<body>
    <section class="class_ele"> 

        <div id="div1">盒子1</div>
        <div id="div2">盒子2</div>
        <div id="div3">盒子3</div>
        <div id="div4">盒子4</div>
        <div id="div5">盒子5</div>
        <div id="div1">盒子6</div>
        <div id="div2">盒子7</div>
        <div id="div3">盒子8</div>
        <div id="div4">盒子9</div>
        <div id="div5">盒子10</div>
        
    </section> 
    <!-- <footer>网页页脚</footer> -->

</body>
</html>

代码运行后如下:

四、百分比布局

  • 在自适应网页设计中常见百分比布局,同个页面可以根据屏幕大小,自动调整内容布局。
  • 百分比用法:例如 width:100% 、height : 100
<!DOCTYPE html>  
<html lang="zh">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>网页布局综合练习</title>  
    <style>      
        #div1{
            background-image: url(./top.jpg);
            background-size: 100%;
            height: 150PX;
            
        }
       #img1{
        position: relative;
        top: 20px;
       left: 100px;
       

    }

      #b{
        position: relative;
        left: 350px;
        bottom: 50%;
        
    }
    #img2{
        position: relative;
        
        left: 200px ;
        bottom: 20px;
    }
    </style>
    

</head>  

<body>  
  
   <header>  
      <section class="container1">
        <div id="div1">
        <img  id= "img1" src="./logo.png" alt="" width="650PX" height="150PX">
        <b id="b">计算机学院</b> 
        <img id="img2" src="./logo2.png" alt="">
        </div>
        
     </section>
   </header>  
   <nav> </nav>
   <main>
   <section></section>
   </main>   
   <footer></footer>
</body>  


</html>
代码运行后如下: 

五、综合练习

1、综合练习案例分析

  • 综合练习包含了三列布局,多行多列布局的结合。
<!DOCTYPE html>  
<html lang="zh">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>网页布局综合练习</title>  
    <style>      
        #div1{
            background-image: url(./top.jpg);
            background-size: 100%;
            height: 150PX;
            
        }
       #img1{
        position: relative;
        top: 20px;
       left: 100px;
       

    }

      #b{
        position: relative;
        left: 350px;
        bottom: 50%;
        
    }
    #img2{
        position: relative;
        
        left: 200px ;
        bottom: 20px;
    }
    #div2{
        position: relative;
    }
       
    nav ul{
            height:30px;
            background-color:rgb(21, 67, 21);
        } 
    nav ul li{
        margin-right: 20px;
        float:left;
    }
    .clear_ele a:link{
        color: rgb(189, 232, 232);
    }
    .clear_ele a:visited{
        color: azure;
    }
    #aside-left{
        float: left;
        width: 20%;
        height: 850px;
        background-color: rgb(30, 163, 30);
        
    }   
    #aside-right{
        float: right;
        width: 20%;
        height: 850px;
        background-color:rgb(30, 163, 30) ;
    } 
    article{
        width: 60%;
        height: 850Px;
        background-color: gray;
        float: left;
    }
    .clear_ele img{
       list-style: none;
       width: 20%;
       height: 200px;
       border: 2px solid red;
       margin-right: 2%;
       margin-bottom: 2%;
    }


    .container3{
            width: 220px;
            height: 160px;
            background-color: pink;
            border: 2px black solid;
            position: fixed;
            right:235px;
            bottom: 10%;
        }  
    footer{
         width: 100%;
         height: 50px;
         background-color:rgb(78, 209, 78);
         float: left;
        
    }
    </style>
    

</head>  

<body>  
  
    <header>  
        <section class="container1">
        <div id="div1">
        <img  id= "img1" src="./logo.png" alt="" width="650PX" height="150PX">
        <b id="b">计算机学院</b> 
        <img id="img2" src="./logo2.png" alt="">
        </div>
        
        </section>
    </header>  

    <nav>  
      <ul class="clear_ele">  
          <li><a href="https://gdyfvccm.edu.cn/">学校首页</a></li>  
          <li><a href="#">学院概况</a></li>  
          <li><a href="#">机构设置</a></li>  
          <li><a href="#">院系专业</a></li>  
          <li><a href="#">教学科研</a></li>  
          <li><a href="#">信息公开</a></li>  
          <li><a href="#">招生就业</a></li>
      </ul>  
    </nav> 
 
    <main>  
        <section class="container2 clear_ele">  
            <aside id="aside-left">  
                学院新闻
            </aside>
 
            <aside id="aside-right">  
                友情链接
            </aside> 

            <article>文章  
                <ul class="clear_ele">  
                      <br><br><br><br><br><br><br>
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">

                </ul>
            </article> 
        </section>  
    

        <section class="container3">  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section> 
    </main>  
 
    <footer>  
        <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  
    </footer>  
  
</body>  


</html>
代码运行后如下:

总结:CSS样式的使用可以让代码更加简洁和结构化,使站点的访问和维护更加容易。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2234159.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

jmeter结合ansible分布式压测--1数据准备

一、搭建ansible环境 ansible是基于python开发&#xff0c;通过ssh连接客户机执行任务。ansible可以批量系统配置、批量程序部署、批量运行命令等。 1、安装yum install ansible 2、检查ansible的版本:ansible --version 二、利用ansible在其他机器上准备压测数据 1、本地准…

蓬勃发展:移动开发——关于软件开发你需要知道些什么

一、前言 移动开发一直都是软件开发领域中最有趣的领域之一&#xff0c;这是因为&#xff1a; 1、移动开发为“只有一个人”的开发团队提供了一个非常独特的机会&#xff0c;让他可以在相对较短的时间内建立一个实际的、可用的、有意义的应用程序&#xff1b; 2、移动开发也代…

gitmakegdb

git git reset 命令 | 菜鸟教程 (runoob.com) 像嫁接一样 make Makefile | 爱编程的大丙 (subingwen.cn) # 举例: 有源文件 a.c b.c c.c head.h, 需要生成可执行程序 app ################# 例1 ################# app:a.c b.c c.cgcc a.c b.c c.c -o app################# 例…

网络安全认证的证书有哪些?

在网络安全领域&#xff0c;专业认证不仅是个人技术能力的象征&#xff0c;也是职业发展的重要推动力。随着网络安全威胁的日益严峻&#xff0c;对网络安全专业人才的需求也在不断增长。本文将介绍一些网络安全认证的证书&#xff0c;帮助有志于从事网络安全行业的人士了解并选…

初阶数据结构的各种排序方法——冒泡,直接插入,希尔,快排,选择,归并(C语言)

1.交换排序 交换排序基本思想&#xff1a; 所谓交换&#xff0c;就是根据序列中两个记录键值的⽐较结果来对换这两个记录在序列中的位置 交换排序的特点是&#xff1a;将键值较⼤的记录向序列的尾部移动&#xff0c;键值较⼩的记录向序列的前部移动。 1.1冒泡排序 例子&…

qt QFileInfo详解

1、概述 QFileInfo是Qt框架中用于获取文件信息的工具类。它提供了与操作系统无关的文件属性&#xff0c;如文件的名称、位置&#xff08;路径&#xff09;、访问权限、类型&#xff08;是否为目录或符号链接&#xff09;等。此外&#xff0c;QFileInfo还可以获取文件的大小、创…

Charles抓包_Android

1.下载地址 2.破解方法 3.安卓调试办法 查看官方文档&#xff0c;Android N之后抓包要声明App可用User目录下的CA证书 3.1.在Proxy下进行以下设置&#xff08;路径Proxy->Proxy Settings&#xff09; 3.1.1.不抓包Windows&#xff0c;即不勾选此项&#xff0c;免得打输出不…

软件压力测试有多重要?北京软件测试公司有哪些?

软件压力测试是一种基本的质量保证行为&#xff0c;它是每个重要软件测试工作的一部分。压力测试是给软件不断加压&#xff0c;强制其在极限的情况下运行&#xff0c;观察它可以运行到何种程度&#xff0c;从而发现性能缺陷。 在数字化时代&#xff0c;用户对软件性能的要求越…

【Python】【数据可视化】【商务智能方法与应用】课程 作业一 飞桨AI Studio

作业说明 程序运行和题目图形相同可得90分&#xff0c;图形显示有所变化&#xff0c;美观清晰可适当加分。 import matplotlib.pyplot as plt import numpy as npx np.linspace(0, 1, 100) y1 x**2 y2 x**4plt.figure(figsize(8, 6))# yx^2 plt.plot(x, y1, -., labelyx^2,…

进程的调度(超详细解读)

在特别老的操作系统中&#xff0c;进程的调度是根据FIFO调度算法进行调度&#xff0c;先进先出式的调度&#xff0c;其实就是队列&#xff0c;但是不能很好的体现进程的优先级&#xff0c;在上节讲解的进程优先级&#xff0c;知道nice值范围是[-20&#xff0c;19]&#xff0c;然…

【初阶数据结构篇】链式结构二叉树(续)

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…

【拥抱AI】如何让软件开发在保证数据安全的同时更加智能与高效?

第一、推动软件开发向更加智能化、高效化和创新化方向发展的策略 随着AI技术的不断进步&#xff0c;软件开发正朝着更加智能化、高效化和创新化的方向发展。要实现这一目标&#xff0c;企业需要采取一系列综合性的策略&#xff0c;从技术、管理、文化等多个层面入手。以下是一…

elementUI 点击弹出时间 date-picker

elementUI的日期组件&#xff0c;有完整的UI样式及弹窗&#xff0c;但是我的页面不要它的UI样式&#xff0c;点击的时候却要弹出类似的日期选择器&#xff0c;那怎么办呢&#xff1f; 以下是elementUI自带的UI风格&#xff0c;一定要一个输入框来触发。 这是我的项目中要用到的…

柯桥topik考级韩语培训【韩语干货】表存在的에和에게有什么区别?

相同点 都可以接在体词后&#xff0c;表示存在的地点、场所&#xff0c;以及所有者。 例如&#xff1a; 1&#xff09;여동생이 집에 있어요. 妹妹在家。 2&#xff09; 식당이 도서관 뒤에 있다. 食堂在图书馆后面。 3&#xff09; 언니에게 고급 화장품이 있다. 姐姐有高级…

使用 ABAP GIT 发生 IF_APACK_MANIFEST dump

错误重现 使用经典的 ABAP 系统运行 ZABAPGIT 或者 ZABAPGIT_STANDALONE然后添加在线或者离线项目点击 PullShort dump SYNTAX_ERROR Dump 界面&#xff1a; 解决方案 它发生在 CREATE OBJECT lo_manifest_provider TYPE (ls_manifest_implementation-clsname) 语句中。 该语…

多商户电商平台开发指南:基于直播带货系统源码的搭建方案详解

本篇文章&#xff0c;小编将详细解析如何利用直播带货系统源码&#xff0c;快速搭建一套多商户电商平台的解决方案。 一、直播带货系统在多商户电商平台中的应用价值 在多商户电商平台中&#xff0c;直播带货系统可以帮助商家&#xff1a; 1.增加用户互动 2.提升转化率 3.…

【TextIn:开源免费的AI智能文字识别产品(通用文档智能解析识别、OCR识别、文档格式转换、篡改检测、证件识别等)】

TextIn&#xff1a;开源免费的AI智能文字识别产品&#xff08;通用文档智能解析识别、OCR识别、文档格式转换、篡改检测、证件识别等&#xff09; 产品的官网&#xff1a;TextIn官网 希望感兴趣以及有需求的小伙伴们多多了解&#xff0c;因为这篇文章也是源于管网介绍才产出的…

(C++回溯算法)微信小程序“开局托儿所”游戏

问题描述 给定一个矩阵 A ( a i j ) m n \bm A(a_{ij})_{m\times n} A(aij​)mn​&#xff0c;其中 a i j ∈ { 1 , 2 , ⋯ , 9 } a_{ij}\in\{1,2,\cdots,9\} aij​∈{1,2,⋯,9}&#xff0c;且满足 ∑ i 1 m ∑ j 1 n a i j \sum\limits_{i1}^m\sum\limits_{j1}^na_{ij} i…

Java学习Day57:碧水金睛兽!(Spring Cloud微服务1.0)

1.微服务入门 (1).单体架构与分布式架构 单体架构&#xff1a; 将业务的所有功能集中在一个项目中开发&#xff0c;打成一个包部署优点&#xff1a; 架构简单、部署成本低 &#xff1b; 缺点&#xff1a; 耦合度高项目打包部署到Tomcat&#xff0c;用户直接访问。用户量增加后…

Golang | Leetcode Golang题解之第541题反转字符串II

题目&#xff1a; 题解&#xff1a; func reverseStr(s string, k int) string {t : []byte(s)for i : 0; i < len(s); i 2 * k {sub : t[i:min(ik, len(s))]for j, n : 0, len(sub); j < n/2; j {sub[j], sub[n-1-j] sub[n-1-j], sub[j]}}return string(t) }func min…