行思工作室官网移动端前端开发笔记

官网地址：http://xsgzs.cn/

使用CSS的 :active属性可是实现按钮点击的效果

.menu-icon:active{opacity: 0.7; //点击后透明度发生变化}

CSS文本超过指定行数显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;　　//这个代表你要在几行显示省略号
-webkit-box-orient: vertical;

CSS实现模糊背景效果

<div class="pic-item clicks" :style="picBack"><!-- 毛玻璃遮罩层 --><div class="pic-blur" :style="picBack"></div><span class="pic-name">{{pic.albumName}}</span><span class="pic-desc">{{pic.albumDesc}}</span><span class="pic-time">{{pic.createdDateStr}}</span>
</div>

.pic-item{width: 90%;height: 190px;background-size: cover;box-shadow: 2px 8px 8px rgba(10,16,20,.24);margin-bottom: 15px;margin-left: auto;margin-right: auto;border-radius: 15px;background-position: center center;position: relative;display: flex;justify-content: center;flex-direction: column;overflow: hidden;// 遮罩模糊.pic-blur{width: 100%;height: 100%;position: absolute;left: 0;top:0;filter: blur(1.5px);background-size: cover;background-position: center center;// border-radius: 15px;}// 名字.pic-name{position: relative; //其他元素必须有定位属性才能显示出来color: white;font-weight: bolder;font-size: 19px;text-align: center;letter-spacing: 2px;}// 描述.pic-desc{position: relative;color: white;font-size: 14px;font-weight: 550;text-align: center;margin-top: 10px;}.pic-time{position: absolute;color: white;text-align: right;right: 15px;bottom: 10px;}}

export default{name:'PictureListItem',props:['pic'],data(){return{picBack:{"background-image":`url(${this.pic.thumbUrl})`}}}}

注意：遮罩层的背景必须跟父元素一直，可以使用background: inherit;属性，也可以按照我上面的代码直接赋一样的值

实现跳转动画

https://blog.csdn.net/SpringHASh/article/details/112795580

解决滚条问题

https://blog.csdn.net/zsm4623/article/details/100037884

https://blog.csdn.net/q3254421/article/details/84777614

获取icon

https://www.php.cn/js-tutorial-12736.html

预览组件全局引入无法使用，局部引入可以使用
vue中使用animate.css v4.0

https://www.cnblogs.com/somegenki/p/13498376.html

盒子阴影标准

border-radius: 12px;
box-shadow: 0 8px 12px #ebedf0;

span标签居中方法
```
给父标签添加
text-align:center;
```
vue路由history模式刷新404问题解决方案:
https://blog.csdn.net/u011025083/article/details/80352301
出场入场动画同时播放问题
给transtation标签添加mode='out-in'属性
https://yunchong.blog.csdn.net/article/details/106333797

行思工作室官网移动端前端开发笔记相关推荐

学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（2.17-2.20）
学习[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(2.17-2.20) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https:// ...
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.13-3.15）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.13-3.15) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gi ...
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（4.1-4.10）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(4.1-4.10) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://git ...
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.11-3.12）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.11-3.12) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gi ...
vm vh移动端布局及 bilibili官网移动端首页布局
vm和vh是啥? 市场上的移动端大多数为flex布局,此时我们用到了rem这个单位,但是rem需要媒体查询,要根据页面是尺寸进行修改,而vm/vh省去各种判断和修改,像B站就通过vue和vm写的. v ...
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.16-3.20）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.16-3.20) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gi ...
【软件下载】Excel下载 word下载官方官网下载原始镜像开发工具开发软件下载
原文: [软件下载]Excel下载 word下载官方官网下载原始镜像开发工具 [开发软件下载] 官网下载地址:www.liuguiqing.com.cn
精美个人主页引导工作室官网源码分享
源码介绍今天把我自己在用的一款特别特别精美的个人工作室源码分享出来!可以当做工作室官网介绍也可以用来做引导! 源码截图下载链接 www.456code.com/2426.html
网络工作室官网HTML源码
一个简单的企业网络工作室主页官网html网站源码开源无加密 ps文件,设计图纸均已开源,上传即用源码下载:网络工作室官网HTML源码-小程序文档类资源-CSDN下载

行思工作室官网移动端前端开发笔记

行思工作室官网移动端前端开发笔记相关推荐

最新文章

热门文章