随笔分类 -  css

移动端H5不建议直接使用ul li标签而是直接使用a标签的原因有以下几点
摘要：+ 性能优化：在移动端，ul li标签会增加DOM节点的数量，导致渲染性能下降。相比之下，直接使用a标签可以减少DOM节点的数量，提升页面加载速度和渲染性能 + 响应式布局：在移动端，页面通常需要适配不同尺寸的设备和屏幕方向。使用ul li标签时，可能需要通过CSS来设置列表项的宽度和排列方式，增加 阅读全文
posted @ 2023-08-04 09:40 弩哥++ 阅读(46) 评论(0) 推荐(0) 编辑
Pycharm配置less编译生成的css文件到指定目录
摘要：### 一、当前演示项目目录 ![image](https://img2023.cnblogs.com/blog/2408012/202308/2408012-20230803144116153-1864328444.png) ### 二、标记less文件夹为资源目录 > 不标记其实也不影响 ![i 阅读全文
posted @ 2023-08-03 15:04 弩哥++ 阅读(114) 评论(0) 推荐(0) 编辑
移动端H5适配方案 (flexible.js +rem)
摘要：### 一、flexible.js https://github.com/amfe/lib-flexible 默认把当前屏幕划分10等份 ### 二、vscode + cssrem插件（把px转换为rem） + 可以设置font-size大小 ![image](https://img2023.cnb 阅读全文
posted @ 2023-07-28 14:23 弩哥++ 阅读(221) 评论(0) 推荐(0) 编辑
媒体查询—引入资源
摘要：### 一、通俗的理解 > 1.当用户使用不同尺寸的屏幕查看，呈现的样式不同，并且各自的样式比较复杂，那么就可以把不同尺寸样式单独写一个文件，然后使用 \进行引入 ### 二、示例 例如：当屏幕小于800px，一行只显示一个盒子，屏幕大于等于800px，一行显示两个盒子 ``` 媒体查询-引入资源 阅读全文
posted @ 2023-07-26 15:48 弩哥++ 阅读(13) 评论(0) 推荐(0) 编辑
媒体查询关键字后必须带空格，否则媒体查询无效
摘要：``` @media screen and (max-width: 768px) { /* 在窗口宽度小于等于768像素时应用的样式 */ ... } ``` #### 但是如果写成这样就无效了 ``` #and 后面需要跟上空格 @media screen and(max-width:768px) 阅读全文
posted @ 2023-07-26 11:23 弩哥++ 阅读(6) 评论(0) 推荐(0) 编辑
CSS margin属性值不同写法的含义
摘要：+ margin: 0; /* 四个方向的外边距都为0 */ + margin: 10px; /* 四个方向的外边距都为10像素 */ + margin: 10px 20px; /* 顶部/底部外边距为10像素，左侧/右侧外边距为20像素 */ + margin: 10px 20px 30px; / 阅读全文
posted @ 2023-07-25 11:35 弩哥++ 阅读(11) 评论(0) 推荐(0) 编辑
flex布局入门
摘要：### 一、简介 > **Flexible 单词意思是灵活的意思，flex布局又称为弹性布局或弹性盒子布局** Flex布局（Flexible Box Layout）是CSS3引入的一种布局模型，它旨在提供一种灵活且高效的方式来对齐、排列和分布容器中的元素。Flex布局的主要思想是将容器分为主轴和交 阅读全文
posted @ 2023-07-25 10:08 弩哥++ 阅读(112) 评论(0) 推荐(1) 编辑
css旋转木马代码示例
摘要：``` Title ``` 阅读全文
posted @ 2023-07-21 09:44 弩哥++ 阅读(75) 评论(0) 推荐(0) 编辑
两面盒子翻转（backface-visibility）
摘要：### 一、使用CSS3 3D翻转2面盒子，始终不显示底部的盒子，最后查询得知是需要加上backface-visibility属性 >Backface-visibility是一个CSS属性，用于指定元素背面的可见性。 >当一个元素在3D空间中旋转或倾斜时，它的背面有时会显示出来。默认情况下，背面是可 阅读全文
posted @ 2023-07-20 11:09 弩哥++ 阅读(200) 评论(0) 推荐(0) 编辑
CSS透视与Z轴
摘要：一.CSS透视通过模拟人眼的视角来创建三维效果（可以理解为看3D电影，需要借助3D眼镜，这个透视就是让了让网页上产生3D的效果）。我们在现实生活中，当物体远离我们时，会看到它们变小变远。透视效果就是基于这个原理。 ![image](https://img2023.cnblogs.com/blog/2 阅读全文
posted @ 2023-07-19 11:56 弩哥++ 阅读(45) 评论(0) 推荐(0) 编辑
京东css初始化部分内容
摘要：``` /*清除内外边距*/ * { margin: 0; padding: 0 } /*em,i原本是斜体，修改为不斜体*/ em,i { font-style: normal } /*去除小圆点*/ li { list-style: none } /*border：0照顾低版本浏览器，verti 阅读全文
posted @ 2023-07-10 10:06 弩哥++ 阅读(17) 评论(0) 推荐(0) 编辑
display:none 与visibility:hidden 区别
摘要：### 先说结论 > display:none 不占用位置，visibility:hidden 会占用位置 ### 看图 ![image](https://img2023.cnblogs.com/blog/2408012/202307/2408012-20230709173014958-203291 阅读全文
posted @ 2023-07-09 17:30 弩哥++ 阅读(8) 评论(0) 推荐(0) 编辑
icomoon字体图标使用
摘要：### 一、字体图标库 > 第一个是国外的，第二个是阿里的 + https://icomoon.io/ + https://www.iconfont.cn/ ### 二、icomoon的简单使用 + 登录对应的网站地址 + 选择想要的字体图标 ![image](https://img2023.cnb 阅读全文
posted @ 2023-07-07 14:31 弩哥++ 阅读(82) 评论(0) 推荐(0) 编辑
input伪类focus边框颜色没有生效问题记录
摘要：+ 想要实现的效果如下 ![image](https://img2023.cnblogs.com/blog/2408012/202307/2408012-20230704181507490-803785094.png) ``` #html 全部商品 redmi k60e 空调 冰箱 手机 洗衣机 耳 阅读全文
posted @ 2023-07-04 18:21 弩哥++ 阅读(154) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示