随笔分类 - CSS
摘要：<script> $(document).ready(function() { var div = $('#leftNav_2024925'); // 替换为你的 div 的 ID var divTop = div.offset().top; // 获取 div 顶部的位置 $(window).sc
阅读全文
摘要：项目地址： https://github.com/holiday0912/SwiperPreView var swiper = new Swiper(".swiper-container", { autoplay: false, loop: true, initialSlide: 2, spaceB
阅读全文
摘要：1. 打开Visual Studio Code 2. 安装 Easy LESS 已经全局使用 3. 直接新建一个index.less，后缀名是less的文件，他会自动编译在同目录生成index.css文件
阅读全文
摘要：html <input class="red-input" type="checkbox" /> <!-- Radio button example --> <input class="red-input" type="radio" /> css .red-input { accent-color:
阅读全文
摘要：1.如果想把箭头变成自己的，就直接在里面添加标签i <div class="swiper-button-prev" slot="button-prev"> <i class="iconfont icon-zuojiantou"></i> </div> <div class="swiper-butto
阅读全文
摘要：响应式网站概念 viewport 视口 1.响应式网站概念 1.flexible grid layout 弹性网格布局 2.flexible image 弹性图片 3. media queries 媒体查询 2.viewport 视口 <meta name="viewport" content="w
阅读全文
摘要：1.CSS设置成 position:static 默认状态，只要top，不要设置left,和right 2.滚动到顶部的时候变成 position:fixed,再弄margin-left,把他往左边顶过来，自己计算，切记，不要设置left和right. 3.这一块的父元素要设置position:re
阅读全文
摘要：转：https://blog.51cto.com/u_15351691/3732659 效果图： <html> <head> <style> /* top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 */ /* transform:translate(-50%,-50%);
阅读全文
摘要：来源：http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=2617 版本：swiper4 演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>每日优
阅读全文
摘要：代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scal
阅读全文
摘要：::-webkit-scrollbar { width: 10px; height: 10px; } /* Track */ ::-webkit-scrollbar-track { background: rgb(255, 255, 255); border-radius: 8px; } /* Ha
阅读全文
摘要：我们生活的环境是3D的，照片就是3D物体在2D平面显示的例子 主要知识点： 3D位移：translate3d(x,y,z) 3D旋转:rotate3d(x,y,z) 透视：perspective 3D呈现:transfrom-style 1. 3D移动translate3D 3D移动在2D移动的基础
阅读全文
摘要：转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果 转换（transform）可以简单理解为变形 移动：translate 旋转：rotate 缩放：scale 1.移动 1. 1 二维左边系 2D转换是改变标签在二维上的位置和形状的一种技术，先学习二维
阅读全文
摘要：rem适配方案 1.让一些不能等比自适应得元素，达到当设备尺寸发生改变得时候，等比例适配当前设备。 2.使用媒体查询根据不同设备按比例设置html得字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化尺寸也发生变化，从而达到等比例得适配。 按照设计稿与设备宽度的比例，动态计算并设置ht
阅读全文
摘要：搭建环境有2种 一种是在编译器使用，比如vscode中的live Sass Compiler 一种是在node中下载包搭建 下面是记录node搭建的记录 要有node环境 1. 先建立一个文件夹 sass-easy 不要管dist这些文件和src这些，这些都是后面弄好了，再回来截图的，一开始就是一个
阅读全文
摘要：案例 1. 直接使用了margin-left:-1px; 鼠标放上去显示4个边框。 1. 如果盒子没有定位，则鼠标经过添加相对定位即可 2.如果经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位），如果有定位，则加z-index 行内块元素
阅读全文
摘要：CSS用户界面样式 什么是界面样式 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。 更改用户的鼠标样式 表单轮廓 防止表单域拖拽 1. 鼠标样式 cursor 2. 轮廓线 outline 给表单添加outline:();或者outline:none; 样式之后，就可以去去掉默认
阅读全文
摘要：案例，我们要做这种效果 图片浮动 文字围绕
阅读全文
摘要：浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的。 但是，所有的父盒子都必须有高度吗？ 理想中的状态，让子盒子撑开父亲，有多少孩子，我父盒子就有多高。 但是不给父盒子高度会有问题吗？ 有的，父元素的高度会变成0 很多父盒子不方便加高度的 1. 为什么需要清除浮动 由于父盒子很多情况下
阅读全文
摘要：1.在swiper中，如果不在swiper-slide的div中加上下面是会出现切换的时候闪过几张图片的问题的 display: flex;justify-content: center;align-items: center; 2.再外层的CSS要给 position: relative;属性。m
阅读全文
