前端web入门的相关内容

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

【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧

1.定位定位作用:灵活的改变盒子在网页中的位置实现:1．定位模式:position2．边偏移∶设置盒子的位置 left right top bottom 1.1相对定位相对于原先位置的定位相对定位position: relative 特点:one:改变位置的参照物是自己原来的位置:two:不脱标,占位:three:标签显示模式特点不变 1.2 绝对定位子集使用绝对...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文章 2024-09-11 来自：开发者社区

【前端web入门第二天】02 表单-input标签-单选框-多选框

表单文章目录: 1.input标签基本使用 1.1 input标签占位文本 1.2 单选框 radio 1.3 多选框 checkbox 作用:收集用户信息。使用场景: 登录页面注册页面搜索区域 1.input标签基本使用 input标签type属性值不同，则功能不同。 <input type="......