CSS
CSS
弩哥++
这个作者很懒,什么都没留下…
展开
-
移动端H5适配方案 (flexible.js +rem)
一、flexible.jshttps://github.com/amfe/lib-flexible默认把当前屏幕划分10等份二、vscodecssrem插件(把px转换为rem)可以设置font-size大小easy less(保存.less文件后,自动生成对应的.css文件)三、示例//index.less// 当屏幕超过750px时,强制把html字体大小改...原创 2023-07-28 14:23:00 · 172 阅读 · 0 评论 -
媒体查询关键字后必须带空格,否则媒体查询无效
@media screen and (max-width: 768px) { /* 在窗口宽度小于等于768像素时应用的样式 */ ...}但是如果写成这样就无效了#and 后面需要跟上空格@media screen and(max-width:768px){....}...原创 2023-07-26 11:23:00 · 34 阅读 · 0 评论 -
媒体查询—引入资源
一、通俗的理解1.当用户使用不同尺寸的屏幕查看,呈现的样式不同,并且各自的样式比较复杂,那么就可以把不同尺寸样式单独写一个文件,然后使用<link rel="stylesheet" href="">进行引入二、示例例如:当屏幕小于800px,一行只显示一个盒子,屏幕大于等于800px,一行显示两个盒子<!DOCTYPE html><html lang...原创 2023-07-26 15:49:00 · 64 阅读 · 0 评论 -
Pycharm配置less编译生成的css文件到指定目录
一、当前演示项目目录二、标记less文件夹为资源目录不标记其实也不影响三、打开File Watchers(文件监视器)在主菜单中选择 "File"(文件)> "Settings"(设置)(Windows/Linux)或 "PyCharm"(Windows)/ "Preferences"(Mac)或者使用快捷键 "Ctrl + Alt + S"(Windows/Linux...原创 2023-08-03 15:04:00 · 286 阅读 · 0 评论 -
移动端H5不建议直接使用ul li标签而是直接使用a标签的原因有以下几点
性能优化:在移动端,ul li标签会增加DOM节点的数量,导致渲染性能下降。相比之下,直接使用a标签可以减少DOM节点的数量,提升页面加载速度和渲染性能响应式布局:在移动端,页面通常需要适配不同尺寸的设备和屏幕方向。使用ul li标签时,可能需要通过CSS来设置列表项的宽度和排列方式,增加布局的复杂性。而使用a标签可以更灵活地适应响应式布局需求,减少样式的设置和调整交互效果:在移...原创 2023-08-04 09:41:00 · 153 阅读 · 0 评论 -
css旋转木马代码示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*透视*/ body { perspective...原创 2023-07-21 09:45:00 · 65 阅读 · 0 评论 -
icomoon字体图标使用
一、字体图标库第一个是国外的,第二个是阿里的https://icomoon.io/https://www.iconfont.cn/二、icomoon的简单使用登录对应的网站地址选择想要的字体图标生成字体下载的文件icomoon.zip对icomoon.zip文件进行解压,然后把fonts目录,以及css文件,放到对应项目的根目录(可以自行调整)...原创 2023-07-07 14:31:00 · 82 阅读 · 0 评论 -
flex布局入门
一、简介Flexible 单词意思是灵活的意思,flex布局又称为弹性布局或弹性盒子布局Flex布局(Flexible Box Layout)是CSS3引入的一种布局模型,它旨在提供一种灵活且高效的方式来对齐、排列和分布容器中的元素。Flex布局的主要思想是将容器分为主轴和交叉轴(侧轴)。主轴是元素排列的方向,可以是水平方向(从左到右)或垂直方向(从上到下),而交叉轴则与主轴垂直。二、...原创 2023-07-25 10:08:00 · 65 阅读 · 0 评论 -
京东css初始化部分内容
/*清除内外边距*/* { margin: 0; padding: 0}/*em,i原本是斜体,修改为不斜体*/em,i { font-style: normal}/*去除小圆点*/li { list-style: none}/*border:0照顾低版本浏览器,vertical-middle清除图片底部空白缝隙*/img { b...原创 2023-07-10 10:07:00 · 64 阅读 · 0 评论 -
CSS margin属性值不同写法的含义
margin: 0; /* 四个方向的外边距都为0 */margin: 10px; /* 四个方向的外边距都为10像素 */margin: 10px 20px; /* 顶部/底部外边距为10像素,左侧/右侧外边距为20像素 */margin: 10px 20px 30px; /* 顶部外边距为10像素,左侧/右侧外边距为20像素,底部外边距为30像素 */margin: 10px 20...原创 2023-07-25 11:36:00 · 444 阅读 · 0 评论 -
CSS透视与Z轴
一.CSS透视通过模拟人眼的视角来创建三维效果(可以理解为看3D电影,需要借助3D眼镜,这个透视就是让了让网页上产生3D的效果)。我们在现实生活中,当物体远离我们时,会看到它们变小变远。透视效果就是基于这个原理。二.改变透视视与改变z轴的不同(一)、改变透视改变透视相当于主动挪动眼睛,调整眼睛与屏幕的距离,所以透视数值越大相当于眼睛远离物体,物体越小(二)、改变Z轴改变Z轴相当于主动挪...原创 2023-07-19 11:56:00 · 94 阅读 · 0 评论 -
display:none 与visibility:hidden 区别
先说结论display:none 不占用位置,visibility:hidden 会占用位置看图原创 2023-07-09 17:30:00 · 47 阅读 · 0 评论 -
两面盒子翻转(backface-visibility)
一、使用CSS3 3D翻转2面盒子,始终不显示底部的盒子,最后查询得知是需要加上backface-visibility属性Backface-visibility是一个CSS属性,用于指定元素背面的可见性。当一个元素在3D空间中旋转或倾斜时,它的背面有时会显示出来。默认情况下,背面是可见的,即使它在视觉上被其他元素遮挡了。通过使用backface-visibility属性,可以控制...原创 2023-07-20 11:09:00 · 243 阅读 · 0 评论 -
input伪类focus边框颜色没有生效问题记录
想要实现的效果如下#html <div class="txt"> <input type="text" class="search" placeholder=" 空调"> <ul class="result-list"> <li><a h...原创 2023-07-04 18:22:00 · 207 阅读 · 0 评论