- 博客(55)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 css制作旋转图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.
2021-10-20 17:05:02
177
1
原创 定位position
文章目录为什么要学习定位定位组成定位模式静态定位（了解）相对定位 relative（重要）绝对定位 absolute（重要）固定定位 fixed（重要）粘性定位 sticky（了解）边偏移绝对定位和相对定位使用场景子绝父相的由来固定定位小技巧：固定在版心右侧位置定位的总结定位叠放次序 z-index绝对定位的盒子居中算法定位特殊特性绝对定位（固定定位）会完全压住盒子为什么要学习定位以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以:1．浮动可以让多个块级盒子一行没有缝隙排列显示，经
2021-10-19 11:13:29
256
原创 学成在线案例
案例的全部图片和代码资源在这（0积分下载的）：点击跳转准备素材和工具学成在线PSD源文件开发工具=PS（切图）/cutterman插件+vscode（代码）+Chrome（测试）。准备工作采用结构和样式相分离思想：创建stydy目录文件夹（用于存放我们这个页面的相关内容）。用vscode打开这个目录文件夹。stydy目录内新建images文件夹，用于保存图片。新建首页文件index.html（以后我们的网站首页统一规定为index.html)。新建sytle.css样式文件。我们
2021-09-28 15:08:42
347
2
原创 css清除浮动
为什么要清除浮动很多浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的。但是，所有的父盒子都必须有高度吗？理想中的状态，让子盒子撑开父盒子。有多少孩子，父盒子就有多高。由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响所以得清除浮动。清除浮动本质● 清除浮动的本质是清除浮动元素造成的影响● 如果父盒子本身有高度，则不需要清除浮动● 清除
2021-09-28 11:36:24
131
3
原创 清除内外边距
为什么要清除默认的内外边距。网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除下网页元素的内外边距。方法* { padding: 0; margin: 0;}注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e
2021-09-28 09:21:06
1645
原创 外边距合并-嵌套块元素坍陷
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有外边距，此时父元素会坍陷较大的外边距值。这说的是啥？？？下面看看例子吧。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
2021-09-28 09:12:21
108
原创 外边距合并-相邻块元素垂直外边距
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。当上下相邻的两个块元素（兄弟关系） 相遇时，如果上面的块元素定义了 margin-bottom下面的块元素定义了 margin-top 时，就会出现垂直外边距合并。注意：这里的合并，并不是两个值相加。而是取这两个值的最大值。例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta
2021-09-27 14:52:24
439
原创 外边距典型应用-块级盒子水平居中
外边距让块级盒子水平居中，必须满足两个条件：盒子必须指定了 宽度（width）。盒子 左右的外边距 都设置为 auto。常见的写法，一下三中都可以：● margin: 0 auto;(最常用）● margin-left:auto; margin-right:auto;● margin:auto;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
2021-09-27 14:33:09
148
原创 padding会影响盒子实际大小
先上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum
2021-09-27 14:28:00
527
原创 边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决：测量盒子大小的时候，不量边框。如果测量的时候包含了边框，则需要width/height减去边框宽度例子：要求：我需要一个100*100的盒子，边框为5px设计：宽（width）：100-52 = 90px高（height）：100-52 = 90px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
2021-09-27 14:19:03
705
原创 表格细线边框
效果图HTML部分<body> <table cellspacing="0" align="center"> <thead> <tr> <th>交易日期</th> <th>市场类别</th> <th>本日融资余额(元)</th> <th>本日融资买入额(元)</th>
2021-09-14 16:58:42
150
原创 盒子模型边框border
语法简写：border：border-width || border-style || border-color，没有顺序。不过一般是按这样写。写border的话是四边都有边框，要指定哪边的话，加上-top，-right，-bottom，-left。属性作用border-width边框粗细，单位：pxborder-style样式border-color颜色border-style，主要记住三个值就好，分别是：solid（实线边框）、dashed（虚线边框）、
2021-09-14 14:34:20
133
原创 盒子模型组成
css盒子模型本质上时一个盒子，封装html元素，它包括：边框（border）、外边距（margin）、内边距（padding）、和实际内容（content）
2021-09-14 10:53:04
74
原创 css权重的叠加
如果是复合选择器，则会有权重叠加，需要计算权重。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-09-13 21:14:06
217
原创 css三大特性
层叠性、继承性、优先级层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则：就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠<style> div { background-color: blue; width: 100px; height: 100px; } div { background-color: red;
2021-09-13 09:21:39
82
原创 设置盒子背景色透明度
background: rgba(red,green,blue,alpha)前三个值就是填rgb的三个值，最后一个值alpha填透明度：0~10是全透明，1是完全不透明效果是盒子可以透明，字不会受影响。 <style> body { background-image: url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210908/78624200846891.png); } div
2021-09-12 18:42:02
5670
原创 css背景位置
精确单位background-position：x yx：水平y：垂直方位名词若是x,y使用英文的话,x可以是水平，也可以是垂直如background-position: center top既可以说是水平居中，垂直靠上也可以说是垂直居中，水平靠上它和background-position: top center 的效果是一样的混合单位精确单位和方位名词混合使用的时候，第一个值是x水平方向的，第二值是y垂直方向的如： background-position: 80px cen
2021-09-12 13:46:42
150
原创 css-背景
背景颜色视频讲解：点击跳转语法：background-color: transparent或着colortransparent: 背景色透明color：指定颜色背景图片视频讲解：点击跳转背景平铺视频讲解：点击跳转用上background-repeat: no-repeat就可以解决了背景位置-方位名词视频讲解：点击跳转background-position...
2021-09-12 13:33:12
60
原创 元素显示模式的转换
这是就把改为块元素变为块元素：display：block变为行元素display: inline但是由于行元素是不能设置宽度和高度的所以转变为行元素时，宽度和高度不能自定义变为行内块元素display: line-block
2021-09-12 13:25:01
56
原创 Emment语法快速生成css样式
tac 加tab 变成text-align：center ti 加tab 变成text-indent：w100 加tab 变成 width：100pxh100 加tablh26 加tab 变成line-height：26pxtdn 加tab 变成text-decoration：none
2021-09-12 13:19:50
94
原创 Emmet语法生成html标签
!加tab，生成html骨架div 加 tab 等等div*3 加 tab 等等父子 ul>li 加tab 等等兄弟 div+p 加tab 等等.demo 加tab 等等#two 加tab 等等.demo$5 加tab 等等#demo$5 加tab 等等div{你好} 加tab 等等div{你好}*5 加tab 等等div{$}*5 加tab 等等...
2021-09-12 13:16:15
64
原创 组件之间的通讯
1.父组件给子组件传递数据效果图我圈的大圈是子组件，Hello是父组件传过来的，从下面这张图可以知道我的子组件test.vue里的data没有title这个数据。实现步骤：先在父组件index.vue把title数据传给子组件test.vue我已经在父组件注册好了子组件Test，直接在标签里用 :title=“title"就可以吧title数据传给子组件了，第一个title是在子组件用的时候的名称，”:“就是"v-bind”，没有用的话，只会把字符串“title”传给子组件，就不会把tit
2021-09-11 22:18:50
78
原创 组件的创建和简单使用
效果图代码创建一个components文件夹和一个test.vue文件test.vue要在pages.json配置好在test.vue里写点最简单的东西在index.vue里引入test.vue并在index.vue里注册好组件最后一步：使用组件ok详细见vue组件使用官网：https://uniapp.dcloud.io/vue-components...
2021-09-11 21:25:48
117
原创 uni-app-页面跳转-uni.switchTab()
uni.switchTab()跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。效果图点击按钮后代码先写个按钮，并监听点击写点击事件uni.switchTab()必须包含urlok官网：https://uniapp.dcloud.io/api/router?id=switchtab...
2021-09-02 11:11:39
4054
1
原创 uni-app-页面跳转-uni.navigateTo
uni.navigateTo()保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。效果图点击按钮后代码先写个点击跳转事件按钮然后再methods写跳转事件，用到uni.navigateTo()，必填的是urlok...
2021-09-02 11:06:21
797
原创 uni-app-页面跳转-navigator
效果图点击第一个button点击第二个button代码用navigator标签来跳转，用url来指定跳转路径这里的url得注意的地方：应用内的跳转链接，值为相对路径或绝对路径，如："…/first/first"，"/pages/first/first"，注意不能加 .vue 后缀第二个跳转因为我的message页面是tabbar页面，所以得加上 open-type=“switchTab”。否则会报错，实现不了跳转功能。ok官网：https://uniapp.dcloud.io/
2021-09-01 10:15:47
1260
原创 uni-app-条件编译跨端兼容
效果图H5微信小程序代码开始，在注释里写 #ifdef 平台值结束，在注释里写 #endifok官网：https://uniapp.dcloud.io/platform?id=preprocessor
2021-08-30 20:15:53
75
原创 uni-app-图片的预览-previewImage
效果图点击第一张图鼠标点住向右移动代码上传图片我这里就不说了因为预览图片是要先点击图片的，所以在图片那写个点击预览事件，这里顺便把图片路径item当作参数传给事件。用current接收参数item，用uni.previewimge来实现预览功能，基本用两个参数（current和urls）就可以了。current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。这里的current我用了图片链接item。current:current 因为两个单词一样，所
2021-08-30 20:13:11
5291
4
原创 uni-app-图片的上传-uni.chooseImage
效果图代码先写个点击上传按钮然后写methods，用uni.chooseImage来实现上传，上传成功后，先打印出得到的res，然后看看图片路径在哪里出现以便吧图片路径写入imgArr数组里。所以图片路径是在res的tempFilePaths里写个data把图片路径存起来，我用imgArr数组存了起来把图片路径放进imgArr数组里用遍历的方法把图片给展现出来ok...
2021-08-30 20:09:56
769
原创 uni-app-移除缓存-uni.removeStorage
移除前的数据移除后的数据实现代码template部分，三个按钮点击事件methods部分，第一个是存数据，第二个是获取数据，第三个是移除数据移除数据用到uni.removeStorage()，必须包含两个参数（key和success），key是指定删除的key，success是删除成功后执行的操作。...
2021-08-30 20:03:56
5612
原创 uni-app-获取数据-uni.getStorage
效果图先存储数据后获取数据代码部分template两个点击事件methodssetStorage()是存储数据事件，用到uni.setStorage，key和data都得有getStorage()是获取数据事件，用到uni.getStorage可以没有data,但是key和success一定要有。官网：https://uniapp.dcloud.io/api/storage/storage?id=getstorage...
2021-08-30 20:00:45
3197
原创 uniapp-数据缓存-uni.setStorage
uni.setStorage将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。效果图代码部分在template里写一个按钮script里写methods存储的时候，必须写key和datasuccess()是存储成功后执行的操作...
2021-08-30 19:58:33
3542
原创 uniapp-发送请求
先上效果图在template里写个button在script里写get事件发送请求，用uni.request()官网： link.
2021-08-27 21:28:12
194
原创 uniapp-上拉刷新
先在script写几个数组再在template里遍历数组这里class的style，我设置为上拉刷新实现重要部分在script里写这里用到es6的语法“…”
2021-08-27 21:21:54
83
原创 uniapp-下拉刷新
先上效果图直接下拉顺序发生变化，说明刷新成功第二种效果，点击按钮刷新一样刷新成功实现步骤创建list页面在pages.json里配置把这一句去掉，或者改为false，意思是不允许全部页面都可以下拉刷新这里是允许该页面下拉刷新到list.vue里写代码先写一个数据数组然后用遍历展示出来然后写直接下拉刷新的用setTimeout来实现延迟效果,这里延迟是1000ms，也就是1suni.stopPullDownRefresh()是停止刷新指令第二种，用按钮实现下
2021-08-27 14:56:30
814
原创 uniappp-页面生命周期
效果代码所以是先加载，显示，最后渲染页面生命周期与应用生命周期的区别就是只在本页面有效，并且是在本页面的script里设置，不是在app.vue里设置。
2021-08-27 14:46:11
191
原创 uniapp-如何注册事件和传递参数及获取到事件对象
效果template部分主要代码<button size="mini" type="primary" v-on:click="clickHandle(20,$event)">按钮</button>20传给num，event传给e，这里的v−on:可以简写成@，@click="clickHandle(20,event传给e，这里的v-on:可以简写成@，@click="clickHandle(20,event传给e，这里的v−on:可以简写成@，@click="clickHa
2021-08-27 14:38:06
267
如何让stylus代码片段折叠？vscode。
2023-12-20
TA创建的收藏夹 TA关注的收藏夹
TA关注的人