HTML与CSS进阶
关注
分享
扫一扫
文章平均质量分 51
HTML与CSS进阶
NGC_2070
纸上得来终觉浅，绝知此事要躬行！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS学习笔记：网络字体、字体图标及精灵图
CSS学习笔记：网络字体、字体图标及精灵图边框形状CSS-Tricks - Tips, Tricks, and Techniques on using Cascading Style Sheets. The Shapes of CSS | CSS-Tricks - CSS-Tricks网络字体设置字体使用步骤：示例：web fonts兼容性写法字体图标示例 方式1：示例 方式2：使用icon font 自带的css文件，同时也要将tt...转载 2022-05-03 16:30:59 · 180 阅读 · 0 评论 -
CSS学习笔记：伪类 nth-child() nth-of-type()
CSS学习笔记：伪类 nth-child() nth-of-type()nth-child():nth-last-child():nth-of-type()其他结构伪类否定伪类转载 2022-05-03 11:18:57 · 107 阅读 · 0 评论 -
CSS网格布局笔记[转]
CSS网格布局笔记[转]参考：CSS Grid教程第1集 - 创建网格容器_哔哩哔哩_bilibili https://codepen.io/brandonzhang https://codepen.io/brandonzhang/pen/MWEYrrJ 查看网格布局线条：开发者工具独立窗口：创建网格容器示例1：示例2：fr单位和repeat()函数示例1：示例2示例3：网格单元和网格区域示例1：示例2：示例3...转载 2022-05-02 20:52:01 · 1850 阅读 · 0 评论 -
CSS练习 自定义按钮样式
CSS练习 自定义按钮样式<button className='add-usr-btn'> <i class="add-usr-icon"></i> <span class="add-usr-text">添加新用户</span></button>less样式文件：.top-btn { background-color: #388dff; color: #fff; border: 0px;.原创 2022-03-27 17:40:25 · 632 阅读 · 0 评论 -
less参考文档
less参考文档Less 快速入门 | Less.js 中文文档 - Less 中文网转载 2022-03-25 21:39:53 · 338 阅读 · 0 评论 -
CSS 参考文章
CSS 参考文章《CSS3中伪元素::before和::after的经典用法》《css选择器[class^=“icon-“]、[class$=“icon-“]、[class*=“icon-“]》《:first-child和:first-of-type的区别（:first-child选择无效）》《CSS选取第几个标签元素：nth-child、first-child、last-child》...转载 2022-03-08 16:59:55 · 83 阅读 · 0 评论 -
CSS grid网格布局学习笔记
CSS grid网格布局学习笔记前端基础知识（grid布局）grid容器grid子项定义网格及fr单位示例：参考代码：示例2：代码：示例3：参考代码（fr 比例值）：示例4：参考代码：合并网格及网格命名参考代码：.main{ width:300px; height:300px; background:skyblue; display: grid; grid-templat转载 2022-02-27 20:11:41 · 428 阅读 · 0 评论 -
CSS Flex布局示例
CSS Flex布局示例flex布局基本知识参考：CSS 布局专题2--flex布局 [转]_baidu_41388533的博客-优快云博客主轴与交叉轴Flex容器与Flex子项示例实现：.main{ height:200px; background: skyblue; display: flex; align-items: center;}.main div{ width:50px; height:100px; ..转载 2022-02-27 13:55:08 · 494 阅读 · 0 评论 -
CSS 布局尺寸与位置笔记
CSS 布局尺寸与位置笔记绝对长度单位相对长度单位 相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以 本或其他元素的大小与页面上的其他内容相对应。以下列出了常见相对单位。 PhotoShop 信息面板 （在菜单栏窗口中打开）点击面板选项，单位调成像素注：Ctrl 加 选择工具 测量间距 生成切图：imgcook官网链接：https://imgcook.com/box-sizing属转载 2022-02-26 16:17:52 · 112 阅读 · 0 评论 -
CSS 布局专题2--flex布局 [转]
CSS 布局专题2--flex布局 [转]参考：最新最详细flex布局-彻底掌握_哔哩哔哩_bilibili目录CSS 布局专题2--flex布局 [转]flex布局重要概念flex-container属性flex布局模型flex相关属性flex-directionjustify-contentalign-itemsflex-wrapflex-flowallign-content(多行)flex-items属性order...转载 2021-12-04 19:15:11 · 176 阅读 · 0 评论 -
CSS 布局专题1--浮动与定位 [转]
标准流浮动示例示例2为什么用浮动浮动特性特性：行显示具有行内块特性和标准流父级搭配使用示例...转载 2021-12-04 16:15:39 · 158 阅读 · 0 评论 -
CSS 学习参考文章
CSS 学习参考文章CSS框架 https://www.ruanyifeng.com/blog/2017/10/bulma.html CSS变量 https://www.ruanyifeng.com/blog/2017/05/css-variables.html CSS3常用功能的写法 https://www.ruanyifeng.com/blog/2010/03/cross-browser_css3_features.html CSS使用技巧 https://www转载 2021-10-13 18:02:54 · 99 阅读 · 0 评论 -
Html 视频分屏显示[转]
Html 视频分屏显示[转]参考：传统安防监控直播的四分屏的前端展示代码 - Marvin1311 - 博客园<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid转载 2021-10-13 17:57:20 · 937 阅读 · 0 评论 -
CSS选择器学习笔记
CSS选择器学习笔记目录CSS选择器学习笔记CSS选择器上通用选择器类型选择器类选择器id选择器属性选择器分组选择器包含选择器子元素选择器伪元素选择器:first-line伪元素选择器:first-letter伪元素选择器 :before和:after选择器CSS选择器下根元素选择器(:root)使用子元素选择器(:xx-child)索引选择器（nth-child）启用(禁用)某个元素:enabled、disa...转载 2021-09-25 19:54:31 · 252 阅读 · 0 评论 -
Atom 使用、常用插件 及三种样式
Atom 使用、常用插件 及三种样式创建文件夹右键（快捷键a）创建文件，输入 “html”回车《Atom 编辑器实现HTML实时预览》点击File->settings–>install-> 搜索 atom-html-preview ->下载 以及插件Emmet（例如输入 ！ 按TAB） 然后HTML文件右击即可 预览HTML三种样式内联样式： <h1 style = "color:red;font-size:16px;">测试...原创 2021-09-25 17:02:16 · 329 阅读 · 0 评论 -
Atom 下载与安装
Atom下载：地址：https://github.com/atom或者：https://github.com/atom/atom/releases/tag/v1.58.0原创 2021-09-01 22:49:49 · 1216 阅读 · 0 评论 -
CSS登入界面 [转]
CSS登入界面[转]参考视频：https://www.bilibili.com/video/BV1Mp4y1h7Ca?t=172源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport转载 2021-04-05 19:22:29 · 454 阅读 · 0 评论 -
（CSS学习记录）：CSS3之3D 转换
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录3D 转换认识 3D 转换3D 转换透视 perspectivetranslateZ3D 旋转rotateX3D呈现 transfrom-style3D 转换认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴：水平向右 -- 注意：x .原创 2020-09-27 16:57:21 · 250 阅读 · 0 评论 -
（CSS学习记录）：CSS3之动画
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录动画动画序列动画的基本使用用keyframes 定义动画（类似定义类选择器）元素使用动画动画常用属性动画简写属性速度曲线细节动画动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。动画序列动画是.原创 2020-09-27 16:31:03 · 239 阅读 · 0 评论 -
（CSS学习记录）：CSS3之2D 转换
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录2D 转换2D 转换之移动 translate总结2D 转换之旋转 rotate设置旋转中心2D 转换之缩放scale2D转换综合写法顺序2D 转换转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素： 缩放：scale 移动：translate 旋转：r.原创 2020-09-27 16:10:30 · 273 阅读 · 0 评论 -
（CSS学习记录）：CSS3
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录CSS3CSS3现状CSS3 选择器结构伪类选择器nth-child 详解nth-child 和 nt-of-type 的区别结构伪类选择器小结伪元素选择器CSS3CSS3现状浏览器支持程度差，需要添加私有前缀 移动端支持优于PC端 不断改进中 应用相对广泛CSS3 .原创 2020-09-27 15:43:11 · 373 阅读 · 0 评论 -
（CSS学习记录）：HTML5
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26HTML5概念介绍万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。 用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5。XHTML 可扩展超文本标记语言，XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求 HTM...原创 2020-09-27 15:21:18 · 160 阅读 · 0 评论 -
（CSS学习记录）：VS Code安装及插件安装
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录VS Code 软件VS Code 简介VS Code 安装VS Code使用文件目录管理颜色主题常用快捷键操作VS Code 插件安装安装方法安装方法推荐安装的插件VS Code 软件VS Code 简介Visual Studio Code (简称 VS Code .原创 2020-09-27 14:44:15 · 548 阅读 · 0 评论 -
（CSS学习记录）：CSS高级技巧
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录CSS高级技巧元素的显示与隐藏display 显示（重点）visibility 可见性 (了解)overflow 溢出(重点)显示与隐藏总结CSS用户界面样式鼠标样式cursor轮廓线 outline防止拖拽文本域resize用户界面样式总结vertical-align 垂直对齐.原创 2020-09-27 14:26:47 · 1681 阅读 · 0 评论 -
（CSS学习记录）：定位(position)
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录定位(position)CSS 布局的三种机制为什么使用定位定位详解边偏移定位模式 (position)定位(position)的案例定位(position)的扩展绝对定位的盒子居中盒子居中定位示意图堆叠顺序（z-index）定位改变display属性综合演练 - 淘宝轮播图.原创 2020-09-27 13:14:37 · 388 阅读 · 0 评论 -
（CSS学习记录）：浮动(float)
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26浮动(float)CSS 布局的三种机制网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、t..原创 2020-09-27 10:54:30 · 453 阅读 · 0 评论 -
（CSS学习记录）：盒子模型 - 下篇（CSS重点）
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录外边距（margin）外边距设置：块级盒子水平居中文字居中和盒子居中区别插入图片和背景图片区别清除元素的默认内外边距(重要)外边距合并盒子模型布局稳定性综合案例去掉列表默认的样式圆角边框(CSS3)盒子阴影(CSS3)CSS书写规范空格规范选择器规范属性规范.原创 2020-09-23 21:28:00 · 325 阅读 · 0 评论 -
（CSS学习记录）：盒子模型 - 上篇（CSS重点）
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录盒子模型（CSS重点）盒子模型（Box Model）盒子边框（border）边框综合设置盒子边框写法总结表表格的细线边框内边距（padding）内边距：设置案例： 新浪导航内盒尺寸计算（元素实际大小）内边距产生的问题padding不影响盒子大小情况总结盒子模型（CS.原创 2020-09-23 18:29:27 · 291 阅读 · 0 评论 -
（CSS学习记录）：CSS 三大特性
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录CSS 三大特性CSS层叠性CSS继承性CSS优先级（重点）权重计算公式权重叠加继承的权重是0三大特性总结CSS 三大特性CSS层叠性概念： 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时.原创 2020-09-22 18:22:35 · 309 阅读 · 0 评论 -
（CSS学习记录）：CSS 背景(background)
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26行高那些事（line-height）行高测量行高的测量方法：单行文本垂直居中行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐 文字的行高等于盒子的高度 行高 = 上距离 + 内容高度 + 下距离上距离和下距离总是相等的，因此文字看上去是垂直居中的。 行高和高度的三种关系...原创 2020-09-22 16:09:52 · 427 阅读 · 0 评论 -
（CSS学习记录）：标签显示模式（display）重点
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录标签显示模式（display）重点什么是标签显示模式块级元素(block-level)行内元素(inline-level)行内块元素（inline-block）三种模式总结区别标签显示模式转换 display标签显示模式（display）重点什么是标签显示模式什么是标签的显示模式？.原创 2020-09-21 23:53:06 · 1389 阅读 · 0 评论 -
（CSS学习记录）：CSS复合选择器
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录CSS复合（组合）选择器为什么要学习css复合选择器后代选择器（重点）子元素选择器交集选择器并集选择器（重点）链接伪类选择器（重点）复合选择器总结CSS复合（组合）选择器为什么要学习css复合选择器CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发.原创 2020-09-21 20:12:17 · 317 阅读 · 0 评论 -
（CSS学习记录）：开发者工具（chrome）、sublime快捷操作emmet语法
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26开发者工具（chrome）此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是： “按F12”或者是 “shift+ctrl+i” 打开 开发者工具。 菜单： 右击网页空白出---检查 通过开发人员工具小指针工具，查找页面元素 左侧是html页面结构，右侧是css样式技巧：ctrl+滚轮..原创 2020-09-19 21:10:37 · 1057 阅读 · 0 评论 -
（CSS学习记录）：CSS文字文本样式
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录CSS文字文本样式font字体font-size:大小font-family:字体font-weight:字体粗细font-style:字体风格font:综合设置字体样式 (重点)font总结CSS外观属性color:文本颜色text-align:文本水平对齐方式line-hei.原创 2020-09-19 20:32:25 · 372 阅读 · 0 评论 -
（CSS学习记录）：CSS选择器
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录CSS选择器（重点）CSS选择器作用（重点）选择器的作用CSS基础选择器标签选择器类选择器类选择器特殊用法- 多类名id选择器通配符选择器基础选择器总结CSS选择器（重点）CSS选择器作用（重点）选择器的作用找到特定的HTML页面元素 CSS选择器干啥的？ 选择标签.原创 2020-09-19 18:35:46 · 446 阅读 · 0 评论 -
（CSS学习记录）：CSS层叠样式表初识
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录CSS层叠样式表HTML的局限性CSS 网页的美容师CSS初识引入CSS样式表（书写位置）行内式（内联样式）内部样式表（内嵌样式表）综合案例外部样式表（外链式）三种样式表总结（位置）代码风格代码大小写总结CSS样式规则CSS层叠样式表HTML的局限性.原创 2020-09-19 17:49:23 · 251 阅读 · 0 评论 -
（HTML学习记录）：参考网址（待续）
文档参考网址（待续）W3C : http://www.w3school.com.cn/ MDN: https://developer.mozilla.org/zh-CN/原创 2020-09-19 15:54:04 · 291 阅读 · 0 评论 -
（HTML学习记录）：表单标签
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26表单标签(掌握)在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单控件 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信息 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。 表单域 ..原创 2020-09-19 15:49:51 · 350 阅读 · 0 评论 -
（HTML学习记录）：列表标签
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录列表标签（重点）无序列表 ul （重点）有序列表 ol （了解）自定义列表（理解）列表总结列表标签（重点）概念： 容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表 特点： 列表最大的特点就是 整齐 、整洁、 有序，跟表格类似，但是他可组合自由度会更高。 无序列表 u.原创 2020-09-19 14:57:45 · 183 阅读 · 0 评论 -
（HTML学习记录）：表格（table）
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26目录表格 table(会使用)创建表格表格属性表头单元格标签th表格标题caption合并单元格(难点)合并单元格2种方式合并单元格顺序合并单元格三步曲总结表格表格划分结构（了解）表格知识点概览图表格 table(会使用)表格作用： 存在即是合理的。 表格的现在..原创 2020-09-19 14:27:41 · 534 阅读 · 0 评论