
一共20篇文章
专题:第1期
-
解决img标签下面的小空隙
很多初学小伙伴在写页面的时候碰到过一个问题,当我们用一个div直接包裹img,img的下方会出现3px间距,如图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e…...岳泽以
- 26
- 0
-
CSS的书写顺序和规范
CSS的书写顺序和规范衡量程序员的能力,除了要看实现业务需求的能力,还要看平时书写代码的规范(专业性) 不同的CSS书写顺序会影响浏览器的渲染性能,推荐前端工程师使用专业的书写顺序习惯! CSS的书写顺序 布局属性:display、position、float、clear、visibility、overflow 盒子模型+背景:width、height、margin、padding、border、…...岳泽以
- 30
- 0
-
HTML5中有语义的布局标签
<header> :标记定义一个页面或一个区域的头部 <nav> :标记定义导航链接 <article> :标记定义一篇文章 <section> :标记定义一个区域 <aside> :标记定义页面内容部分的侧边栏…...岳泽以
- 11
- 0
-
2021年黑马程序员前端学习路线图
前端学习路线图火热出炉啦,还在为如何系统学习苦苦寻觅资源么? 2021年新版前端学习路线图这不就来了么!小伙计们甩开膀子学起来吧。 只要能坚持学下来走上人生巅峰不再是梦。 PS:此套课程为B站全免费的课程,按照视频链接顺序学习即可! 第一阶段:前端入门HTML5 +Css3+电商网页制作 课程内容: 1、HTML5 是网页开发的基础,从最简单的网页开发基础入手,使用常见的标签制作网页内…...岳泽以
- 53
- 0
-
精灵图的介绍及使用步骤
精灵图的介绍: 场景:项目中将多张小图片合并成一张大图片,这张大图片称为精灵图。 优点:减少服务器发送次数,减轻服务器的压力,提高页面的加载速度。 例如: 如果八张小图片需要在服务器中分别发送八次 合并成为一张图片后只需要在服务器发送一次 精灵图的使用步骤 创建一个盒子 通过PxCook量取小图片的大小,将小图片的宽高设置给盒子 将精灵图设置为盒子的背景图片 通过PxCook测量小图片左上角坐标,…...岳泽以
- 39
- 0
-
元素隐藏与显示属性及操作方式
元素的隐藏显示经常会使用,比如二级导航,响应式布局等等。 使用场景:让某元素在屏幕中不可见,如:鼠标:hover之后元素隐藏/显示 常用属性方法: visibility: hidden; 浏览器对其渲染可是不可见,它在网页中占位置却不可点击,也就是说明元素不可见却仍然占据空间。 /* 元素隐藏 */ display:none; /* 元素显示 */ display:block; 隐藏元素本身,并且…...岳泽以
- 36
- 0
-
CSS边框圆角介绍及案例
场景:让盒子四个角变得圆润,增加页面细节,提升用户体验。 属性名:border-radius 常见取值:数字+px、百分比 写法: border-radius:50px; 或 border-radius:10%; 原理: 赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角! 边框圆角的场景应用 画一个正圆: 盒子必须是正方形 设置边框圆角为盒子宽高的一半→border-radi…...岳泽以
- 22
- 0
-
CSS鼠标光标常见样式类型
属性及写法 cursor: 属性值; 常见属性值: default 默认值,通常是箭头 pointer 小手效果,提示用户可以点击 text 工字型,提示用户可以选择文字 move 十字光标,提示用户可以移动 cursor鼠标常见样式 url 需使用的自定义光标的 URL。 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 default 默认光标(通常是一个箭头…...岳泽以
- 21
- 0
-
垂直对齐方式及常见可以解决的问题
设置行内/行内块元素垂直对齐方式的属性: vertical-align 垂直对齐方式的常见取值: baseline 默认,基线对齐 top 顶部对齐 middle 中部对齐 bottom 底部对齐 项目中vertical-align可以解决的问题 文本框和表单按钮无法对齐问题 input和img无法对齐问题 div中的文本框,文本框无法贴顶问题 div不设置高度由img标签撑开,此时img标签下面…...岳泽以
- 47
- 0
-
CSS中元素的层级问题及更改定位元素的层级方法
不同布局方式元素的层级关系: 标准流 < 浮动 < 定位 HTML < float < position 不同定位之间的层级关系: 相对、绝对、固定默认层级相同 此时HTML中写在下面的元素层级会更高,会覆盖上面的元素 更改定位元素的层级: 场景:仅限于改变定位元素的层级,不适用于其他元素。 属性名:z-index 属性值:数字 属性值的数字越大,层级越高。 如图,gree…...岳泽以
- 21
- 0
-
子绝父相水平居中及水平垂直都居中解决方法
原图: 水平居中操作步骤: 1.先让子盒子往右移动父盒子的一半 left:50% 2.再让子盒子往左移动自己的一半 普通做法: margin-left: 负的子盒子宽度的一半 缺点:子盒子宽度变化后需要重新改代码 优化做法: transform:translateX(-50%) 优点:表示沿着X轴的负方向(往左)始终移动自己宽度的一半,子盒子宽度变化不想要更改代码。 水平居中后显示效果: 水平垂直…...岳泽以
- 25
- 0