Gray-Ice

CSS绘制桃心

先看图吧。那么先说一下具体逻辑，就是先弄一个正方形，然后弄两个直径等于这个正方形边长的圆形，之后一个圆的圆心放在与正方形左下角垂直的地方，一个圆的圆心放在与正方形右上角垂直的地方。那么来看代码吧。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535...

2021-07-06 blog前端

CSS正方体嵌套正方体

先看效果图。额，，，虽然这个效果图看着不咋地，但这是因为我的配色的原因，实际上配好色还是很好看的。。。那么先说都用到了什么操作吧，首先是CSS3，然后。。额，好像没有然后了，我这里只用了CSS3(憋说还有HTML)。那么先讲一下用到了CSS3中的哪些操作吧，首先呢，用到了透视，然后用到了3d，用到的3d中包括了x, y, z轴的旋转。接下来讲一下具体的逻辑，因为我会一次性放上所有代码...

2021-07-02 blog前端

CSS毛玻璃特效

参考链接: CSS3：毛玻璃效果 –LXEP。写下这篇博客的时候博主是相当懵比的，因为想不通为什么可以这样实现。但是这不妨碍把代码记下来。那么我们先看效果图: 下面是实现的代码(图片请自备): 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849<!DOCT...

2021-06-29 blog前端

GRID布局

本篇博客简略记录一下Grid布局的使用。博主本人为前端菜鸡，不建议想通过本篇博文习得高深知识的朋友观看。 GRID首先介绍一下Grid是什么，因博主本人没文化，只能说这东西是个网格，其具体特性是网格中的每个单元格都可以控制大小，比如在一个3x3的网格中，你可以让某个单元格为2x2，也可以让某个单元格1x2，等。只说这些难免让人感到懵比，所以下面讲一些使用方法。创建网格创建一个3*3的网格...

2021-06-28 blog前端

使元素垂直水平居中的三种方法

之前一直只知道如果要使div居中，需要添加宽和高并且margin 0 auto，今天看大佬的css3教程，发现了比较妙的方法。利用Flex来使元素垂直水平居中这个方法仅适用于父元素里只有一个子元素的情况(如果子元素是绝对定位的当我没说)。代码如下:html: 12345678910111213141516<!DOCTYPE html><html lang="zh...

2021-05-21 blog前端

JS添加右键菜单

先看效果图(我没有做美化，简陋了亿点点)。然后我先讲解一下大概的逻辑: 在用户右键时，获取其右键的位置，然后在用户右键的位置展示出右键菜单。在用户左键时，关闭右键菜单。在用户右键的位置展示出右键菜单这一步很简单，只需要添加一个绝对定位的盒子，然后将这个盒子移动到右键的位置即可。那么请看代码: 123456789101112<!DOCTYPE html><html lang=...

2021-05-10 blogJavaScript前端

防止子元素浮动导致父元素变化

因为浮动会导致元素脱离标准流，导致其父元素出现一些看上去比较异常的现象。所以这里是几种防止浮动导致父元素表现异常的方法。额外标签法其实就是在容纳浮动的容器的最后添加一个具有clear属性的块级元素，如: 123456789<div id="main_d"> <div id="hd_box"> <div...

2021-04-29 blog前端