整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
Photoshop真的是无所不能吗？
当然啊，我还能用它来“呼风唤雨”呢！
没错，今天是一键生成·真香系列
先来看看效果啊
▼
有没有很神奇？！
管他是淅淅沥沥的小雨，浪漫的那种
还是轰轰烈烈的大雨，分手的那种
都可以一键生成！
辣么，这个插件怎么用呢？
超级简单，不过是动手调调参数的事！
（还是免费滴！）
先来看看面板，非常简单，都是只需要拖拖鼠标调整参数的傻瓜式操作。
我们先来给他下一场下雨看看，调参数的时候按照你的需求拖就可以了！
看，一场小雨如约而至了吧！
要是你觉得还不够，那就加大剂量，也就是往右拖一拖的事！
哇哦，瞬间由小雨转大雨了！简直不要太简单！
第一步：
复制地址到浏览器打开：subar.me/thread-375846-1-1.html，在SketchUp吧官方论坛免费获得插件。
第二步：
将”RainFX"文件夹复制到以下目录——
WIN系统:C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
没有以上扩展目录直接拷贝到下面目录:
PS安装目录:C:\Program Files \Adobe \Adobe Photoshop cCxXXX\Required\CEP\extensions (XXXX代表你使用的PS版本>
Mac系统:/Library(资源库)/Application Support/Adobe/CEP/extensions
(注意，找不到“Library”的打开顶部菜单“前往”—―这时按住键盘option键一一在“前往”下拉菜单中就会出现资源库>
第三步：
然后重新打开Photoshop，在窗口-扩展里面打开扩展面板。
更多PS生成雨天特效教程——
全国都在下暴雨，连我的PS都进水了！
击右上方红色按钮关注“web秀”，让你真正秀起来
在日常项目开发中，在布局方面有遇到哪些问题了？今天来一起看看CSS布局有哪些小技巧，后续开发更轻松。本文主要通过简单的示例，讲述开发中遇到的布局等问题，但不仅限于布局相关，会有其他相关知识点。
CSS实用技巧第二讲：布局处理
移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制，代码如下：
/* 基于UI width=750px DPR=2的页面 */
html {
font-size: calc(100vw / 7.5);
}
rem 页面布局, 不兼容低版本移动端，使用需谨慎。
通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看。注意场景： 横向滚动列表、元素过多但位置有限的导航栏。
CSS实用技巧第二讲：布局处理
<div class="horizontal-list flex"> <ul> <li>web秀</li> <li>阿里巴巴</li> <li>字节跳动</li> <li>腾讯</li> <li>百度</li> <li>美团</li> </ul> </div> <div class="horizontal-list inline"> <ul> <li>web秀</li> <li>阿里巴巴</li> <li>字节跳动</li> <li>腾讯</li> <li>百度</li> <li>美团</li> </ul> </div>
scss样式
.horizontal-list {
width: 300px;
height: 100px;
ul {
overflow-x: scroll;
cursor: pointer;
margin: 0;
padding: 0;
&::-webkit-scrollbar {
height: 6px;
}
&::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: linear-gradient(to right, #32bbff, #008cf4);
}
}
li {
overflow: hidden;
margin-left: 10px;
height: 90px;
background-color: #00b7a3;
line-height: 90px;
text-align: center;
font-size: 16px;
color: #fff;
&:first-child {
margin-left: 0;
}
}
}
.flex {
ul {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
li {
flex-shrink: 0;
flex-basis: 90px;
}
}
.inline {
margin-top: 10px;
height: 102px;
ul {
overflow-y: hidden;
white-space: nowrap;
}
li {
display: inline-block;
width: 90px;
}
}
知识点解析：
1、display: flex布局：又名“弹性布局”，任何一个容器都可以指定为Flex布局。详细内容请点击
《CSS3中Flex弹性布局该如何灵活运用？》
2、滚动条样式美化。
如何自定义滚动条样式了？ 掌握这3个选择器即可。
（1）、::-webkit-scrollbar 定义了滚动条整体的样式；
（2）、::-webkit-scrollbar-thumb 滑块部分；
（3）、::-webkit-scrollbar-track 轨道部分；
所以上面scss代码中，我们书写了这3个选择器的样式，改变了滚动条的样式。
3、linear-gradient线性渐变。语法如下：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction用角度值指定渐变的方向（或角度）, color-stop1, color-stop2,...用于指定渐变的起止颜色。
to right的意思就是从左到右，从一个颜色过渡到另外一个颜色。
请看示例：
CSS实用技巧第二讲：布局处理
更多详细内容请点击：
《CSS3线性渐变、阴影、缩放实现动画下雨效果》
《CSS3线性径向渐变、旋转、缩放动画实现王者荣耀匹配人员加载页面》
《CSS3径向渐变实现优惠券波浪造型》
在retina屏中，像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的边框看起来比真的1px更宽。
我们可以通过伪类加transform的方式解决。
CSS实用技巧第二讲：布局处理
transform：用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”。
详细transform了解，请点击：
《CSS3最容易混淆属性transition transform animation translate》
非常简单的方式，flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐。
请看示例：
<ul class="nav-list"> <li>HTML5</li> <li>CSS3</li> <li>JAVASCRIPT</li> <li>TYPESCRIPT</li> <li>THREE.JS</li> <li>NODE</li> </ul>
css样式
.nav-list {
display: flex;
align-items: center;
padding: 0 10px;
width: 700px;
height: 60px;
background-color: #00b7a3;
}
.nav-list li {
padding: 0 10px;
height: 40px;
line-height: 40px;
font-size: 16px;
color: #fff;
list-style: none;
}
.nav-list li + li {
margin-left: 10px;
}
.nav-list li:last-child {
margin-left: auto;
}
CSS实用技巧第二讲：布局处理
<div class="accordion"> <input type="checkbox" id="collapse1"> <input type="checkbox" id="collapse2"> <input type="checkbox" id="collapse3"> <article> <label for="collapse1">web秀</label> <p>html<br>javascript<br>css<br>uni app</p> </article> <article> <label for="collapse2"></label> <p>新闻<br>图片<br>视频<br>养生</p> </article> <article> <label for="collapse3">阿里巴巴</label> <p>淘宝<br>阿里云<br>闲鱼<br>天猫</p> </article> </div>
scss样式
.accordion {
width: 300px;
article {
margin-top: 5px;
cursor: pointer;
&:first-child {
margin-top: 0;
}
}
input {
display: none;
padding: 0;
margin: 0;
&:nth-child(1):checked ~ article:nth-of-type(1) p,
&:nth-child(2):checked ~ article:nth-of-type(2) p,
&:nth-child(3):checked ~ article:nth-of-type(3) p {
border-bottom-width: 1px;
max-height: 600px;
}
}
label {
display: block;
padding: 0 20px;
height: 40px;
background-color: #00b7a3;
cursor: pointer;
line-height: 40px;
font-size: 16px;
color: #fff;
}
p {
overflow: hidden;
padding: 0 20px;
margin: 0;
border: 1px solid #00b7a3;
border-top: none;
border-bottom-width: 0;
max-height: 0;
line-height: 30px;
transition: all 500ms;
}
}
CSS实用技巧第二讲：布局处理
<div class="tab-navbar"> <input type="radio" name="tab" id="tab1" checked> <input type="radio" name="tab" id="tab2"> <input type="radio" name="tab" id="tab3"> <input type="radio" name="tab" id="tab4"> <nav> <label for="tab1">首页</label> <label for="tab2">列表</label> <label for="tab3">其他</label> <label for="tab4">我的</label> </nav> <main> <ul> <li>首页</li> <li>列表</li> <li>其他</li> <li>我的</li> </ul> </main> </div>
scss样式
*{
padding: 0;
margin: 0;
}
.active {
background-color: #00b7a3;
color: #fff;
}
.tab-navbar {
display: flex;
overflow: hidden;
flex-direction: column-reverse;
border-radius: 10px;
width: 300px;
height: 400px;
margin: 100px auto;
input {
display: none;
&:nth-child(1):checked {
& ~ nav label:nth-child(1) {
@extend .active;
}
& ~ main ul {
background-color: #f13f84;
transform: translate3d(0, 0, 0);
}
}
&:nth-child(2):checked {
& ~ nav label:nth-child(2) {
@extend .active;
}
& ~ main ul {
background-color: #44bb44;
transform: translate3d(-25%, 0, 0);
}
}
&:nth-child(3):checked {
& ~ nav label:nth-child(3) {
@extend .active;
}
& ~ main ul {
background-color: #ff7632;
transform: translate3d(-50%, 0, 0);
}
}
&:nth-child(4):checked {
& ~ nav label:nth-child(4) {
@extend .active;
}
& ~ main ul {
background-color: #00bbdd;
transform: translate3d(-75%, 0, 0);
}
}
}
nav {
display: flex;
height: 40px;
background-color: #f0f0f0;
line-height: 40px;
text-align: center;
label {
flex: 1;
cursor: pointer;
transition: all 300ms;
}
}
main {
flex: 1;
ul {
display: flex;
flex-wrap: nowrap;
width: 400%;
height: 100%;
transition: all 300ms;
}
li {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
font-weight: bold;
font-size: 20px;
color: #fff;
}
}
}
CSS实用技巧第二讲：布局处理
喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！同时，要源码的小伙伴可以点击下方“了解更多”。
最后推荐一个专栏文章，感谢小伙伴们多多支持，谢谢大家！
他们都说小程序很简单，很快入手。我就试着看了下，其实不然，小程序还是有点东西在里面，特别是对于我这种前端特渣的，遇到前端四肢无力，头晕目涨，无疑是个天坑。故在这里和大家分享下开发小程序的学习过程。
先交代下当前知识储备背景。当前我们使用基本的html 标签。能阅读简单的js代码。写js 代码基本靠百度 or Google。懂点后台姿势 ：）。当然如果这些你都不懂，没关系，之前我浏览过小程序开发文档，官方认为可以从零开始。当然路线也会有点曲折。（我就是看了这条，现在头铁来撞下南墙）
闲话少说，开始正文。
第一步。打开微信开发文档下载 小程序开发工具。https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 。
第二步，可以直接注册一个小程序开发账号，获取到 app id. 。个人号很多功能较少，权限高的账号需要认证公司。不过我们可以去申请一个测试 app id. 地址： https://developers.weixin.qq.com/sandbox 。这里我当时去获取的时候，遇到一个小坑，直接用微信登录这个页面是没有app id 的，显示未空，我们需要回到 社区，然后在社区登录，再跳转到这个页面，才会给我们刷出这个 app id.
第三步。打开我们第一步下载的微信开发工具。全中文，界面还是挺友好的，这个工具需要我们 微信扫码登录。配置项目路径，贴上我们第二步获取的app id。点击 导入 便正式开始了。
完成这三步，我们的开发环境便配置成功，可以看到下面这样的界面
左边是真机模拟器，官方推荐选择iPhone6进行模拟开发。
中间就是我们的文件目录.
右边是代码编辑窗口。
右边下面是控制台，用于我们开发时候的调试。
到这里我们就完成了小程序的开发环境的搭建。不用像其他诸如C，Python，java之类的配置一大堆环境。这些工作微信开发工具都帮我们做了。
好，我们就先到这里。下次我们继续
*请认真填写需求信息，我们会在24小时内与您取得联系。
