css
&Mark&
这个作者很懒,什么都没留下…
展开
-
offsetWidth、clientWidth、scrollWidth三者的区别
scroll系列client可视区JS中~立即执行函数offsetWidth、clientWidth、scrollWidth三者的区别原创 2022-05-08 14:07:06 · 635 阅读 · 0 评论 -
JS中~ flexible.js分析
flexible.js分析原创 2022-05-08 13:58:15 · 1410 阅读 · 0 评论 -
JS制作~淘宝固定侧边栏
JS制作~淘宝固定侧边栏原创 2022-05-08 13:56:59 · 443 阅读 · 0 评论 -
弹性布局中flex子项属性
flex布局子项常见属性1、flex子项目占的份数2、align-self控制子项自己在侧轴上的排列方式3、利用order属性定义项目的排列顺序4、flex页面布局开发(携程网)2、背景颜色的线性渐变:原创 2022-04-10 12:35:13 · 2386 阅读 · 0 评论 -
html+css弹性布局
1、布局原理2、flex布局父项常见属性1、flex-direction(名)设置主轴的方向2、justify-content(名)设置子元素在主轴上的方向3、flex-wrap(名)设置子元素是否换行4、align-items设置侧轴子元素的排列方式(单行)5、align-content设置侧轴子元素的排列方式(多行)6、区分align-items与align-content属性的区别7、区分justify-content、align-items、align-content区别;原创 2022-04-10 11:49:52 · 822 阅读 · 0 评论 -
移动端HTML开发(模仿京东移动端)
1、对于body特殊设置解释;2、对于图片水平居中设定,在父元素中统一设定为text-align=center;line-height=盒子大小;3、当多张图片在一起的时候会存在图片基线对齐的情况,解决方法利用;4、外边距合并问题解决方法:当子盒和父盒贴在一起我们给子盒子设定外边距会存在父盒子被合并在一起依旧贴一起且将父盒子的外边距加大(此原因也称外边距塌陷);5、流式布局搜索框技巧6、给图片设置圆角边框办法7、流失布局盒子设置方法原创 2022-04-03 22:23:04 · 5649 阅读 · 1 评论 -
JS实现静态计算器(刷新自动更新数值)页面制作与问题总结
1、JS实现静态计算器(刷新自动更新数值)页面制作与问题总结2、JS总结:在函数中对一组数据输出3、计时器的输出存在问题,变量调用无效,实际上css样式存在问题导致变量无法正常显示。4、HTML在两个div之间会存在间隙:5、HTML给页面一个背景阴影6、盒子的重叠用定位解决·原创 2022-04-01 09:16:44 · 793 阅读 · 0 评论 -
奔跑的熊大动画效果JS
利用动画去尝试制作相应的动画效果熊的制作思路在于:图片添加了动画效果,在时间范围内渐动改变,关键帧一直在改变,图片被往前拉熊展现奔跑的效果熊奔跑的制作思路:基础效果盒子移动到水平居中的位置,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">.原创 2022-02-17 13:29:47 · 600 阅读 · 0 评论 -
大数据热点分析图源码
<style> body{ background-color: #333; } .map{ position: relative; width: 746px; height: 617px; margin: 30px auto; background: url(../images/map.png...原创 2022-02-16 14:18:00 · 1563 阅读 · 0 评论 -
动画( animation ) (日志)
动画( animation ) 是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。一、动画的基本使用制作动画分为两步:1.先定义动画2.再使用(调用动画)1.用keyframes定义动画(类似定义类选择器)keyframes 动画名称{0%{width : 100px;}100%{wid...原创 2022-02-16 14:17:01 · 417 阅读 · 0 评论 -
2D转换总结(日志)
转换transform 我们简单理解就是变形有2D和3D之分我们暂且学了三个分别是位移旋转和缩放 2D移动translate(x, y)最大的优势是不影响其他盒子,里面参数用%,是相对于自身宽度和高度来计算的可以分开写比如translateX(x)和translateY(y) 2D旋转rotate(度数)可以实现旋转元素度数的单位是deg 2D缩放sacle(x,y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子设置转换中心点transfdim-origin : x y;参数可以百分比、像素原创 2022-02-16 09:44:02 · 182 阅读 · 0 评论 -
2D转换综合写法(笔记)
注意∶1.同时使用多个转换,其格式为: transform:translate() rotate() scale() ...等,2.其顺序会影转换的效果。(先旋转会改变坐标轴方向)3.当我们同时有位移和其他属性的时候,记得要将位移放到最前,顺序不能岁随意更改否则效果无法展示 <style> div{ width: 100px; height: 100px; background-col.原创 2022-02-16 09:41:28 · 290 阅读 · 0 评论