标签: 前端

9 篇文章

thumbnail
Tailwind CSS 安装步骤
通过 npm imit 初始依赖,然后使用 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 安装 Tailwind,使用 npm i postcss postcss-cli -g 安装 postcss 命令 通过 npx tailwindcss init -p…
thumbnail
CSS—位置、Flex布局
位置 position CSS position 属性用于指定一个元素在文档中的定位方式。 定位类型 定位元素(positioned element)是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素(换句话说,除 static 以外的任何东西)。 相对定位元素(relatively positi…
thumbnail
JavaScript 进阶
事件 JavaScript 的代码一般通过事件触发。 可以通过 addEventListener 函数为元素绑定事件的触发函数。 常见的触发函数有: 鼠标 click:鼠标左键点击 dblclick:鼠标左键双击 contextmenu:鼠标右键点击 mousedown:鼠标按下,包括左键、滚轮、右键 event.button:0表示左键,1表示中…
thumbnail
JavaScript 基础
JS 的调用方式与执行顺序 使用方式 HTML页面中的任意位置加上 <script type="module"></script> 标签即可。 常见使用方式有以下几种: 直接在 <script type="module"></script> 标签内写 JS 代码。 直接引入文件:<script …
thumbnail
CSS-阴影和浮动
其他样式 圆角边框 在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50% 该属性是一个简写属性,可以跟四个值…
thumbnail
CSS—三大特性、盒子模型
CSS 三大特性 层叠性 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式. 层叠性主要解决样式冲突的问题 层叠性原则: 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式 样式不冲突,不会层叠 div { color: red; font-size: 18px; } div { color: green; }…
thumbnail
CSS-复合选择器、显示模式、背景
Emmet语法 简介 Emmet 语法的前身是 Zen coding,它使用缩写来提高 HTML/CSS 的编写速度。 快速生成HTML结构语法 生成标签:直接输入标签名,按 tab 键即可。比如 div 然后 tab 键, 就可以生成 <div></div>。 如果想要生成多个相同标签 ,加上 * 就可以了。比如 div*…
thumbnail
CSS-字体和文本
本文章基于 BV14J4114768 记录 CSS 选择器 CSS 基础选择器 基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器 标签选择器 标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。 语法:标签选择器 { 属性:属性值; ...} 作用:标签选择器(…
thumbnail
HTML基础
本文章基于 BV14J4114768 记录 基本结构标签 标签名 定义 说明 <html></html> HTML 标签 页面中最大的标签,称为根标签 <head></head> 文档的头部 注意在 head 标签中我们必须要设置的标签是 title <title></title&g…