![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
css的各种资料
Start_t
这个作者很懒,什么都没留下…
展开
-
css3实现动态心电图折线
这与一些其他图形系统(例如笛卡尔坐标系)的约定是不同的。因此,如果你在SVG中绘制直线并觉得。了,可能是因为你在使用笛卡尔坐标系的思维方式时感到困惑。Y轴的正方向是向下的。原创 2023-12-13 17:25:13 · 862 阅读 · 1 评论 -
自定义滚动条样式
自定义滚动条样式自定义滚动条样式: // 滚动条的长度和宽度 &::-webkit-scrollbar { width: 6px; height: 4px; } // 设置滚动条的圆角属性和背景颜色 &::-webkit-scrollbar-thumb { border-radius: 5px; background: rgba(#999,0.6); } // 滚轮的滚槽原创 2020-07-14 12:03:10 · 183 阅读 · 1 评论 -
响应式布局---适配不同页面下的font-size
响应式布局---适配不同页面下的font-size当我们要适配各个页面时,始终用一个font-size总是在字体大小方面会有问题,那么我们可以在不同的分辨率下设置不同的font-size下面是我的rem.js的代码// 基准大小const baseSize = 32// 设置 rem 函数function setRem () { if (document.documentElement.clientWidth > 1024){ // 当前页面宽度相对于 750 宽的缩放比例,可原创 2020-07-13 12:09:05 · 553 阅读 · 0 评论 -
移动端Footer部分
移动端Footer部分注意:移动端首先要对字体进行换算,下面有两种方法1. html{font-size: 13.3333vw;} /* 100 除以 设计图 的百分之一 (vw) */ eg:设计图为750px,则100÷750=13.8888,此时100px=1rem,14px=.14rem2. html{font-size: 62.5% ;} /* 10 除以 字体的大小 ,10÷...原创 2020-05-05 21:30:11 · 492 阅读 · 0 评论 -
css动画——3D效果
css动画——3D效果一、3D转换3D翻转方法rotate3D位移translate3D视距perspective3D转换(3D缩放翻转)scaleZ二、3D动画创建动画 @keyframes动画属性animation案例Internet Explorer 10 和Firefox 支持3D,Chrome和Safari需要-webkit-,Opera和ie9仍然不支持3D转换它只支持2D转换一、...原创 2020-02-24 20:42:48 · 489 阅读 · 0 评论 -
css动画——2D效果
css动画效果一、动画过渡transition定义过度属性(跟数值变化有关的才能写)定义过度时间延迟多少时间开始过度的变化速度二、2D转换transformtranslate() 移动rotate() 旋转scale() 缩放skew() 倾斜matrix() 合体写法(矩阵)三、渐变线性渐变linear-gradient(方向[可选],颜色1,颜色2)径向渐变radial-gradie...原创 2020-02-24 16:35:12 · 403 阅读 · 0 评论 -
单/双飞布局、圣杯布局
css实现各布局1.单飞布局2.单双飞布局3.双飞布局(圣杯布局)4.真圣杯布局1.单飞布局左边的宽度为固定的,右边的宽度需减去左边的宽度缺点:下边会有滚轮,不建议采用(但有另外一种方法,就是将box2改为.box2{ width:100%-200px; height:100%; background:#ff0; margin-left:200px;},这样不论放大缩小都不会有滚轮出现)&...原创 2019-12-02 22:03:30 · 404 阅读 · 0 评论 -
弹性盒布局
弹性盒布局1.主轴横向对齐(设置在父类容器上)justify-content1.1 justify-content:space-around 分开左右边距对齐1.2 justify-content:space-between 分开对齐1.3 justify-content:center 居中对齐1.4 justify-content:flex-end 结束对齐1.5 justify-content...原创 2019-12-02 23:33:29 · 283 阅读 · 0 评论 -
H5与以往的区别
H5与以往的区别H5与以往的对比H5的css3选择器H5与以往的对比1.更简单2.标签的语义化3.语法更宽松4.多设备跨平台5.自适应网页设计H5文档类型的声明< !DOCTYPE html >H5语义化标签< header >头标签< nav >导航标签< section >表示文档的结构、栏目< foot...原创 2020-02-19 16:32:00 · 571 阅读 · 0 评论 -
清除浮动的方法
清除浮动的方法1.overflow:hidden2.clear:both 在最后面加一个空元素3.利用伪元素 :after4.display:table5.父级一起浮动//--------样式--------<style> .box{border:5px solid #000; width:500px;} .left{ float:left; background:#00f; ...原创 2020-02-19 17:17:04 · 127 阅读 · 0 评论 -
css实现轮播效果
css实现轮播效果<!doctype html><html><head><meta charset="utf-8"><title>css实现轮播效果</title><style type="text/css">.box{width:500px;height:375px; border:1px sol...原创 2020-02-10 15:42:08 · 143 阅读 · 0 评论 -
用CSS实现三角形
用CSS实现三角形1.2.3.4.1.//css样式 .box1{ width:0px; height:0px; border-bottom:10px solid #FFF; border-right:10px solid #f0f; border-left:10px solid #0f0; border-top:10px solid #FFF;}}//body中的元素 <...原创 2019-12-02 21:39:22 · 80 阅读 · 0 评论 -
CSS五种居中方法
CSS五种居中方法1.方法一通过写一个标签,i标签的高度为百分之百,让i标签的中点和要居中元素的中点处在同一位置<!doctype html><html> <head> <meta charset="utf-8"> <title>五大居中1</title> <style> *{margi...原创 2019-12-02 21:16:55 · 1623 阅读 · 0 评论