整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
Photoshop真的是無所不能嗎？
當然啊，我還能用它來“呼風喚雨”呢！
沒錯，今天是一鍵生成·真香系列
先來看看效果啊
▼
有沒有很神奇？！
管他是淅淅瀝瀝的小雨，浪漫的那種
還是轟轟烈烈的大雨，分手的那種
都可以一鍵生成！
辣么，這個插件怎么用呢？
超級簡單，不過是動手調(diào)調(diào)參數(shù)的事！
（還是免費滴！）
先來看看面板，非常簡單，都是只需要拖拖鼠標調(diào)整參數(shù)的傻瓜式操作。
我們先來給他下一場下雨看看，調(diào)參數(shù)的時候按照你的需求拖就可以了！
看，一場小雨如約而至了吧！
要是你覺得還不夠，那就加大劑量，也就是往右拖一拖的事！
哇哦，瞬間由小雨轉大雨了！簡直不要太簡單！
第一步：
復制地址到瀏覽器打開：subar.me/thread-375846-1-1.html，在SketchUp吧官方論壇免費獲得插件。
第二步：
將”RainFX"文件夾復制到以下目錄——
WIN系統(tǒng):C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
沒有以上擴展目錄直接拷貝到下面目錄:
PS安裝目錄:C:\Program Files \Adobe \Adobe Photoshop cCxXXX\Required\CEP\extensions (XXXX代表你使用的PS版本>
Mac系統(tǒng):/Library(資源庫)/Application Support/Adobe/CEP/extensions
(注意，找不到“Library”的打開頂部菜單“前往”—―這時按住鍵盤option鍵一一在“前往”下拉菜單中就會出現(xiàn)資源庫>
第三步：
然后重新打開Photoshop，在窗口-擴展里面打開擴展面板。
更多PS生成雨天特效教程——
全國都在下暴雨，連我的PS都進水了！
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
在日常項目開發(fā)中，在布局方面有遇到哪些問題了？今天來一起看看CSS布局有哪些小技巧，后續(xù)開發(fā)更輕松。本文主要通過簡單的示例，講述開發(fā)中遇到的布局等問題，但不僅限于布局相關，會有其他相關知識點。
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>字節(jié)跳動</li> <li>騰訊</li> <li>百度</li> <li>美團</li> </ul> </div> <div class="horizontal-list inline"> <ul> <li>web秀</li> <li>阿里巴巴</li> <li>字節(jié)跳動</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布局。詳細內(nèi)容請點擊
《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實用技巧第二講：布局處理
更多詳細內(nèi)容請點擊：
《CSS3線性漸變、陰影、縮放實現(xiàn)動畫下雨效果》
《CSS3線性徑向漸變、旋轉、縮放動畫實現(xiàn)王者榮耀匹配人員加載頁面》
《CSS3徑向漸變實現(xiàn)優(yōu)惠券波浪造型》
在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實現(xiàn)向右對齊。
請看示例：
<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>養(yǎng)生</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實用技巧第二講：布局處理
喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！同時，要源碼的小伙伴可以點擊下方“了解更多”。
最后推薦一個專欄文章，感謝小伙伴們多多支持，謝謝大家！
他們都說小程序很簡單，很快入手。我就試著看了下，其實不然，小程序還是有點東西在里面，特別是對于我這種前端特渣的，遇到前端四肢無力，頭暈目漲，無疑是個天坑。故在這里和大家分享下開發(fā)小程序的學習過程。
先交代下當前知識儲備背景。當前我們使用基本的html 標簽。能閱讀簡單的js代碼。寫js 代碼基本靠百度 or Google。懂點后臺姿勢 ：）。當然如果這些你都不懂，沒關系，之前我瀏覽過小程序開發(fā)文檔，官方認為可以從零開始。當然路線也會有點曲折。（我就是看了這條，現(xiàn)在頭鐵來撞下南墻）
閑話少說，開始正文。
第一步。打開微信開發(fā)文檔下載 小程序開發(fā)工具。https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 。
第二步，可以直接注冊一個小程序開發(fā)賬號，獲取到 app id. 。個人號很多功能較少，權限高的賬號需要認證公司。不過我們可以去申請一個測試 app id. 地址： https://developers.weixin.qq.com/sandbox 。這里我當時去獲取的時候，遇到一個小坑，直接用微信登錄這個頁面是沒有app id 的，顯示未空，我們需要回到 社區(qū)，然后在社區(qū)登錄，再跳轉到這個頁面，才會給我們刷出這個 app id.
第三步。打開我們第一步下載的微信開發(fā)工具。全中文，界面還是挺友好的，這個工具需要我們 微信掃碼登錄。配置項目路徑，貼上我們第二步獲取的app id。點擊 導入 便正式開始了。
完成這三步，我們的開發(fā)環(huán)境便配置成功，可以看到下面這樣的界面
左邊是真機模擬器，官方推薦選擇iPhone6進行模擬開發(fā)。
中間就是我們的文件目錄.
右邊是代碼編輯窗口。
右邊下面是控制臺，用于我們開發(fā)時候的調(diào)試。
到這里我們就完成了小程序的開發(fā)環(huán)境的搭建。不用像其他諸如C，Python，java之類的配置一大堆環(huán)境。這些工作微信開發(fā)工具都幫我們做了。
好，我們就先到這里。下次我們繼續(xù)
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
