web开发 HTML5+CSS3 1 不同的布局

最新推荐文章于 2024-07-10 16:15:48 发布
最新推荐文章于 2024-07-10 16:15:48 发布
阅读量137 收藏
点赞数
分类专栏： web 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sermisry/article/details/119772178
版权

文章目录

居中演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中演示</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            border-radius: 20px;
            color: white;
            background-color: #cb4042;
            text-align: center;
            margin: auto;
            /*四个0撑满浏览器窗口，又因为都说auto所以自动划分*/
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        span {
            font-size: 20px;
            line-height: 200px;
        }
        .container {
            width: 500px;
            height: 500px;
            position: relative;
            background-color: #40cbc9;
        }
    </style>
</head>
<body>
    <div class="container"><div><span>中</span></div></div>
</body>
</html>

单列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单列布局</title>
    <style type="text/css">
        header,main,footer {
            max-width: 1024px;
            margin: 0 auto;
            text-align: center;
        }
        header {
            background-color: lightblue;
            height: 50px;
            line-height: 50px;
        }
        main {
            background-color: pink;
            height: 200px;
            line-height: 200px;
        }
        footer {
            background-color: lightblue;
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <main>内容</main>
    <footer>尾部</footer>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style type="text/css">
        header {
            width: 100%;
            height: 30px;
            background-color: red;
        }
        main{
            overflow: hidden;
        }
        .container {
            width: 100%;
            float: left;
        }
        .center {
            height: 500px;
            margin: 0 200px;
            background-color: cornsilk;
        }
        .left {
            height: 500px;
            float: left;
            width: 200px;
            background: pink;
            margin-left: -100%;
        }
        .right {
            height: 500px;
            float: left;
            width: 200px;
            background: aqua;
            margin-left: -200px;
        }
        footer {
            height: 30px;
            width: 100%;
            background-color: red;
        }

    </style>
</head>
<body>
    <header></header>
    <main>
        <div class="container">
            <div class="center"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </main>
    <footer></footer>
</body>
</html>

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 600px;
        }
        main {
            padding: 0 200px;
        }
        .column {
            float: left;
        }
        #center {
            width: 100%;
            height: 500px;
            background-color: cornsilk;
        }
        #left {
            width: 200px;
            height: 500px;
            margin-left: -100%;
            position: relative;
            right: 200px;
            background-color: pink;
        }
        #right {
            width: 200px;
            height: 500px;
            margin-right: -200px;
            background-color: lightblue;
        }
        header {
            height: 30px;
            background-color: red;
        }
        footer {
            height: 30px;
            background-color: red;
            clear: both;
        }

    </style>
</head>
<body>
    <header></header>
    <main>
        <div id="center" class="column"></div>
        <div id="left" class="column"></div>
        <div id="right" class="column"></div>
    </main>
    <footer></footer>
</body>
</html>

瀑布流布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <Style type="text/css">
        body {
            background-color: lightblue;
            margin: 10px;
        }

        #page {
            margin: 0 auto;
            max-width: 888px;
            column-count: 3;
            column-gap: 13px;
            column-fill: auto;
        }

        .text {
            background-color: aqua;
            font-size: 15px;
            font-family: Arial, Helvetica, sans-serif;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 0 5px pink;
        }
    </Style>
</head>
<body>
    <div id="page">
        <div class="text">
            <p>1Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minusneque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
        <div class="text"> 
            <p>2Lorem ipsum dolor sit amet conseLorem ipsum dolor sit amet. Eum dolor eligendi atque, expedita voluptatem odio ex minusneque explicabo excepturi maxime animi nulla sit totamt quibusdam autem!ctetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
        <div class="text">
            <p>3Lorem ipsum dolor Eum dolor eligendi atque, expedita voluptatem odio ex minus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
        <div class="text">
            <p>4Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
        <div class="text">
            <p>5Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minusneque explicabo excepturi maxime animi Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minusneque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem! nulla sit totam molestias placeat repellat</p>
        </div>
        <div class="text">
            <p>6Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minusneque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem! consectetur adipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio ex minus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
        <div class="text">
            <p>6Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolor eligendi atque,expedita voluptatem odio ex minusneque explicabo excepturi maxime animi nulla sit totam molestias placeatrepellat quibusdam autem! consectetur ipisicing elit. Eum dolor eligendi atque, expedita voluptatem odio exminus neque explicabo excepturi maxime animi nulla sit totam molestias placeat repellat quibusdam autem!</p>
        </div>
    </div>
</body>
</html>

弹性盒布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒布局</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            background-color: pink;
        }
        .inline-flex-container {
            display: inline-flex;
            flex-wrap: wrap-reverse;
            flex-direction: column-reverse;
            background-color: pink;
        }
        .flex-container > div, .inline-flex-container > div {
            margin: 50px;
            padding: 20px;
            color: white;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
    <br>
    <div class="inline-flex-container">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
</body>
</html>

主轴和垂轴

column和row请添加图片描述

请添加图片描述

主轴上的对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主轴上的对齐方式</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            justify-content: center;
            flex-direction: column;
            height: 800px;
            background-color: pink;
        }
        .flex-container > div {
            margin: 20px;
            padding: 20px;
            color: white;
            background-color: lightblue;
        }
        /*把one和six交换位置 安排弹性元素的显示顺序*/
        .flex-container > div:nth-of-type(1){
            order: 1;
        }
        .flex-container > div:nth-of-type(5){
            order: -1;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
        <div>five</div>
        <div>six</div>
    </div>
</body>
</html>

垂轴上的对齐

  • align-items在外面设置，align-self在单个元素设置，
  • align-content在wrap的情况下才可以把内容在垂轴上对齐
  • align-items以弹性元素里面的内容为单位，align-content以一整行弹性元素为单位进行对齐
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂轴上的对齐</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            height: 888px;
            flex-wrap: wrap;
            align-items: flex-start;
            align-content: space-between;
            background-color: pink;
        }
        .flex-container > div {
            margin: 20px;
            padding: 20px;
            color: white;
            background-color: lightblue;
        }
        .special {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>one</div>
        <div style="font-size: 2em;">two<br>two</div>
        <div class="special">three<br>three<br>three</div>
        <div>four<br>four<br>four<br></div>
        <div>five<br>five<br>five<br>five<br>five</div>
    </div>
</body>
</html>

压缩和放大弹性元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>压缩弹性元素</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            width: 1024px;
            background-color: pink;
        }

        .flex-container > div {
            width: 250px;
            margin: 20px;
            padding: 20px;
            color: white;
            text-align: center;
            background-color: lightblue;
        }
        /*当给定的宽度不足以容纳所有的元素时，弹性元素就会压缩，flex-shrink属性可以设置压缩等级*/
        .shrink2 {
            flex-shrink: 2;
        }
        .shrink4 {
            flex-shrink: 4;
            /*当压缩太严重时，最小限额20+20px的内外边距还是要保持的，所以就不能压缩了*/
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>one</div>
        <div>two</div>
        <div class="shrink2">three</div>
        <div class="shrink4"></div>
        <div>five</div>
    </div>
</body>
</html>

同理，放大弹性元素使用flex-grow

设置弹性基准

  • flex-basis设置的是元素在主轴上占的初始长度
  • 而且如果有width或者height，那么flex-basis会将其覆盖
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>设置弹性基准</title>
    <style type="text/css">
        .flex-container {
            display: flex;
            width: 1024px;
            background-color: pink;
            flex-direction: column;
        }

        .flex-container>div {
            width: 80px;
            margin: 20px;
            padding: 20px;
            color: white;
            text-align: center;
            background-color: lightblue;
        }

        .basis3 {
            flex-basis: 300px;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div>one</div>
        <div>two</div>
        <div class="basis3">three</div>
        <div>four</div>
        <div>five</div>
    </div>
</body>
</html>

小结：

  • 两个弹性元素的边距不会发生塌陷或者折叠
  • 弹性元素是不能设置浮动的，想要让它浮动，脱离弹性必须使用position: absolute实现
  • flex是flex-grow/flex-shrink/flex-basis的简写
  • flex: auto相当于1 1 auto
  • flex:none相当于0 0 auto
Sermiscry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+css3页面布局特效特效代码
03-20
总之，HTML5+CSS3的页面布局特效展示了现代网页开发的创新与灵活性，通过合理利用这些技术，开发者可以创造出既美观又功能丰富的网页界面。学习并掌握这些知识，对于提升网页设计和开发能力至关重要。
《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）》-教学PPT.rar
06-22
本教程《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）》专注于这一领域，结合了最新的HTML5和CSS3技术，并引入了流行的Bootstrap框架，以帮助学习者快速掌握响应式设计的核心技能。 HTML5是超文本标记语言的第五...
Web前端开发--第九章：HTML5+CSS3布局网页
专科三年的修炼的博客
11-12 515
第九章：HTML5+CSS3布局网页 一.预习笔记 1.元素浮动：float:left|right|none 2.清除元素浮动：clear:left|right|both(clear只能清楚元素左右两侧的浮动) 3.元素的定位：position:static|relative|absolute|fixed 4.z-index：元素层叠属性 5.overflow:visible|hidden|auto|scroll 6.HTML5+CSS3布局 二.课堂笔记 三.课后回顾 –仰望星空,脚踏实地;以梦为马,不
HTML5 + CSS3
坏蛋阿土的博客
10-29 8478
HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言。 HTML不是一种编程语言，而是一种标记语言(markup language)。 标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义∶ 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。浏
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初体验 项目1-1 三栏布局页面
m0_73657966的博客
01-13 1074
在编码时按照项目分析中的需求，先编写HTML5文件中的整体结构，主要包括< header > 、< footer >、< div >、< aside >和< section >标签，然后使用CSS定位实现三栏布局结构。除了头部区域、底部区域外，中间的区域（主体区域）划分成了三个栏目，分别是左侧边栏、内容区域和右侧边栏，这三个栏目就构成了三栏布局。当浏览器的宽度发声变化时，页面中左侧边栏和右侧边栏的宽度固定不变，而内容区域的宽度会随着浏览器窗口宽度大小的变化而变化。三栏布局是一种常用的网页布局结构。
HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
weixin_47781785的博客
06-14 8万+
web前端开发技术期末大作业 网页规划与制造，做得不深 但是还是满足期末大作业的 分享一下 题目： 此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术（如结合使用CSS及表格、DIV、框架等技术），完成各页面的布局设计。 工具： EditPlus 一、网页效果（模仿游戏官网） A.首页效果 B.游戏攻略 C.手办商城 上面就是网站的部分效果，其他就不贴出来了哈哈哈，仅作分享 二、主要代码 首页HTML <!DOCTY
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7281
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
【前端基础篇】HTML5 + CSS3 入门知识
前端知识分享喵
06-09 1890
，HTML5和CSS3核心知识
HTML5+css3课后习题【一】
缘友一世的博客
11-04 8703
因为静态网页的访问速度快，所以现在互联网上的所有网站都是静态网页组成的。（✖️）大多数网页是动静混合模式。“HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。（✔️ ）在Web标准中，表现是指网页展示给访问者的外在样式。（ ✔️）在网页中，层叠样式表指的是JavaScript。（✖️ ）CSS所有的浏览器对同一个CSS样式的解析都相同，因此页面在不同浏览器下的显示效果完全一样。（ ✖️）结果不一样。
新书速览|HTML5+CSS3 Web前端开发与实例教程：微课视频版
quanzhankaifaqua的博客
07-10 993
系统地讲解Web前端开发的核心技术，主要内容包括Web前端开发概述、HTML5基础、HTML5页面元素和属性、表单、CSS3基础、CSS3修饰页面元素、CSS3高级选择器、CSS3盒子模型、浮动与定位、CSS3高级应用、网页布局、Flex布局、Grid布局等，并提供“大学生参军入伍专题网站”和“文创商城”两个实战案例。《HTML5+CSS3 Web前端开发与实例教程：微课视频版》以“从项目中来到项目中去”为主旨，从Web前端开发的基本概念入手，系统介绍HTML5、CSS3网页编程技巧。
Html5 + Css3笔记详细汇总大全
weixin_50637054的博客
04-10 4124
Html5 + Css3笔记详细汇总大全
web前端基础（一）——HTML+CSS
热门推荐
广龙宇的博客
08-18 13万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
《HTML5+CSS3 Web开发》.zip
04-16
这个名为"《HTML5+CSS3 Web开发》.zip"的压缩包包含了一套完整的课程资源，包括教学PPT和配套教材源码，旨在帮助学习者深入理解和掌握这两项关键技术。 HTML5是第五代超文本标记语言，它引入了许多新的元素和属性，...
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）源码.7z
06-10
通过学习和实践这个响应式Web开发项目，新手可以了解如何使用HTML5来构建结构化的网页，使用CSS3来美化和响应化布局，以及如何借助Bootstrap高效地开发跨设备的界面。同时，熟悉这些源码文件的结构和用途也有助于...
HTML5+CSS3 精美登陆界面源码
01-19
在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新特性与CSS3的动画效果，以提供卓越的用户体验。 首先，我们来详细了解一下HTML5。HTML5是超文本标记...
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
07-17
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
torchaudio-0.13.1+cpu-cp39-cp39-win_amd64.whl
最新发布
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
出入库存盘点表-图表分析-分类查询-Excel模板
07-17
【作品名称】：出入库存盘点表-图表分析-分类查询-Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
torchaudio-0.12.1+cpu-cp37-cp37m-win_amd64.whl
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
HTML5+CSS3+JS前端开发学习笔记
"这是一份综合性的Web前端学习资料，涵盖了HTML5、CSS3和JavaScript的基础知识，包括各个部分的详细讲解和实例。" 本文档深入浅出地介绍了Web前端开发的基础，首先从前端基础开始，讲解了开发及调试工具的重要性，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值