-
添加”我的简历“跳转箭头代码
查看全部 -
添加职位信息代码,其中{{job}}和{{exp}}是js文件中date{ }中声明的变量
/*职位信息总体样式*/ .cover-work{ position: absolute;/*绝对位移方式*/ bottom:200px; text-align: center;/*里面文字都是居中对齐*/ background-color: rgba(0, 0, 0, 0.2);/*半透明灰色*/ padding: 20px 0;/*上下内填充为20,左右内填充为0*/ width: 100%; } /*职位文字样式*/ .cover-job{ display: block;/*block模型,自动换行*/ color: white; font-size: 30px; font-weight: bold;/*加粗*/ } /*工作经验文字样式*/ .cover-exp{ display: block;/*block模型,自动换行*/ color: white; font-size: 20px; font-weight: bold;/*加粗*/ }
查看全部 -
添加3个大小不同的气泡代码
其样式,如下:
/*气泡样式*/ .big-circle{ background-color: rgba(0, 165, 34, 0.7);/*半透明背景色*/ width: 260px; height: 260px; border-radius: 130px;/*半径*/ position: absolute;/*绝对位移方式*/ left:-150px; top:150px; } .medium-circle{ background-color: rgba(0, 165, 34, 0.7);/*半透明背景色*/ width: 160px; height: 160px; border-radius: 80px;/*半径*/ position: absolute;/*绝对位移方式*/ right:-80px; top:110px; } .small-circle{ background-color: rgba(0, 165, 34, 0.7);/*半透明背景色*/ width: 50px; height: 50px; border-radius: 25px;/*半径*/ position: absolute;/*绝对位移方式*/ left:-10px; bottom:110px; }
查看全部 -
添加名字和名字拼音代码,其中{{name}}和{{spell}}是在js文件中date{ }中声明的变量
其样式如下:
/*位置样式*/ .cover-info{ position: absolute;/*绝对位移方式*/ left: 50px;/*位移位置*/ top: 30px; } /*文字样式*/ .cover-name{ font-size: 30px; font-weight: bold;/*加粗*/ display: block;/*block模型,自动换行*/ letter-spacing: 1px;/*字符间距*/ } /*拼音部分文字样式*/ .cover-spell{ font-size: 20px; letter-spacing: 1px;/*字符间距*/ }
查看全部 -
.photo{ display: block;/*将模型修改为block模型*/ width:90%;/*设置宽度为90%,避免图片溢出*/ margin-left: auto;/*左对齐:自动*/ margin-right: auto;/*右对齐:自动*/ left: 5%; position: fixed;/*悬挂到底端*/ bottom: 0;/*底端距离是0像素*/ }
查看全部 -
添加图片代码
若需要保持原图片比例,需要在<image></image>中添加mode="widthFix"
若修改图片格式,需要为图片定义一个类进行设置class="photo",然后在wxss文件中对class进行编写。
查看全部 -
动态获取屏幕尺寸,并将其保存到模型层。
在页面上面根据该尺寸设置高度。
查看全部 -
在sitemap.json文件中修改页面被爬虫索引(默认全部页面都允许,不用修改)
另外"desc:"后面跟的是备注信息,可以不管。
查看全部 -
在app.json中的"navigationBarTitleText": "WeChat",中修改导航条文字
在app.wxss中添加全局样式
page{ color: #333; background-color: #fff; }
查看全部 -
在app.json中的"navigationBarTitleText": "WeChat",中修改导航条文字
在app.wxss中添加全局样式
page{ color: #333; background-color: #fff; }
查看全部 -
修改纵向对齐方式
.container{ display:flex; flex-direction:row; //水平排列(从左到右) justify-content:space-around; //环绕对齐 background-color:pink; height:200px; align-items:flex-start;//默认顶端对齐 //align-items:flex-end;//底端对齐 //align-items:center;//垂直居中对齐 //align-items:stretch;//拉伸对齐,该对齐需要在控件的类中添加htight:auto;属性 //align-items:baseline;//文字基线对齐,根据上一个文件的底下基线对齐(需空间有文字)如图 }
查看全部 -
修改水平对齐方式 .container{ display:flex; flex-direction:row; //水平排列(从左到右) justify-content:flex-start; //默认为起点对齐(左对齐) //justify-content:flex-end; //末端对齐(右对齐) //justify-content:center; //居中对齐 //justify-content:space-between; //两端对齐 //justify-content:space-around; //环绕对齐,每个控件之间距离相等 }
查看全部 -
.container{ display:flex; //flex-direction:row; //默认为水平排列(从左到右) row-reverse(从右往左) flex-direction:column; //修改为垂直排列(从上到下) column-reverse(从下到上) }
查看全部 -
Flex布局的方向轴
Flex布局有两根方向轴:水平的主轴和垂直的交叉轴。
Flex布局默认排版方向为水平的主轴。
查看全部 -
先在wxml文件中编写以下内容。
<view class="container"> <view class="S1"></view> <view class="S2"></view> <view class="S3"></view> <view class="S4"></view> </view>
然后在对应的wxml文件中编写图中,每个类对应的内容。flex-grow:1;为弹性布局,该控件可以自动伸展以铺满屏幕,该方法可同时用在多个类中。
其中container为父类,空间对齐方法在里面。display:flex;
查看全部 -
添加Flex布局
如果想要让某个空间实现Flex布局,必须要给它的父空间设置上Flex样式。
图一为html代码(若是wxml需要将div标签修改为view标签)
图二为css代码,只需写括号里面第一句现标准的写法。
查看全部 -
Flex布局的优点
Flex布局可以设置空间的排列方向和顺序。
Flex布局可以设置各种对齐方式。
Flex布局可以设置弹性放大或者缩小。
查看全部 -
学完的点赞查看全部
-
声明变量查看全部
-
mode='widthFix’ 保持图片宽高比
查看全部 -
动态计算页面的高度
查看全部 -
爬虫索引,允许被爬虫找到所有的信息,page:*
查看全部 -
技术栈介绍
查看全部 -
动态计算页面的高度
查看全部 -
可以在牛客网上刷题,但不推荐看面经,项目经历要靠长期积累
查看全部 -
求职前,先做项目,最后一个月再刷题
查看全部 -
排在最前面的项目经历,技术栈要写得很详细
查看全部 -
应届生凸显技术水平的方法:技术不够,运维来凑,打造多面手
查看全部 -
撰写项目经历的原则
查看全部 -
撰写工作经历的原则
查看全部 -
获取屏幕尺寸和设置高度
查看全部 -
动态计算页面的高度
查看全部 -
Flex布局的方向轴
Flex布局有两根方向轴:水平的主轴和垂直的交叉轴
Flex布局默认排版方向为水平的主轴
查看全部 -
添加Flex布局
如果想要让某个控件实现Flex布局,必须要给它的父控件设置上Flex样式
查看全部 -
Flex布局的重要性
Flex布局可以设置控件的排列顺序
Flex布局可以设置各种对齐方式
Flex布局可以设置弹性放大或者缩小
查看全部 -
小程序的SEO信息
查看全部 -
flex布局默认水平
查看全部 -
小程序里view标签是block模型
查看全部 -
Flex是一种弹性布局
查看全部 -
做项目>做低质量的笔试题
项目的优先级更高,需要提前3-4个月准备
查看全部 -
请问老师共享的图片在哪里呢查看全部
-
.container{
display: flex;
flex-direction: row;
/* justify-content: flex-start; 起点对齐 */
/* justify-content: flex-end; 右对齐 */
/* justify-content: center; 居中对齐 */
/* justify-content: space-between; 两端对齐 */
/* justify-content: space-around; 环绕对齐 */
justify-content: space-around; /*起点对齐*/
background-color: pink;
height: 200px;
/* align-items: flex-start; 顶端对齐 */
/* align-items: flex-end; 底端对齐 */
/* align-items: center; 垂直居中对齐 */
/* align-items: stretch; 控件拉伸至两端 */
align-items: baseline; /*文字基线对齐*/
}
.s1{
width: 50px;
height: 100px;
background-color: red;
/* height: auto; 配合align-items: stretch; 控件拉伸至两端 */
/* font-size: 30px; 配合align-items: baseline; 文字基线对齐 */
}
查看全部 -
flex布局的方向轴
.container{
display: flex;
/* flex-direction: row; 默认 从左往右 水平*/
/* flex-direction: row-reverse; 从右往左 水平*/
/* flex-direction: column 默认 垂直; */
flex-direction: column-reverse; /*从下到上 垂直 */
}
查看全部 -
获取屏幕尺寸:
视频中方法没效果,最新方法是
onShow: function(e) {
var that = this;
wx.getSystemInfo({
success(res) {
that.setData({
width: res.windowWidth,
height: res.windowHeight
})
}
})
}
查看全部 -
flex布局:
查看全部
举报