Day07-HTML5 CSS3

已于 2023-12-02 15:35:59 修改
阅读量20 收藏
点赞数
文章标签： html5 css3 前端
于 2023-12-02 14:20:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Spirs/article/details/134751745
版权

一.子元素排序属性order

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 600px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;
        }

        .container .item {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }

        /* order规定子元素 （项目）的排列顺序 */
        /* order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 */
        .container .item:nth-child(3) {
            order: 1;
        }

        .container .item:nth-child(1) {
            order: 0;
        }

        .container .item:nth-child(2) {
            order: 3;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

</body>

</html>

二.子元素平均分配和放大属性flex-grow

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 600px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;
        }

        .container .item {
            /* width: 100px; */
            height: 100px;
            border: 1px solid blue;
            /* 如果每一个项目没有宽度  那么 flex-grow: 1; 就代表平均分配宽度*/
            flex-grow: 1;
        }

        /* flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */

        .container .item:nth-child(3) {
            flex-grow: 2;
        }

        .container .item:nth-child(4) {
            flex-grow: 3;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

</body>

</html>

三.子元素缩小属性flex-shrink

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 600px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;
        }

        .container .item {
            width: 200px;
            height: 100px;
            border: 1px solid blue;
            flex-grow: 1;
        }

        /* flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大，越缩小 */
        .container .item:nth-child(2){
            flex-shrink: 2;
        }
        .container .item:nth-child(3){
            flex-shrink: 5;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

</body>

</html>

四.子元素属性flex-basis

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 600px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;
        }

        .container .item {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            flex-basis: auto;
            flex-grow: 1;
        }

        /* flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间 */
        /* flex-basis 跟width一样 */
        .container .item:nth-child(3) {
            flex-basis: 200px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

</body>

</html>

五.子元素属性flex

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 600px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;
        }

        .container .item {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            /* flex: 1 1 auto*/
            flex: auto;
             /* flex: 0 1 auto*/
            flex: none;
            /* flex:0 1 0% */
            flex: 0;
            /* flex:1 1 0% */
            flex: 1;
        }
        /* flex: 0 1 auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] */
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>

</body>

</html>

六.不一样的对齐方式align-self

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 600px;
            border: 1px solid red;
            /* 把父元素设置为 弹性盒模型 */
            display: flex;

            justify-content: center;
            align-items: center;
        }

        .container .item {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }

        /* align-self: auto | flex-start | flex-end | center | baseline | stretch; */
        /* align-self属性允许单个项目有与其他项目不一样的对齐方式 */
        .container .item:nth-child(1) {
            align-self: flex-start;
            height: 200px;
        }

        .container .item:nth-child(2) {
            align-self: flex-end;
            height: 200px;
        }

        .container .item:nth-child(3) {
            height: 300px;
            align-self: flex-start;
            /* align-self: flex-end;
            align-self: center;
            align-self: baseline;
            align-self: stretch; */
        }

        .container .item:nth-child(4) {
            align-self: flex-end;
            height: 200px;
        }

        .container .item:nth-child(5) {
            align-self: flex-start;
            height: 300px;
        }

        .move {
            font-size: 40px;
            position: absolute;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
    </div>
    <span class="move"> 🐇 🐅 🐀 🐂 🐎 🐉 🐍 🐏 🐒 🐥 🐕 🐖</span>

    <script>

        var _move = document.querySelector(".move");
        // document.onmousemove = function (e) {
        //     var _left = e.clientX - _move.offsetWidth / 2;
        //     var _top = e.clientY - _move.offsetHeight / 2;

        //     _move.style.left = _left + "px";
        //     _move.style.top = _top + "px";
        // }

    </script>

</body>

</html>

前端拓海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4649
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
20day-HTML&CSS-1~24
DaB210的博客
03-31 945
20day-HTML&CSS-1~24
day10-HTML5&CSS3提高
weixin_48697269的博客
04-22 884
目标 能够说出 3~5 个 HTML5 新增布局和表单标签 能够说出 CSS3 的新增特性有哪些 HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 （★★） 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div>
前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天
chengkai730的博客
06-29 1521
Day3 CSS 第1天
100行Html5+CSS3+JS代码实现元旦倒计时界面
热门推荐
知心宝贝的博客
12-29 1万+
一、前言 二、圣诞树 效果展示： 三、步骤 如果之前看过我这篇文章的 1.下载VSCode 下载链接：VSCode 在Hbuilder、idea运行也是可以的，这里推荐使用VSCode 2.配置插件 三个插件对应的功能： 改写标签后自动完善 切换成中文页面 让代码在网页中打开，默认键Alt+B 3.构建三个文件 在桌面新建一个空的文件夹，用VSCode打开 在VSCode新建三个文件 index .html domtree....
day10-HTML5&CSS3提高.pdf
10-11
HTML5与CSS3是现代网页开发的基石，它们带来了许多增强功能和改进，使得网页设计更加丰富和动态。HTML5的新特性主要集中在增强网页的语义化、多媒体支持以及表单元素的扩展。 语义化标签是HTML5的一大亮点，它们...
day5-html-css-js
05-10
在"day5-html-css-js"的学习资源中，你可能会深入学习以下HTML知识点： 1. **HTML5新特性**：HTML5增加了许多新的标签，如`<header>`, `<footer>`, `<article>`, `<section>`等，使页面结构更加清晰，便于SEO和无...
高级软件人才培训专家-day01-HTML-CSS
03-10
高级软件人才培训专家-day01-HTML-CSS
day01-HTML-CSS.md
03-21
day01-HTML-CSS.md
day06-HTML&CSS.zip
03-01
同时，这也会涉及到HTML5的新特性，如语义化标签、音频/视频嵌入、离线存储等，以及CSS3的新功能，如过渡、动画、多列布局等。 总之，HTML和CSS是构建网页不可或缺的工具，掌握它们能让你具备创建动态、交互式网页...
HTML5的离线存储
weixin_46515434的博客
07-19 693
此外，随着Web技术的发展，新的缓存和离线存储技术（如Service Workers和Cache API）正在逐渐取代HTML5的离线缓存功能，因此开发者也可以考虑使用这些新技术来实现离线存储的需求。该文件包含一个或多个CACHE、NETWORK和FALLBACK部分，用于指定需要缓存的文件和资源、哪些文件需要在线访问、以及在无法访问某个资源时应使用的备用资源。在HTML文档的部分，通过添加一个指向缓存清单文件的标签（或使用manifest属性，具体取决于浏览器支持情况），将缓存清单与HTML文件相关联。
HTML5应用的安全防护策略与实践
@云安全小杜
07-17 505
随着HTML5及其相关技术（如CSS3和JavaScript）的普及，Web应用变得越来越强大和复杂，同时也成为黑客攻击的目标。本文将探讨HTML5应用面临的常见安全威胁，以及如何通过最佳实践和代码示例来增强应用的安全性。
CSS3雷达扫描效果
最新发布
u011626414的专栏
07-23 197
这个示例创建了一个非常基础的雷达扫描效果。您可以根据需要调整颜色、大小、旋转速度等属性，以及添加更多的细节和效果。要创建一个CSS3的雷达扫描效果，我们可以使用CSS的动画（元素在2秒内从0度旋转到360度，从而实现连续的扫描效果。属性设置为50%，这会将扫描线的顶部置于雷达圆的中心，而。的圆形div作为雷达的主体，并在其中放置了一个名为。则会将其向上移动自身高度的一半，从而实现垂直居中。的垂直线，这条线将作为雷达的扫描线。，确保旋转的起点在元素的顶部中心。进行旋转，模拟雷达扫描的效果。
CSS3 简介
07-22 526
CSS3，即层叠样式表的第三代，是网页设计和开发中不可或缺的技术之一。它为HTML元素提供了更加丰富和灵活的样式定义，使得网页不仅结构清晰，而且外观精美，用户体验大大提升。CSS3引入了许多新特性，如圆角、阴影、渐变、动画等，这些特性使得网页设计更加生动和互动。
5.CSS学习（浮动）
ShawLee0925的博客
07-23 181
css浮动——float特点
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 927
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 83
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 68
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 734
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
理解CSS布局：浮动、清除浮动及伪元素解析
"day06（CSS04-浮动）v1.0.pdf" 这篇资料主要介绍了CSS布局中的几个核心概念，包括结构伪类选择器、伪元素、标准流、浮动以及清除浮动。以下是这些概念的详细说明： 1. 结构伪类选择器: 结构伪类选择器允许开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值