文章 2024-09-12 来自:开发者社区

【前端web入门第六天】02 flex布局

Flex布局 1.Flex组成 设置方式:给父元素设置display: flex,子元素可以自动挤压或拉伸组成部分: 弹性容器 弹性盒子 主轴:默认在水平方向 侧轴/交叉轴:默认在垂直方向 分析: 自动设置,由代码实现. 2.主轴与侧轴对齐方式 2.1 主轴对齐方式(横轴) 属性名: justify-content 2.2 侧轴对齐方式 (纵轴) 属...

【前端web入门第六天】02 flex布局
文章 2024-09-12 来自:开发者社区

【前端web入门第六天】01 CSS浮动

:star:第六天目标 解决布局问题如多个div标签在同一行的问题简单来说,就是可以两个标签,一个在左边,另一个在右边. 相关知识 标准流 浮动 flex布局:heavy_exclamation_mark: :heavy_exclamation_mark: :heavy_exclamation_mark: 标准流是先导,浮动和flex布局都可以解决问题,但是浮动在目标开发领域较为...

【前端web入门第六天】01 CSS浮动
文章 2024-09-12 来自:开发者社区

【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】

文章目录: 1.清除默认样式 1.1清除内外边距 1.2清除列表圆点(项目符号) 3.外边距问题-合并现象 4.外边距问题–塌陷问题 5.行内元素垂直内外边距 6.圆角与盒子阴影 6.1圆角 6.2 盒子模型-阴影(拓展) 综合案例一 产品卡片综合案例二 新闻列表 1.清除默认样式 在实际设计开发中,要清除默认的样式,默...

【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
文章 2024-09-12 来自:开发者社区

【前端web入门第五天】02 盒子模型基础

文章目录: 1.盒子模型的组成 1.1盒子模型重要组成部分 1.2 盒子模型-边框线 1.3 盒子模型–内边距 1.3.1 盒子模型–内边距-多值写法 1.4 盒子模型–尺寸计算 1.5 盒子模型-版心居中 1.盒子模型的组成 不同组件之间的空白就是盒子模型的功劳作用:布局网页,摆放盒子和内容。 ...

【前端web入门第五天】02 盒子模型基础
文章 2024-09-12 来自:开发者社区

【前端web入门第五天】01 结构伪类选择器与伪元素选择器

文章目录: 1.结构伪类选择器 1.1 nth-child(公式) 2.伪元素选择器 1.结构伪类选择器 作用:根据元素的结构关系查找元素。 一个列表结构使用结构伪类选择器的例子 <style> li:first-child{ background-color: green; } </style> <body> &...

【前端web入门第五天】01 结构伪类选择器与伪元素选择器
文章 2024-09-12 来自:开发者社区

前端web入门第四天】03 显示模式+综合案例热词与banner效果

文章目录: 1. 显示模式 1.1 块级元素,行内元素,行内块元素 1.2 转换显示模式 综合案例 综合案例一 热词 综合案例二 banner效果 1. 显示模式 什么是显示模式标签(元素)的显示方式 标签的作用是什么?布局网页的时候,根据标签的显示模式选择合适的标签摆放内容。 显示模式分为几种,分别是什么?3种,块级元素,...

前端web入门第四天】03 显示模式+综合案例热词与banner效果
文章 2024-09-11 来自:开发者社区

【前端web入门第四天】02 CSS三大特性+背景图

文章目录: 1. CSS三大特性 1.1继承性 1.2 层叠性 1.3 优先级 1.3.1 优先级 1.3.2 优先级-叠加计算规则 2. 背景图 2.1 背景属性 2.2 背景图 2.3 背景图的平铺方式 2.4 背景图位置 2.5 背景图缩放 2.6 背景图...

【前端web入门第四天】02 CSS三大特性+背景图
文章 2024-09-11 来自:开发者社区

【前端web入门第四天】01 复合选择器与伪类选择器

文章目录: 1. 复合选择器 1.1 后代选择器 1.2 子代选择器 1.3 并集选择器 1.4 交集选择器(了解) 2.伪类选择器 2.1 伪类-文本 2.2 伪类-超链接(拓展) 1. 复合选择器 什么叫复合选择器?由两个或多个基础选择器,通过不同的方式组合而成。 复合选择器的作用是什么?更...

【前端web入门第四天】01 复合选择器与伪类选择器
文章 2024-09-11 来自:开发者社区

【前端web入门第三天】02 CSS字体和文本

文章目录: 1.字体 1.1 字体大小 1.2 字体粗细 1.3 字体样式 1.4 行高 1.5 字体族 1.6 font 复合属性 2. 文本 2.1 文本缩进 2.2 文本对齐方式 2.3 文本修饰线 2.4 color文字颜色 1.字体 1.1 字体大小 ...

【前端web入门第三天】02 CSS字体和文本
文章 2024-09-11 来自:开发者社区

【前端web入门第三天】01 css定义和引入方式 四种标签选择器

文章目录: 1.css 定义 2.css引入方式 3.选择器 3.1 标签选择器 3.2 类选择器 3.3 id选择器 3.4 通配符选择器 4. 画盒子 1.css 定义 层叠样式表(Cascading Style Sheets,缩写为CSS),是一种样式表语言,用来描述HTML文档的呈现(美化内容)书写位置:titl...

【前端web入门第三天】01 css定义和引入方式 四种标签选择器

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

产品推荐

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注