css实现弹窗上下左右居中且背景透明锁定窗口效果_CSS教程_CSScss实现弹窗上下左右居中且背景透明锁定窗口效果_CSS教程_CSS
有一种简单的c 方法实现点击之后的弹出框上下左右居中且附加灰色透明遮罩锁定窗口清除滚动条
html代码
<div cla ="box">
<div cla ="boxs">
<!-- 白色弹...[2020/12/28]
CSS仿苹果平滑开关按钮效果_CSS教程_CSSCSS仿苹果平滑开关按钮效果_CSS教程_CSS
源码
1. 代码解析
1.1 html 代码解析
<div cla ="checkbox">
<div cla ="inner" id="inner">
<div cl...[2020/12/28]
前端工程师必备的一些网站
一、工具类
1.webstorm-------------------http: www.jetbrains.com/webstorm/
这是我工作以来，在大部分开发工具中觉得比较好使的，它也自带快捷编辑功能，还可以调整编码风格，从快捷键，字体和视觉主题到工具窗口和编辑器布局。推荐可以一...[2020/12/22]
最近的总结：markdown、hr、em、后代选择器
markdown的基础使用
一级标题用#加空格，二级用##加空格
加粗用前后**包围
斜体前后用*包围
有序列表用数字加.加空格
无序列表用*加空格
分割线用***
单行代码用`包围,代码块用```包围
hr的使用
让hr居中不能使用 hr 元素的 align 属性; 不支持 h...[2020/12/21]
简洁404页面源码 | 自适应404页面HTML好看的404源码下载简洁404页面源码 | 自适应404页面HTML好看的404源码下载
description：源码 源码下载 源码网 源码自适应 源码图片 页面源码 页面源码下载 错误页源码 php源码 html源码 动漫 源码
演示图如下：
HTML代码片段：
1 <!DOCTYPE HTML>
2 <html>
3 &...[2020/12/21]
浮动
浮动简介
通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用 float 属性来设置元素的浮动
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
注意：元素设置浮动后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不在...[2020/12/21]
Thymeleaf 循环 List,Map复杂数据类型HashMap<String,List<String>>----修复标签样式问题
用到的标签有 th:each \ th:if \ key.current.key \ th:text
需求是展示文章的标签名称，blog 对象的标签字段是tag(数据通常是java,xx,java-web等以逗号分割的)，所以由后端传到前端的数据是HashMap<Stri...[2020/12/21]
定位 position
position 定位
定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置
使用 position 属性来设置定位
可选值：
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位...[2020/12/21]
字体
color
color 前景色，通常用来设置字体的颜色
颜色单位
在CSS中可以直接使用颜色名来设置各种颜色
比如：red、orange、yellow、blue、green ... ...
但是在c 中直接使用颜色名是非常的不方便
RGB值
RGB通过三种颜色的不同浓度来调配出不...[2020/12/21]
CSS 鼠标悬浮在图片上添加遮罩层效果的实现_CSS教程_CSSCSS 鼠标悬浮在图片上添加遮罩层效果的实现_CSS教程_CSS
先看效果：
鼠标移在图片上时，添加阴影效果+文字 / 图标
实现的关键是 CSS 的 opacity 和 hover，本文也主要介绍遮罩层的实现
HTML:
<div cla ="img_div">
...[2020/12/21]
css3选择器归类整理---基本选择器和属性选择器
c 3选择器分类
CSS3选择器分类如下图所示
选择器的语法
1.基本选择器
类型
代码
功能描述
通配选择器
*{ margin: 0; padding: 0; border: none; }
选择文档中所有HTML元素
元素选择器
body {...[2020/12/14]
如何简单美化自己的博客（二）——主界面样式及点击特效如何简单美化自己的博客（二）——主界面样式及点击特效
博客主体样式更改
首先选一个框架模板，在此模板基础上进行样式调整。这里我选择darkgreentrip
在页面定制CSS代码中插入如下代码：
#home {
margin: 0 auto;
width: 80%;/*原始65*/
min-width: 98...[2020/12/14]
nginx 静态化合集(去掉index.php目录)
访问某域名时，去掉index.php目录时达到效果一样
如：www.test1/index.php/test2跟www.test1/test2效果一致
在vhosts.conf中加重写就可以了
location / {
if (!-e $request_filename) {
rewrit...[2020/12/14]
table表格使用:nth-child()实现隔行变色与对齐_CSS教程_CSStable表格使用:nth-child()实现隔行变色与对齐_CSS教程_CSS
核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=&qu...[2020/12/14]
HTML外部样式表如何引入CSS样式_HTML/Xhtml
链入式是把所有的 样式 放在一个或多个 外部样式表文件 中，这个文件是以 c 为扩展名的，通过 link 标签，将外部样式表（c 命名的外部样式文件）链接到html文档中，这样可以把结构和样式分割成2个文件，更能清晰的编辑样式或者结构。
基本语法为：
<link rel=&...[2020/12/14]
浅谈HTML文件引入外部CSS文件时路径的写法总结_HTML/Xhtml
一. 引入外部c 文件的基本样式
用< link>标签引入外部样式表，其中通常要写两个属性：
href属性表示c 文件的路径
rel=“stylesheet” 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一...[2020/12/14]
总结下常用的nth-child选择符 _CSS教程_CSS
前言
在前端编程中我们经常用到nth-child选择符，它可以接受数值也可以接受odd,even等，今天翻阅精通CSS一书才想起它还可以接受一个表达式，类似4n+1,-2n+1等。那他们各自具体有什么用呢？适用的场景是什么呢？可能大家还不是很清楚，下面我们来根据实例具体了解下，他们的html结构...[2020/12/14]
css transform 翻页动画记录的实现_CSS教程_CSS
翻页问题场景
B和C是同一页（正反两面）
当想要翻页覆盖 A 时，B、C 需要同时翻页才能覆盖A，显示D。
B、C 不能写在同一个盒子里
错误例子：
<div cla ="pagesBox A"></div>
&...[2020/12/8]
css文字阴影渐渐模糊效果的实现_CSS教程_CSS
text-shadow
为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。
text-shadow: 10px 10px 20px pink;/*x轴偏移10px,y轴偏移1...[2020/12/8]
CSS border边框一半或者部分可见的实现代码_CSS教程_CSSCSS border边框一半或者部分可见的实现代码_CSS教程_CSS
1.使用伪类，让Border边框显示一半
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用伪类，在元...[2020/12/8]
纯CSS实现的下拉菜单_CSS教程_CSS
实现效果
实现代码
html
<div id="container">
<nav>
<ul>
<li><a href="#"...[2020/12/8]
CSS实现小图下拉查看大图和信息的方法_CSS教程_CSSCSS实现小图下拉查看大图和信息的方法_CSS教程_CSS
今天来讲一个淘宝京东等商城里面经常用到的小图hover查看大图和信息的c 特效，先来看图片展示：
如果可以的话，还可以设置阴影和延迟特效啥的，想看的话可以看之前的几个c 特效案例！
设计思路也很简单，就是先隐藏下面的大图，然后小图hover的时候显示就好了！详细的注解也在源码里...[2020/12/8]
CSS实现背景图片屏幕自适应的实现_CSS教程_CSS
在做登陆页面等的首页的时候，经常会遇到需要放一张背景大图的情况，并且需要图片按比例缩放，来适应不同屏幕的大小。
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
...[2020/12/8]
css 选择器css 选择器
CSS 选择器
一、常用选择器
元素选择器 p {}
id 选择器 #name {}
cla 类选择器 .box {}
二、复合选择器
交集选择器 p.red {} .box.red {}
选中同时符合多个条件的元素
注意：交集选择器中如果有元素选择器，而...[2020/12/8]
仿美团外卖的店铺列表获取思路
这一篇随笔主要用来讲解和记录我对一个问题的解决思路。
首先我来讲解下遇到的问题，在开发一个外卖uni-app的过程中，我碰到了一个问题，店铺页面商品实现懒加载和列表动态切换，实现和美团，饿了么一样的效果，并在这个基础上给予动态效果，大致设计如下图：
在...[2020/12/8]
盒子模型
李立超老师前端课程笔记
文档流（normal flow）
网页是一个多层的结构，一层叠着一层。通过 c 可以分别为每一层来设置样式
用户只能看到最顶上一层，这些层中，最底下的一层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列。
对于我们来元素主要...[2020/12/8]
简单的个人介绍网页-主页面【附代码】简单的个人介绍网页-主页面【附代码】
主页面
代码1（style.c ）
.nav {
height: 41px;
border-top: 3px solid #b4fffa;
...[2020/12/8]
谷歌浏览器安装vue-devtools扩展插件
谷歌浏览器安装vue-devtools扩展插件
介绍：
新版vue-devtools下载下来由于缺少shells文件夹，导致安装始终无法成功。
本文提供Git仓库地址，可下载vue-devtools5.1版本，内部包含shells文件夹，打开shells文件，选择chrome文件夹，拖...[2020/12/8]
CSS小技巧
lex布局一边固定,一遍自适应
flex布局,一边定宽的宽度会变化的问题
解决:flex:1 这边设置width为0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<...[2020/12/8]
Vue入门常用指令Vue入门常用指令
一.Vue 介绍
? Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具...[2020/12/8]
HTTP与HTTPSHTTP与HTTPS
1.基本概念
HTTP： 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端与服务器端请求和应答的标准（TCP)，用于从WWW服务器传输超文本到本地浏览器的传输协议，可以使浏览器更加高效，使网络传输减少。
HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全...[2020/12/8]
过渡问题，opacity与dispaly的使用
今日做公司的一个展示图，过程中，有一部分用到了：hover来显示。
开始呢就直接通过hover来控制display显示，但自身感觉有点生硬，想着用c 3的过渡来做，让其不在看上去你们生硬 。
项目是vue搭建的，也是用vue语法来写，由于业务逻辑繁琐，以及样式的问题不太好处理这里就不...[2020/12/8]
解决在IDEA中HTML格式化不缩进问题
在IDEA中HTML格式化（快捷键：Ctrl+Alt+L）时默认不缩进。
1.File→Settings
2.Editor→Code Style→HTML
3.Other→Do not indent children of
...[2020/12/8]
如此友好的博客园皮肤，我是怎么做得这么好看的？
简介
由于博主经常浏览「全球最大的同性交友社区：GitHub」，同时又喜欢折腾，所以在「GitHub」上发现了宝藏博客皮肤：awescnb。
这里辛苦原创作者贡献的代码～ ????
安装
搭建教程简单，需要的用户可以安装官网上的文档尝试安装：目前博主已更新安装文档
同时也为了大家省...[2020/12/8]
前端优化的方向
前端优化的四个大方向：
降低请求量：合并资源，减少HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。
缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStor...[2020/12/8]
零基础怎么学习前端
前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而...[2020/12/8]
如何简单美化自己的博客（一）——背景音乐及雪花特效
1、给自己的博客添加背景音乐
打开网易云音乐网页版
搜索自己喜欢的歌曲
点击生成外链播放器（VIP歌曲受版权保护不可生成）
复制编辑器中的代码
将代码中的iframe标签名替换为embed
将更改好的代码放入博客侧边栏公告（需要提前申请JS）
效果如下：
2、给博客页面...[2020/12/8]
博客中css样式的正确设置
一、简介
博客园的文章是支持html代码和c 样式的，即使是markdown写作。当某个标签需要特制样式时，我们可以自定义样式来覆盖掉原本的样式。
二、c 样式优先级
参考至>>菜鸟教程<<
其中最重要的有两点。
①
内联样式 > ID 选择器(#...[2020/12/8]
这个是我的第一个正式的个人博客!这个是我的第一个正式的个人博客!
鸣谢
在这里特别感谢Henry Lin开源的Github样式！瞬间就高大上了很多。
关于这个博客
这个博客的账号是一个现役初三的初中生，样式来自这个现役初三的初中生的同学。
之后，我会在这个博客的基础上，发一些学习、编程等等的东西，希望大家通过各种方式访问我的主页！
你现在所看到的随笔...[2020/11/23]
css类名的使用css类名的使用
`
Document
.box { color: rgba(255, 0, 0, 1) }
.box .box2 { color: rgba(0, 128, 0, 1) }
.box.box2 { color: rgba(255, 192, 203...[2020/11/23]
css: Web Open Font Format
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体设置</title>
<meta name="viewport" conten...[2020/11/23]
DOM节点
语雀链接
（1）文档对象模型DOM
全称：Document Object Model
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）
HTML文档是由节点构成...[2020/11/23]
关于学习html的一点总结
web标准
web标准的构成
主要由结构、表现、行为三个方面组成
标准
说明
结构
结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现
表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是c
行为
行为是指网页模型的定义及交互的编写，现阶...[2020/11/23]
记录博客美化01-添加一个背景音乐
来了博客园已经有一段时间了，一直很想搞搞博客的美化。
但奈何技术水平有限，一直迟迟没有动手，每次看别人家的博客是又美又馋。。。
于是决定了先搞个背景音乐试试
一、登录博客园后台，申请JS代码权限
1.登录博客园后台，点击【设置】
2...[2020/11/23]
详解overflow-scrolling解决滚动卡顿问题_CSS教程_CSS
前言
如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。
解决方法
以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling: touch;...[2020/11/23]
overflow:auto的用法详解_CSS教程_CSS
在开始正文前，我介绍一下overflow和flex布局的某些用法。
overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。
flex中的属性
display: flex;
flex-direction: column; 主轴为垂直方向，起点在上沿。
...[2020/11/23]
Typora代码块配色和标题自带序号的实现代码_CSS教程_CSS
效果：标题自带序号，代码块配色，代码块左上角仿mac图标
先打开主题文件夹
文件>偏好设置>外观>打开主题文件夹
然后编辑base.user.c （如果没有就新建一个）文件
将以下代码加入即可
/*标题自动添加序号*/
.sidebar-con...[2020/11/23]
web页生成条码
<!DOCTYPE html>
<html xmlns="http: www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; char...[2020/11/16]
CSS3变形透视动画 -cyy
使用translate控制元素二维移动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</...[2020/11/16]
CSS3变形透视动画-2 -cyy
网站动态logo制作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>...[2020/11/16]
经验首页