教你玩转CSS margin(外边距)
margin
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
可能的值
值 | 说明 –|— auto | 设置浏览器边距。 这样做的结果会依赖于浏...[2021/2/19]
教你玩转CSS 轮廓（outline）属性
CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
定义和用法
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，...[2021/2/19]
教你玩转CSS border(边框)教你玩转CSS border(边框)
边框样式
边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式
border-style的值
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
...[2021/2/19]
如何玩转CSS列表样式？速看！如何玩转CSS列表样式？速看！
CSS 列表
CSS列表属性作用如下：
设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像
列表
在HTML中，有两种类型的列表：
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母...[2021/2/19]
教你玩转CSS表格（table）
1.表格边框
指定CSS表格边框，使用border属性。
下面的例子指定了一个表格的Th和TD元素的黑色边框：
table, th, td {
border: 1px solid black;
}
请注意，在上面的例子中的表格有双边框。这是因为表...[2021/2/19]
如何玩转CSS链接（link）的知识点？
CSS 链接
不同的链接可以有不同的样式。
链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访...[2021/2/19]
教你玩转CSS Overflow
CSS 布局 - Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
<style>
#overflowTest {
background: #4CAF50;
co...[2021/2/18]
如何玩转CSS的Id 和 Class选择器？
id 和 cla 选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置”id” 和 “cla ”选择器。
1.id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id ...[2021/2/18]
一篇文章精通CSS文本的问题，值得一看。
CSS 文本格式
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content...[2021/2/18]
教你玩转CSS的所有字体，路过的来瞧一瞧。教你玩转CSS的所有字体，路过的来瞧一瞧。
CSS 字体
CSS字体属性定义字体，加粗，大小，文字样式。
CSS字型
在CSS中，有两种类型的字体系列名称：
通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
特定字体系列 - 一个特定的字体系列（如 “Times...[2021/2/18]
如何通过 display:olck/none 完成一个菜单栏_CSS教程_CSS
通过 display：bolck/none 完成一个菜单栏的效果 图1：
首先下面是已经完成的一个效果当我们把鼠标移入到 “菜单” 这块区域时就会弹出，图2的效果
图2：
相反如果我们把鼠标移出 “菜单” 区域时，下面的子菜单就会隐...[2021/2/18]
CSS快速入门
Blog：博客园 个人
参考：https: www.w3school.com.cn/c index.asp
概述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件...[2021/2/18]
web开发tools
1、Web代码工具
网页开发工具：HBuilderX、VSCode、SublimeText、Dreamweaver、WebStorm...
HBuilderX —— 内置浏览器、app云打包
VScode —— 丰富的快捷键、代码整理方便
...[2021/2/18]
幸福西饼：静态页面制作项目总结
在coursera上学完了密歇根大学开的前端入门课，仍然不得要领，听朋友建议从网上找了个实站项目跟着撸了一遍代码，感悟比单纯上课多得多。
这个项目主要是复刻【幸福西饼】的主站和产品列表页，纯静态页面，没有任何JS的成分，借此机会熟悉下html和c 的用法。下面是一些技术要点记录。
页面...[2021/2/18]
HTML 简述
HTML简述
前言1- HTML基础目标
1. PC端网站布局
目标：能根据psd原型图，用HTML+CSS 布局出 符合W3C规范的静态网页.
推荐黑马品优购项目：网站首页、列表页、详情页、登录页、 注册页等等...
前言2- 认识WEB
1. 认识...[2021/2/18]
CSS奇思妙想 -- 使用 background 创造各种美妙的背景CSS奇思妙想 -- 使用 background 创造各种美妙的背景
本文属于 CSS 绘图技巧其中一篇，系列文章：
在 CSS 中使用三角函数绘制曲线图形及展示动画
CSS奇思妙想 -- 使用 CSS 创造艺术
将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。...[2021/2/18]
html常用标签
html页面基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="widt...[2021/2/18]
CSS简述CSS简述
1. CSS基础
HTML太丑了，怎么办？
CSS层叠样式表——表现，凡是页面中所有能看见的东西的设置
1.1 什么是CSS?
CSS指的是层叠样式表(Cascading Style Sheets) ，用于为网页创建样式表，对网页进行装饰，如...[2021/2/18]
网页布局准则
一、网页布局思路
通过盒子模型，知道大部分html标签是一个盒子；
通过c 浮动，定位，可以让每个盒子排列成网页；
一个完整的网页是由标准流、浮动、定位一起完成布局的，每个都有自己专门的用法；
1、网页布局准则
多个...[2021/2/18]
object-fit和object-position——定义图片和视频元素在容器内如何显示的css属性
目录1.object-fit常用属性值：object-fit: fill;object-fit: cover;object-fit: contain;object-fit: scale-down;object-fit: none;object-fit: initial;object-fi...[2021/2/18]
css整理之-----------选择器
背景
在20年初时总感觉自己的c 不够用，想把c 相关的东西整理下，去年一整年都比较忙，忙着就到2021了，今天趁着有点时间，先从选择器开始吧。
听说图片可以提升颜值....
选择器
CSS选择器用于选择你想要的元素的样式。简单划分为简单选择器、组...[2021/2/18]
CSS Flex 弹性布局使用 - Stars-one
原文地址:CSS Flex 弹性布局使用 | Stars-One的杂货小窝
前端钻研不深,本文只是稍微记录一下关于Flex布局的知识,讲得不深,需要深入了解学习的可以参考其他大佬的博客
重点记录
通过display:flex即可将div设置为flex布局
flex-direct...[2021/2/18]
关于移动端web在360手机浏览器上播放video视频时出现的bug
在做手机web开发时 手机页面的video标签的poster预览图在360手机浏览器中被视频所覆盖无法显示,同时会出现video标签中视频只显示一半另一半黑屏的bug
错误复现
由于webstorm内置的tomcat不能在内网访问(vscode可以启动项目后访问),所以作者就直接将...[2021/2/18]
Butterfly美化 - MoYu-zcButterfly美化 - MoYu-zc
Butterfly美化
Hexo系列文章已经完成上传：
一、Hexo准备---Node.js、Vue
二、Hexo、主题、部署上线
三、Butterfly美化
四、Hexo之更换背景及透明度
五、Hexo-使用阿里iconfont图标
六、PicGo：搭建图床
七、Hex...[2021/2/18]
使用Markdown来丰富Discord对话效果使用Markdown来丰富Discord对话效果
Markdown是一种轻量级标记语言,很多网站都广泛使用Markdown来撰写文档或者是用于论坛中发表消息.在Discord中也能够使用Markdown来丰富对话效果.
基本语法
倾斜文字
*倾斜*
_倾斜_
粗体文字
**粗体**
底线文字,删除线文字,海...[2021/2/18]
两种轮播图实现方式
最近做了一个网站，首页轮播图一直没有达到理想的效果，在网上找了两个实现方法，一个是用c 自己实现，一个是用swiper插件，个人认为swiper做的还比较好用。这里只贴出主要的实现代码，想要看具体实现代码及效果可以到对应网址上看：
一、c 实现轮播图
原文网址：https: ww...[2021/2/18]
CSS页面demoCSS页面demo
CSS层叠样式表
(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能...[2021/2/18]
什么是CSS？你真的理解了吗？
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多...[2021/2/18]
如何玩转CSS内部样式表与外部样式表？
CSS 创建
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
如何插入样式表?
插入样式表的方法有三种:
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)
1.外部样式...[2021/2/18]
怎么样才能玩转前端所有的CSS背景相关问题？
CSS 背景
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
1.背...[2021/2/18]
CSS基本语法？
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
1.CSS ...[2021/2/18]
css实现元素居中的N种方法_CSS布局实例_CSS
前言
刚参加工作时被面试官一连串居中问题虐的体无完肤得场景历历在目。“你是如何实现文本的居中的”“如果是多行文本呢”“块级元素的水平居中如何实现”“块级元素的垂直居中如何实现”。。。问到后面脑子里一团...[2021/2/18]
有趣的css实现隐藏元素的7种思路_CSS教程_CSS
前言
display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。
属性
值
是否在页面上显示
注册点...[2021/2/18]
使用HTML和CSS实现的标签云效果(附demo)
标签云的效果在博客和网站上不难见到，它其实就是带有超链接的某些关键字，为了达到强调主题的作用。通常出现概率比较大或者受欢迎的标签文字显示比较大，相反的就显示的小。
来源于TagCrowd.com
我们就不去深入研究标签云带来的效率上的提升和可用性的细节，仅仅在外观上带来的...[2021/2/18]
CSS实现div不设高度完全居中_Div+CSS教程_CSS
要求
body下div垂直居中
div内文字垂直居中
div宽度和高度均为body宽度的一半
分析
div居中不难，考虑 margin 或者 left/top 配合 translate 属性实现
关键点在于div高度等于bo...[2021/2/18]
css之粘性sticky布局实现题头定位在顶部的方法_CSS教程_CSS
运用场景：
新需求有个项目是要做问卷调查，其中必然会涉及到很多题目，以及一个题目下需要对多个人打分，手机端滑动的时候，就会发生这种现象，划上去会忘记了题目。 所以计算一定的距离之后需要对题头进行一个定位。使滑到相对于区域的题头一直固定在顶部，方便打分。
解决思路：
1.首先想到的是fixe...[2021/2/18]
300 多行css代码搞定微信 8.0 的炸裂特效_CSS教程_CSS300 多行css代码搞定微信 8.0 的炸裂特效_CSS教程_CSS
微信 8.0 更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和头像也会随之震动。
本着前端工程师的职业精神，我就想看看能不能实现一个类似的特效。折腾许久之后...[2021/2/18]
css中的px、em、rem、pt 特点和区别及换算详解_CSS
概念介绍：
1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。
...[2021/2/18]
css 移除某个上级属性的影响
c 移除某个上级属性的影响
或者 c 中如何清除上级元素对下级元素的影响呢？
设置属性值为 initial
很多属性子元素会默认继承父元素的属性,如:font-size，font-weight，color等，想要去除父元素对子元素的专影响，可以对相应属元素设置initial，如：...[2021/2/1]
CSS奇思妙想 -- 使用 CSS 创造艺术
本文属于 CSS 绘图技巧其中一篇。之前有过一篇：在 CSS 中使用三角函数绘制曲线图形及展示动画
想写一篇关于 CSS 创造艺术的文章已久，本文主要介绍如何借助 CSS-doodle ，利用 CSS 快速创造美妙的 CSS 图形。
中心布局
本文...[2021/2/1]
前端工程师用HTML多行代码搞定微信8.0的炸裂特效！C/C++工程师怎么能输
微信 8.0 更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和头像也会随之震动。
近日，前端工程师华峰用300行代码实现微信表情包炸裂的特效，一起来...[2021/2/1]
一篇文章带你初步了解—CSS特指度一篇文章带你初步了解—CSS特指度
CSS特指度
说明
这篇博客在在两台电脑上分别完成的，故而有些截图是Firefox，有些是Chrome，有些改动了浏览器的用户样式表，有些没改，但不会影响阅读，特此说明，勿怪。
CSS选择器
单个CSS选择器
c 选择器决定c 样式能渲染到对应的元素上。
元素选择器：
Cla ...[2021/2/1]
Vue2.x 中注册自定义组件的3种方式
创建项目
通过 cmd 执行如下示例命令来初始化我们的 Vue 项目
vue create helloworld
cd helloworld
code .
npm run serve
命令执行完成后，项目结构如下图所示：
接着，我们在 src/components 目录下...[2021/2/1]
子元素margin-top导致父元素移动的问题解决_CSS教程_CSS
问题描述
今天在修改页面样式的时候，遇到子元素设置 margin-top 但是并没有使得子元素与父元素之间产生间隔，而是作用在了其父元素上，导致父元素产生了一个 margin-top 的效果。
今天就来说说整个问题产生的原因，以及解决方案。
问题分析
在MDN上面有这么一段文字：
...[2021/2/1]
html+css实现充电水滴融合特效代码_HTML/Xhtml
先看效果：
前言：
这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯c ）
实现：
定义标签，有三个水滴盒子，一个圆圈盒子显示数字，一个最底层盒子：
<div cla ="kuang">
&...[2021/2/1]
html+css实现响应式卡片悬停效果_HTML/Xhtml
话不多，看效果先：
卡片悬停，响应式卡片，简约效果。
实现：
1. 定义标签，.kapian为最底层盒子，然后两个子盒子一个放图片，一个放文本：
<div cla ="kapian">
<di...[2021/2/1]
html+css+js实现导航栏滚动渐变效果_HTML/Xhtml
先看效果：
实现：
1.定义导航栏的文字标签：
<div cla ="tou">
<sapn cla ="logo"> 北极光。< apn>
<ul cla ...[2021/2/1]
css实现快速炫酷抖动动画效果_CSS教程_CSS
1.Animate.c 简介
Animate.c 是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调，首页，滑块和引导注意的提示。它是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/...[2021/2/1]
用APICloud开发iOS App Clip详细教程
App Clip是苹果公司在WWDC20开发者大会上发布的新功能，用户可以只访问应用程序的一小部分，而无需下载整个应用，被称为苹果小程序。本文主要介绍如何通过APICloud开发App Clip。
一 创建应用
在APICloud上创建App Clip有两种方式，一种可以在登录API...[2021/1/25]
前端学习笔记-HTML - YangYang-it前端学习笔记-HTML - YangYang-it
HTML部分
了解HTML
一个简单的html实例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8...[2021/1/25]
经验首页