- 博客(98)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 二十七、响应式布局练习- 美图导航栏1
因为我们的菜单列表是后面点击左侧按钮在展示，所以在写样式前，先把这个菜单nav注释藏起来，不影响我们外面大局的布局。用户信息用的是雪碧图，2x（2倍图），比他真实的图标大小，大了一倍，所以待会需要缩小下。1.移动端优先 - 先写完移动端的界面，再写网页。分析：手机宽度下的网页元素， 导航栏3个元素，左边菜单，中间标题， 右边用户。问题：因为旋转的点在中心位置，所以导致转出来是 > 样式，不是 x 样式。无js参与，所以我们用hover 模拟下,当鼠标移动到三，他立马变成 X。
2023-07-28 11:11:39
268
原创 二十六、媒体查询2
样式切换的分界点，我们称其为断点，也就是网页的样式会再这个点时发生变化；比如看到的很多网页，当视口不断缩小，到某个点，会突然变成竖屏界面展示。min-width 视口的最小宽度(视口大于指定宽度时生效)max-width 视口的最大宽度(视口小于指定宽度时生效)一般设计的时候，高度不考虑，只考虑宽度。问题：这里的500px太过于精确。解决： 优化下，用范围更灵活。height 视口的高度。width 视口的宽度。
2023-07-25 09:23:20
474
原创 二十五、响应式布局 - 媒体查询
我们发现很多网页，在用户拉动边框缩放可视区的时候，内部控件都会随着大小有变动，这个就是在自适应屏幕 - 响应式布局。- 如果同一种设备，都是屏幕，但是可以是不同状态。比如：有些屏幕大，有些屏幕小，有些屏幕是横的，有些屏幕是竖的。- 网页有时候需要打印机 - 打印机又是一种设备（打印机没有屏幕）；- 根据这个设备的不同，打印的时候一个样式，屏幕上看是另外一个样式；- 电脑，手机都有屏幕 - 他们是属于一种设备；
2023-07-24 09:02:03
145
原创 二十三、移动页面练习2
如果不加 flex-flow:row wrap;样式就是这样，因为flex自带伸缩，让他们都放到一行，即使设置了每个元素的宽也无用。解决： 设置换行(按行排列，换行) flex-flow:row wrap;// 设置辅轴方向的对齐方式(这里还可以用space-around)因为这里我们当时量整体高度是包含了上下空白的。一、界面第二部分开发 - 图片展示。三、设置这4个菜单的对齐方式。三、详细设置每个菜单的样式。
2023-07-20 13:53:32
46
原创 二十二、移动端页面练习1
当我们设置header宽度的时候，发现他和整个屏幕主体内容，都是等宽，且居中，所以我们直接在外面定义个w类，可以让他更能广泛使用。2.设置头部元素样式。
2023-07-20 10:26:17
56
原创 二十一、vm 适配
这样扩大，通过看computed 如果正常显示了我们写的font-size，就表示当前定义的font-size正确。写了style后，看真实生效的样式要看computed,调试会常用到 ，调试面板的 styles 只能看代码去设置的样式。确定倍数后，如这里的40倍，即1rem = 40px， 后面再在设计图中测出元素的width,height后 除以 40， 就得到rem值了。/* 此时这里的1rem = 100px;1 rem = 1 html的字体大小 （1个html的font-size）
2023-07-19 10:28:46
228
原创 二十、移动端网页开发-px 和 vw基础知识
假设现在设计图是：750px, 使用vw作为单位： 100vw （整个视口的宽度）, 现在在设计图中测到的一个图标大小为： 48px x 35px ,100vw = 一个视口的宽度（100%），在这里就是和手机屏幕宽度一样。/* 开发的是手机移动页面，就不能用px,而是用vw。
2023-07-17 14:36:39
337
原创 十九、移动端网页的完美视口
自带的meta 设置,width=device-width 等价 initial-scale=1.0， 这里之所以都写，是因为防止有什么极端情况（比如横屏竖屏切换），前面的识别不了，就用后面的。解决：为了适配不同机型的手机的完美视口的不同，我们不能写死width,而是用width=device-width。以后再写移动端的页面，就要把自带的这个视口，要写上。不同的手机，宽度不同，即完美视口大小是不同的。6.分析html自带设置好的meta视口。
2023-07-17 10:59:16
266
原创 十八、网页端在移动端的像素
1. 在不同的屏幕，单位像素的大小是不同的，像素越小，屏幕越清晰。手机端的像素就是宽度和高度，如iphone6 4.7寸 750 x 1334。-2. 手机的像素点 远远小于 计算机的像素点。
2023-07-17 09:03:25
269
原创 十七、web网页像素知识
他是把以前的1个css像素变成2个css像素，对应的整个视口就变小了。（放大网页，视口区域就变小了）。— 当我们进入浏览器，按住ctrl + 鼠标滚轮的时候，浏览器可以进行放大缩小。
2023-07-13 17:28:11
642
原创 十六、flex应用练习做淘宝按钮界面
一、目标：我们要做一个手机版本的淘宝网，蓝色框住的按钮这部分。解决代码：（步骤是按照1,2,3,4来操作的）二、 小技巧：如何在网页上看手机版本的页面。
2023-07-13 16:08:37
132
原创 十五、flex弹性元素的样式
测试：把父类ul 的width设置小点，会发现里面的元素，会自动缩减，以适应父类边框变小的情况。3. 弹性元素的属性：flex-shrink。4. 弹性元素的属性：flex-basis。5. flex 统一设置这3个属性（常用）三、弹性元素的属性：flex-shrink。2. 弹性元素的属性：flex-grow。四、弹性元素的属性：flex-basis。五、flex 统一设置这3个属性（常用）二、弹性元素的属性：flex-grow。
2023-07-11 16:29:11
1205
原创 十四、flex弹性容器属性样式2
也就是说ul下的子元素li都有这个属性，但是现在我想针对第一个li，单独设置他的align-items, 此时我们就用align-self 来覆盖。这个第一行的高度一样，第二行的高度一样，这就是stretch 定义的相同的值。align-items是控制横向，元素之间的对齐的, 对应的align-content是对齐元素之间的空白的。我们在前面的基础上，修改代码，把ul的高度定下来，设置800px, li的高度不定。比如目前我们的主轴是水平方向，辅轴就是垂直方向，所以这里的起边，就是顶部上方。
2023-07-11 08:50:54
387
原创 十三、弹性容器flex的样式1
设置ul为弹性元素，默认是flex-direction:row，所以不用设置，然后在让里面的方块不进行伸缩。2.flex-wrap 换行。（针对方块的溢出的解决方法）4.justify-content 设置元素的对齐方式。我们看到小方块超出了边框。
2023-07-06 15:29:30
114
原创 十一、弹性盒flex - 介绍
现在我们把li 的width：200px, ul 父元素width: 300px;，从这里可以看出3个li的width加起来是超过300的，但是效果是没有元素超出父元素，他们自动伸缩了,就是收缩系数控制的。通过 display: flex，来设置ul为弹性容器，效果是高度没有塌陷，且水平排列。解决方法：让我们的li元素都具有伸缩特性 - flex-grow:1;我们知道float：left 会导致高度塌陷，flex不会。当前父类ul，没有设置高度，这里是元素自适应高度。flex（弹性盒，伸缩盒）
2023-07-05 16:56:49
160
原创 十、less语法2
c. 直接复制全部 less.comppile，然后，点击做下角的设置图标 - 设置 - 扩展 - easy less configtion。e. 在xx.less 中操作保存下，会多一个other.css.map 文件，你在调试，你就会发现可以看到正常的less行号.b. 如果我想找到css 对应的less 所在行，需要在插件easy less 这里面，配置。a. 如果调试过程中，要改样式，是要改less,但是提示会给你的是css的某行。然后compress (压缩)：false,
2023-07-04 16:14:52
250
原创 九、less语法
多行注释，在less中写了的多行注释，保持less文件后，自动会在css中继承下来，单行注释不会。表示，p2有p1相同的width,height， 同时在为p2多扩展设置一个color。使用类选择器时，可以在选择器后面添加一个括号，这时我们实际上就创建了一个mixins。//如果我们确实不想传值，其实我们也可以在设置混合函数方法的时候给他们一个默认值。用的话： @变量名, 变量不仅可以存数字，颜色，也可以存类名。// 有了默认值，你可以不传，或者只传一个。优化这种写法，不让他在重复写一次。
2023-07-04 15:46:43
387
原创 八、less简介
less ：对变量的支持，对mixin的支持，对css做了许多扩展，语法也和css差不多。less是一个css的预处理语言，他的语法是要通过中间再编译成css的语法。插件： easy less 保存代码的时候会自动把less 编译成css。less和js优点相似，学会js，再理解他就很简单了。
2023-07-03 09:02:07
179
原创 三、动画 -变形transform
如下这样写，你会发现box3撑满整个屏幕，因为你设置了 margin: auto;所以它宽高也可以自动设置。现在如果我现在把宽高删掉，然后box3盒子里面有字。现在想box3的宽高，通过我设置的box3的文字内容来撑开。并且box3依然在屏幕的居中。上面这种写法有缺陷：如果这个元素，宽高是确定，可以这样写。1.首先我们先做准备工作：在界面上画出两个方块。变形就是指通过CSS来改变元素的形状或位置。2.现在让box1往x轴右侧移动。1.变形transform定义。一、变形transform定义。
2023-06-20 08:50:39
1078
3原创 Universal Links的app跳转
一、配置apple-app-site-association文件（json格式）在桌面上，创建 apple-app-site-association 文件格式及内容如下：{ "applinks" : { "apps" : [], "details" : [ //如果有不止一个 app，或者 app 有多种环境（比如：dev，pro），可以在这个数组中添加多个元素。 { //appID: App Prefix(Team ID) + B.
2022-04-11 17:04:13
1082
原创 URL Scheme 和 Universal Links的优缺点
目录URL Schemes VS Universal Link 优缺点URL Schemes VS Universal Link 优缺点URL Schemes ：优点：非常有效，能够让 app 之间彼此交流，传递数据。缺陷：需要提前加入到白名单，且会询问用户“是否打开‘xxx’应用”。不会总能映射到正确的 app，两个 app 可能拥有同样的 scheme，而开发者不能明确地表示他们指的是那个 app。app 没有安装的时候不能工作。不能有效地保护用户隐私。app 需
2022-04-11 16:33:59
3098
原创 URL Scheme app 跳转
目录相关名词了解具体操作步骤一、相关名词了解白名单：“白名单”的意义是要检查当前设备上是否安装了其他App，而不是打开其他App必须添加“白名单”。二、具体操作步骤1.配置自己项目的url scheme, 注意这个是配置自己项目，假设你的项目是zhenxin, 这里的配置的URL Schemes: zhenxin是代表你自己项目。 identifer:...
2022-04-11 16:21:16
3497
原创 Flutter06-基础语言Dart之 声明所有变量的方式
目录Hello World定义变量一、Hello Worldmain(){print('Hello World');}Dart 语言入口是main函数，并且必须显示的进行定义；Dart的入口函数main是没有返回值的；定义字符串的时候，可以使用单引号或双引号；每行语句必须使用分号结尾，很多语言并不需要，如Swift,JavaScript二、定义变量明确声明（Explicit）String name = 'uu';int age = 19;double he
2020-08-14 17:46:00
574
原创 Flutter05-ListView 列表
目录垂直列表ListView垂直图文列表水平列表一、垂直列表ListViewimport 'package:flutter/material.dart';void main(){ runApp(MyApp());}class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return Mater
2020-06-15 15:36:21
137
原创 Flutter04-2020图片加载
目录远程图片圆型图片设置本地图片一、远程图片代码展示：import 'package:flutter/material.dart';void main(){ runApp(MyApp());}//自定义组件class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold(
2020-06-12 16:38:09
172
原创 Flutter03-2020 Container组件，Text组件
目录Container组件Text组件代码一、Container组件相关属性二、Text组件相关属性三、代码import 'package:flutter/material.dart';void main(){ runApp(MyApp());}//自定义组件class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return M
2020-06-10 15:25:02
125
原创 Flutter02-2020 Flutter 应用介绍 MaterialApp和Scaffold组件介绍
目录项目文件结构Flutter入口文件和入口方法使用MaterialApp 和Scaffold两个组件装饰App一、项目文件结构┬└ projectname ┬ ├ * android - Android部分的工程文件 （Android平台相关代码） ├ * build - 项目的构建输出目录(运行项目的时候，生成的编译目录) ├ * ios - iOS部分的工程文件（iOS平台相关代码） ├ * lib -
2020-06-08 16:38:21
356
原创 Flutter01- 2020 Mac安装flutter，构建flutter 项目
Flutter官网地址：https://flutterchina.club/get-started/install/目录安装Flutter SDK下载Xcode, Android Studio 开发软件，配置相关所需构建Flutter项目一、安装Flutter SDK本次安装主要针对Mac，进行精炼，其他系统的，可以参照Flutter 官网步骤进行。到官网下载Flutter SDK ,有1G，因为是外国的，所以建议开VPN，网好的地方。下载SDK网页：https://flutte
2020-06-04 15:21:25
321
原创 微信小程序11-view容器
小程序有丰富的组件，看下组件含义：所写的标签都是组件，属性来修饰组件，进行更多丰富的操作。组件类型：视图容器组件：控制页面的内容scroll-view:滚动容器swiper:轮播组件movable-view：可支持移动缩放组件cover-view: 这个view可以盖在原生组件上具体视图组件的属性可参考官方文档：https://developers.weixin.qq.co...
2019-06-19 14:39:32
309
原创 微信小程序10 - 事件流
前面说过事件可以让视图层和逻辑层进行通信。那什么是事件呢？如何绑定组件上的事件？index.wxml通过view标签来绑定一个点击事件，事件名是clickMeindex.js绑定了clickMe的回调函数，{打印事件函数所有的返回信息}事件对象各个属性的含义...
2019-06-18 16:00:48
468
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人