- 博客(20)
- 收藏
- 关注
RSS订阅原创 高铁没票也能上车？揭秘黄牛是如何做到的
如果您经常坐火车，那么相信您一定会有遇到过抢不到票的情况。而且，即使你没抢到票，你也会发现黄牛哥哥们总是能“神奇”地给你找到一张票。今天我们就来揭秘一下，实际上，他们是如何做到的。
2023-05-26 23:35:38
854
原创 前端工程师实战20完结：详解手机和PC的像素差异、完美视口、响应式布局与媒体查询
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！像素- 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素- 分辨率：1920 x 1080 说的就是屏幕中小点的数量-在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素- 物理像素，上述所说的小点点就属于物理像素- CSS像素，编写网页时，我们所用像素都是CSS像素- 浏览器..
2021-05-05 21:09:28
701
原创 前端工程师实战19：详解flex弹性盒布局与实战案例（图文并茂，小白也能听懂）
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！flex弹性盒，伸缩盒 是一种新的布局手段，主要用来代替浮动来完成页面的布局flex可以使元素具有弹性，让元素跟随页面的大小改变而改变弹性容器：要使用弹性盒，必须先将一个元素设置为弹性容器通过display:flex来设置块级弹性容器通过display:inline-flex设置为行内弹性..
2021-05-05 21:03:13
608
原创 前端工程师实战18：3千字彻底读懂CSS高级特性：渐变、旋转、变形、缩放、过渡效果
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！通过渐变，可以设置一些复杂的背景颜色，可以实现一个颜色向其他颜色过渡的效果。渐变是图片，需要通过background-image来设置线性渐变line-gradient颜色沿着一条直线发生变化.box1{ width:200px; height:200p...
2021-05-05 20:43:24
206
原创 前端工程师实战17：详解CSS背景图片、雪碧图
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！background-imgae:url("[图片路径]")background-color:#bfa可以同时设置，会使背景颜色设置为图片的背景色如果背景图片小于元素，则会平铺，如果图片大于元素，将会有一部分背景无法完全显示。如果背景图片和元素一样大，就正常显示。background...
2021-05-05 20:33:18
235
原创 前端工程师实战16：详解字体垂直对齐、字体居中对齐、字体行间距（行高）、文字省略号处理
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！字体简写属性行高line-height行高：行之间的高度（line--height）指的是文字占有的实际高度。此时div的高度就是文字的行高，就是边框里面的高度就是行高，如果设置了line-height:200px：行高除了可以设置大小（px，em，rem。。）还可以是一个整数，行高将..
2021-05-05 20:20:58
2181
原创 前端工程师实战15：元素的层级、字体与字体图标
元素的层级对于开启了定位的元素，可以通过z-index属性来指定元素的层级，需要一个整数作为参数，值越大层级越高，元素的层级越高越优先显示。设置不同box的层级观察变化：如果层级一样的话，则优先显示结构上靠下的元素这里box3在结构上靠下，所以层级一样时候会优先显示3祖先元素的层级再高，也不会盖住后代元素。即使box4是box3的子元素，设置box3的z-line，box3也不会覆盖box4字体和字体图标font-face & font-fam..
2021-05-05 15:08:13
191
原创 前端工程师实战15：2千字彻底读懂CSS四大定位（相对定位、绝对定位、固定定位、粘滞定位）
相对定位现在有如下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ...
2021-05-05 15:00:58
205
原创 前端工程师实战14：高度塌陷的解决方法：开启BFC
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！网页的布局之前的文章我们已经学会了编写一个网页的小组件，那么如何进行将多个写出来的小组件进行网页布局呢？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
2021-05-05 14:44:20
193
原创 前端工程师实战13：一文彻底弄懂CSS浮动（图文并茂）
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！浮动float通过浮动，可以使一个元素向其父元素的左侧或者右侧移动使用float属性来设置元素的浮动可选值： none:元素不浮动 left:元素向左浮动 right：元素向右移动 元素设置浮动以后，水平布局的等式不需要强制成立margin-left + padd..
2021-05-05 14:43:35
163
原创 前端工程师实战11：CSS设置盒子大小计算方式、轮廓、圆角与阴影效果
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！盒子的大小默认情况下，盒子可见框大小由内容区，内边距和边框共同决定 .box1{ width:100px; height:100px; background-color:#bfa; padding...
2021-05-04 20:40:23
667
原创 前端工程师实战09：去除浏览器的默认样式
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！我们会发现会有距离我们没有设置外边距，为什么会有间隔呢？这就是默认样式浏览器会为元素设置一些默认样式。（因为不写css，就什么都看不见（细品，因为css负责样式，html不负责样式））在开发中，必须要去除浏览器的默认样式，我们在开发者工具里面点击一个div，他的外边距没有显示出来，但是他..
2021-05-04 20:33:56
309
原创 前端工程师实战开发08：外边距重叠与行内元素盒子模型
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！垂直方向外边距的重叠<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
2021-05-04 20:30:58
88
原创 3千字彻底弄懂CSS盒子模型（图文并茂，通俗易懂）
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！内容通俗易懂，图文并茂，欢迎订阅！到此为止，html和css的基础已经全部讲完，接下来就是网页的布局。如何把元素放在网页的任何一个位置？就是布局文档流Normal flow网页是一个多层的结构，一层包含着一层，通过css可以分别为每一层来设置样式，作为用户来说只能看到最上面的那一层（化妆）这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。..
2021-05-04 20:14:04
372
2
原创 前端工程师实战开发：CSS样式继承、像素与选择器权重详解
餐厅练习具体看resource文件夹或者百度继承<body> <p> 我是p元素 <span>我是p里面的span</span> </p> <span>我是p元素外面的span</span></body> <style> p{ color:red; ...
2021-05-04 19:59:48
219
原创 前端工程师实战开发：一文彻底弄懂CSS选择器！（包含伪类、伪元素选择器）
html5+css3，html不会再出第六版。css3是里面是分模块的，比如字体模块，盒子模块等等这些。每个模块都有各自不同的版本，所以css3是统一命名的，不用纠结。回顾回顾一下网页的三个部分：结构（html）、表现（css）、行为（JavaScript）。之前的h标签等等其他标签，样式都是浏览器默认的，改变样式就是css的工作内容。只要是表现就应该用css来改变，而不是着重于标签的样式,因为标签的样式是浏览器默认的，html标签只关注语义。层叠样式表其实网页的样式是分层的，我.
2021-05-04 19:50:54
242
原创 前端工程师实战开发：HTML基础知识-4（图片视频音频标签）
图片标签图片标签用于向当前页面中引入一个外部的图片。img标签自结束标签src属性：指定图片的路径，可以是本地的图片也可以是联网的图片。看出来，img标签没有独占一行，但他也不是行内元素。属于替换元素（介于行内元素和块元素之间）（被一个图片替换）alt属性：对图片的描述，浏览器会在图片加载不出来的时候显示，搜索引擎会根据alt的内容识别图片是什么内容，如果不写alt属性，这不会被搜索引擎说搜索到。width属性:指定图片宽度height属性：指定图片高度高度和宽度
2021-05-04 19:44:28
278
原创 前端工程师实战开发：HTML基础知识-3（块元素和行内元素）
块和行内块元素块属于布局，在网页中一般通过块元素来对页面进行宏观布局。只在块元素中放行内元素，禁止在行内元素中放块元素。<!--more-->行内元素p（p标签是行内元素）标签禁止放任何块元素，行内元素主要用来包裹文字。浏览器纠正：浏览器在解析网页的时候，会自动对网页中不符合规范的内容进行修正，比如标签写在了根元素的外部，p元素中嵌套了块元素，根元素中出现了除head和body以外的子元素。所以上图虽然写在了外部，但是浏览器会纠正，纠正后的内容是放入到内存中的，那
2021-05-04 19:31:54
243
1
原创 前端工程师实战开发：HTML基础知识-2（实体）
实体在html里面，如果编写了多个空格，浏览器会自动解析为一个空格。如果想要补充空格，需要使用 ，另外，如果需要显示其他特定字符，需要进行转义，不然像下面这里想显示a<b>c，会被浏览器当作标签<b>有时候不能直接书写一些符号，比如多个连续空格、连续两侧的大于和小于号，如果需要在网页书写这些特殊符号，需要使用html中的实体（即转义字符）实体定义：&实体的名字一些实体的举例: 空格： 大于号
2021-05-04 19:30:14
109
原创 前端工程师实战开发：HTML基础知识-1
标签标签一般成对出现，但是也存在一些自结束标签：没有成对出现的标签比如<img> <img /><input> <input />都是对的推荐<img>``<input>写法<!--more-->注释html文件的注释使用<!--注释-->来进行注释浏览器会忽略，一定要养成良好的注释的习惯，对代码进行解释说明，要求简洁明了（阿里开发手册）注释不能嵌套。标签中的属性&l
2021-05-04 19:27:28
68
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人