![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML+CSS
文章平均质量分 87
黑马前端的学习笔记
凌歆
这个作者很懒,什么都没留下…
展开
-
HTML与CSS学习脑图
HTML与CSS学习脑图原创 2022-02-24 23:10:15 · 86 阅读 · 0 评论 -
HTML与CSS学习第1天
文件路径 绝对路径 相对路径超链接标签 1.语法格式 2.属性 3.类别HTML注释和特殊字符HTML标签结构 兄弟关系 父子关系HTML常用标签 标题标签 段落标签 换行标签 格式化标签 div和span标签 图像标签 h5新增标签 音频标签 视频标签o 水平线标签vscode编辑器 快捷键HTML语法介绍 1.基本语法 2.结构图web标准 1.定义 2.作用 3.构成网页 1.网页介绍 2.HTML本质原创 2022-02-07 11:19:48 · 186 阅读 · 0 评论 -
HTML与CSS学习第2天
表格标签 1.基本语法 2.表头标签 3.属性 4.结构标签 5.合并单元格列表 1.无序列表 2.有序列表 3.自定义列表表单标签 1.表单域 2.表单控件 1.input 2.select 3.textarea 4.label空格字符合并现象 空格,换行解析出一个空格有语义的布局标签 本质是div header nav section aside footer article表单案例原创 2022-02-07 11:32:52 · 151 阅读 · 0 评论 -
HTML与CSS学习第3天
chorm调试工具CSS 层叠样式表选择器 标签选择器 类选择器 id选择器 通配符选择器字体和文本样式 字体 1.font-size 字体大小 2.font-weight 字体粗细 3.字体样式 font-style 4.字体家族 font-family 文本样式 1.文本缩进 text-indent 2.text-align 文本水平对齐方式 3.文本修饰 水平居中方式总结 行高颜色常见取值 1.关键词表示 2.rgb表示 3.rgba原创 2022-02-07 12:24:03 · 91 阅读 · 0 评论 -
HTML与CSS学习第4天
选择器进阶 1.复合选择器 1.后代选择器 2.子代选择器 2.并集选择器 3.交集选择器 4.hover伪类选择器 5.选择器总结emmet语法(vscode)背景相关属性 1.背景颜色 background-color 2.背景图片 background-image:url() 3.背景平铺 background-repeat 4.背景位置 background-position 5.背景属性连写 1,2,3,4 6.img标签与背景图片的区别 7.背景图片大小原创 2022-02-07 12:40:58 · 159 阅读 · 0 评论 -
HTML与CSS学习第5天
pxcook的使用盒子模型 1.盒子模型的介绍 2.盒子模型内容的高度和宽度(width和height) 无自动内减 3.盒子的边框(border) 单方向设置 4.盒子的内边距(padding) 单方向设置 5.盒子的外边距(margin) 单方向设置 6.盒子实际大小的计算 7.不会撑大盒子的特殊情况 8.盒子的自动内减和手动内减 9.清除默认边距 10.外边距折叠和塌陷 11. 行内元素padding和margin无效现象原创 2022-02-07 12:56:12 · 132 阅读 · 0 评论 -
HTML与CSS学习第6天
结构伪类选择器 1.作用 选择父元素中的子元素 2.选择器 1.E:firstchild{} 2.E:lastchild{} 3.E:nth-child(n){} 4.E:nth-last-child(n){} 3.nth-of-type选择器伪元素 1.::after 2.::before标准流 浏览器渲染页面的一套排版规则浮动 1. 作用 1.图文环绕 2.网页布局 2.浮动属性 1.left 2.right 3.浮动的特点 脱标原创 2022-02-08 12:54:18 · 135 阅读 · 0 评论 -
HTML与CSS学习第7天
定位 1.网页常见布局方式 1.标准流 2.浮动 3.定位 2.定位的使用 3.静态定位(static) 4.相对定位(relative) 5.绝对定位(absolute) 6.子绝父相 儿子绝对定位,父亲相对定位 7.固定定位(fixed) 8.定位总结元素层级关系 1.定义 2.修改元素层级装饰 1.垂直对齐方式 1.基线 2.文字对齐方式 3.垂直对齐方式 2.垂直对齐方式应用 1.行内块元素默认基线对齐 2.input与img无法对原创 2022-02-08 13:30:50 · 88 阅读 · 0 评论 -
HTML与CSS学习第8天
精灵图 1.定义 2.使用方法背景图片大小 背景图片连写形式阴影效果 1.文字阴影 2.盒子阴影过渡效果 transition项目部分 1.一些HTML骨架知识 2.SEO 三大标签 3.icon图标设置 4.版心 5.css书写顺序 6.项目结构图原创 2022-02-08 14:03:11 · 269 阅读 · 4 评论 -
HTML与CSS学习第9天
小兔香案例 1.项目布局思路 2.一些技巧 3.命名规范原创 2022-02-24 21:47:46 · 74 阅读 · 0 评论 -
HTML与CSS学习第10天
字体图标 1.定义 本质是字体,展示是图标 2.优点 3.下载 4.使用 5.矢量图片转换成图标平面转换 1.定义 1.位移 2.旋转 3.缩放 2.位移 transform :translate 3.旋转 transform: rotate 角度单位deg 旋转中心点 4.缩放 transform:scale渐变 多个颜色逐渐变化的视觉效果原创 2022-02-24 21:41:19 · 172 阅读 · 0 评论 -
HTML与CSS学习第11天
空间转换 1.定义 2.使用 3.位移(空间) transform:translate3d(x,y,z) 透视 z方向观察不到效果,需要设置属性 4.旋转(空间) 1.绕x轴旋转 transform:rotateX() 2.绕y轴旋转 transform:rotateY() 3.绕z轴旋转 transform:rotateZ() 4.左手定则 **左手定则:左手握住旋转轴,拇指指向旋转轴的正值方向,手指弯曲的方向为旋转正值方向** 5.缩放(空间原创 2022-02-24 22:02:16 · 260 阅读 · 0 评论 -
HTML与CSS学习第12天
移动端特点 1.移动端与pc端网页布局的区别 2.视口 根据设备的不同网页宽度不同 3.二倍图 解决低分辨率在高分辨率设备下失真的问题 4.移动端主流设备分辨率百分比布局 流式布局 宽度自适应,高度固定flex布局 1.定义 浏览器提倡的布局模型 2.布局模型 3.主轴对齐方式 主轴可以更改,默认x轴 4.侧轴对齐方式 1.弹性盒子的一系列特点 侧轴可以更改,默认y轴 5.伸缩比 flex属性 代表子元素占父元素宽度的份数原创 2022-02-24 22:16:54 · 182 阅读 · 0 评论 -
HTML与CSS学习第13天
flex布局 1.修改主轴对齐方式 2.弹性盒子显示特点 默认情况下,**弹性盒子沿主轴方向依次排列,不换行**,当**总的盒子的宽度之和大于父盒子时**,**子盒子会被压缩(每个子盒子的宽度变小),仍然不换行** 3.弹性盒子的换行 4.换行后行与行之间的对齐方式省略显示过长的文字 子主题 1原创 2022-02-24 22:20:32 · 72 阅读 · 0 评论 -
HTML与CSS学习第14天
移动适配 定义:元素的宽高随着设备的宽高等比缩放长度单位 1.rem 1rem=1HTML字号大小 2.移动适配原理 根据设备视口的不同,相应的修改html字号 媒体查询 检测视口宽度,设置差异化的css 3.rem适配 html字号目前为视口宽度的1/10 4.根据设计稿确定rem 5.手淘移动适配js插件 flexible.jsless语法 1.完成px单位到rem单位的转换 2.less简介 3.vdcode安装easyless插件 4.less注原创 2022-02-24 22:29:39 · 89 阅读 · 0 评论 -
HTML与CSS学习第15天
长度单位 1.vw 1vw=1/100视口宽度 2.vh 1vh=1/100视口高度 3.根据设计稿确定vw/vh尺寸原创 2022-02-24 22:36:26 · 67 阅读 · 0 评论 -
HTML与CSS学习第16天
媒体查询 1.媒体查询的目的 根据不同的视口宽度,设置差异化的css样式 2.媒体查询开发中的使用方法 3.媒体查询-隐藏内容BootStrap 1.UI框架 2.简介 3.下载 4.使用 5.布局版心类 6.栅格系统 7.其他类 1.表格效果 2.按钮效果 3.表单效果 4.图片效果 5.布局类BootStrap组件 字体图标BootStrap插件 轮播图原创 2022-02-24 22:50:06 · 174 阅读 · 0 评论