![](https://img-blog.csdnimg.cn/f1596a3de1184dc4b5cc49f42ffd1743.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
css
DB_鸠
Barry,gogogo!草莓,gogogo!
展开
-
Css3新布局---Grid网格
网格布局是css3中新增加的一种布局方式,比flex更加强大。flex属于一维布局,对于高度不能灵活控制。grid网格布局是二维布局,通过行和列来分配网页空间。通过下面这个小游戏可以简单体会到网格布局的强大。...原创 2022-08-02 22:39:40 · 2421 阅读 · 1 评论 -
页面适配方案
rem 是一个相对单位,1rem 就是 html 文字的大小比如1.2 flexible.js1.2.1 作用通过js 实时检测屏幕窗口的变化实现检测视口宽度。这个js把页面分为10等分,也可以修改源码改为任意等份,移动端一般分为10份,网页端分为24份复制走就可以用2. vw/vh2.1 定义vh和vw也是css的单位不管在什么屏幕下, 我们把屏幕分为平均的 100等份。rem是相对于根元素,要做到适配需要媒体查询或者flexible.js。vh和vw更方便,始终适应屏幕。使用less文件或原创 2022-07-12 17:34:26 · 785 阅读 · 1 评论 -
css-绘制平行四边形
最近打算用vue仿制一个游戏的页面其中的一个场景如下大概的思路是使用position:fixed固定角落的按钮使用flex布局制作章节选择难度在于如何绘制平行四边形的盒子,还要保证背景图不会倾斜1.rotate最初的想法是通过旋转+隐藏超出部分的方法来制作,在操作过程中发现很麻烦,而且做出来并不美观,会出现很多布局上的问题。2....原创 2022-04-10 22:19:03 · 3005 阅读 · 2 评论 -
flex+vh制作B站移动端首页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>仿制bilibili.原创 2022-04-07 07:59:33 · 517 阅读 · 0 评论 -
CSS-移动适配
1.适配方案使用flex布局控制盒子位置,使用rem或vhvw控制盒子大小2.remrem 是一个相对单位,1rem 就是 html 文字的大小html { font-size: 35px;}此时1rem就是35px3.媒体查询可以自动检测视口的宽度,根据不同的视口宽度, 设置不同的根字号 ,就完成了适配@media (width:375px) { html { font-size: 40px; }}@media (widt原创 2022-04-05 19:53:24 · 260 阅读 · 0 评论 -
css-移动端特点
分辨率分辨率有两种——物理分辨率和逻辑分辨率物理分辨率由硬件决定,无法改变逻辑分辨率是软件能达到的最大分辨率,二倍图视口原创 2022-03-31 16:18:55 · 954 阅读 · 0 评论 -
css-动画
关键帧动画定义@keyframes name{ from{} to{}}@keyframes name{ 0% {} 10% {} 50% {} 100% {}}使用animation: name time原创 2022-03-30 19:25:06 · 64 阅读 · 0 评论 -
css-空间转换
1.translate语法transform: translate3d(x,y,z);transform: translateX(x);transform: translateY(y);transform: translateZ(z);数值的取值可正可负 , 可以是具体的像素,也可以是相对自身的百分比拉动盒子时,盒子的轴不会变透视 perspective透视就是眼睛距离屏幕的距离为父元素添加属性perspective: d;这样可以让z坐标的移动生效原创 2022-03-30 08:02:02 · 80 阅读 · 0 评论 -
css-平面转换
1.translate位移 语法transform:translate(x,y);transform:translateX(x);transform:translateY(y); 与margin区别#margin会影响页面的布局#transfrom只是让视图的位置移动,盒子位置不变原创 2022-03-29 09:01:38 · 70 阅读 · 0 评论 -
css-字体图标
1.字体图标看上去是图标,实际上是一种字体文件2.使用方法#本地引用#在线引用 注意复制地址前jia'sh原创 2022-03-28 16:44:20 · 61 阅读 · 0 评论