文章專區

網頁設計相關文章

大圖輪播已經是許多網站的常見功能了,除了在剛進入網站的時候能夠立即吸引使用者的目光以外,還可以搭配炫目的動畫達成一定的互動效果。 此套件必須包含flexslider.css、jquery.flexslider.js、jquery.min.js,可以到Flexslider官網下載資料夾。https://woocommerce.com/flexslider/   JS方面除了上述以外需加入以下   若要改項目參數可以看官網步驟四有詳細的項目列表 例:   HTML   CSS flexslider.css裡的設定可依據實際需要自由修改   範例:https://codepen.io/bok770/pen/zdvZVe  
有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用,它們到底有甚麼功用呢?各有甚麼不同呢?以下讓我們來簡單介紹一下。 大於符號(>) 大於(>)就是選取底下直接的子元素。 以大於符號(.box > p)和空格(.box p)來做比較,先看以下例子:   CSS 使用空格的情況 .box p{ font-size:20px; color:#216AAD;}   使用大於符號的情況下 .box > p{font-size:20px; color: #216AAD; } 由上可知.box p會影響到box這個div底下所有的p元素,而因為「>」只會影響到直接的子元素,所以例子中box底下直接接觸到的p元素只有001跟004,所以只有這兩者會改變。   加號符號(+)則是會影響到後方同層級的第一個元素 範例: html   CSS div + p{ font-size:20px; color:#216AAD;} 由於跟div同層級又直接位於div後方的只有003,所以只有003改變。   而取代符號(~)是影響到後方同層級的全部元素,因此除了003以外004也會改變。 div ~ p{ font-size:20px; color:#216AAD;}   雖然只是CSS撰寫上的小技巧,但是若能夠善加使用這些符號的話,將可以很好地規避每個CSS之間的影響,想必將更有利於撰寫CSS和減少class的數量唷!
如果只是需要圖片自動輪播,不需要手動點圖的功能的話,可以試試以下方法,不用太多原始碼,輕鬆做出有淡入淡出效果的圖片輪播唷!   外掛套件: 官網:http://malsup.com/jquery/cycle/ 網站上展示了六種特效的外掛,分別有:shuffle、zoom、fade、turnDown、curtainX、scrollRight (click),可以多嘗試不同特效。以下以「fade」淡入淡出之效果來示範,其餘效果只要將fade改為想要的特效名稱即可。   首先排列要輪播的圖片 HTML 長寬的設定可以依照圖片尺寸做調整   CSS   JS 需要三個JS檔,可以從官網下載。   範例:https://codepen.io/bok770/pen/VzvbbK See the Pen <a href='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/'>VzvbbK</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.   另外在http://malsup.com/jquery/cycle2/有更多進階的輪播效果可以選擇,皆有詳細的使用步驟,相當方便使用唷!
上次我們介紹了jsFiddle,這次我們來介紹一樣是線上編輯器也很受歡迎的Codepen:https://codepen.io/。簡潔的黑底介面設計,與jsFiddle相比美觀許多,點進網頁就可以看到許多具有精湛效果的範例,讓人一點擊進來便足以被吸引目光,不像jsFiddle需要註冊登入才可分享,Codepen的首頁直接讓你看到來自世界各地的優秀作品!   可以註冊使用,也可以保持未登入的狀態,若是登入使用的話,在尋找過去所寫過的代碼時會比較方便,如果是未登入則必須記得系統生成的保存網址。    使用說明: 按右上角「Create」裡的New Pen可以新增檔案   開起來的頁面,分成HTML、CSS、JS和演示效果共四大區塊。   可以從上方Change View中,依照個人使用習慣改變排版方式。 效果可即時預覽,不像jsFiddle得按Run才會顯示。   點開CSS旁的齒輪圖示可做進階設定,像是CSS Preprocessor可以選SASS、SCSS、LESS等等。 CSS Base可直接載入reset.css,Add External CSS可以載入外部的CSS   JS也一樣可以做設定   完成之後按Save,上面的網址就是你這篇demo的保存網址囉! 但是若需要使用嵌入功能(Embed)的話,必須註冊登入後才可以唷!   範例:一樣以上次的下拉式選單做例子 See the Pen <a href='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/'>brVqKq</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>. https://codepen.io/bok770/pen/brVqKq
jsFiddle是相當實用且受歡迎的線上編輯器,能夠線上測試、檢查所撰寫的code,也可以分享自己寫的code範例,給其他人觀看、修改、學習等等,以達到交流的效果。 jsFiddle:https://jsfiddle.net/ 欄位有html、CSS、javascript、result四欄。 javascript欄位可以自由選擇版本,如jQuery、YUI、ExtJS等等。 一開始左上角有Run、Save、Tidy、Collaborate四個選項 Run:執行代碼並顯示在result Save:儲存 Tidy:將代碼排版弄整齊 Collaborate:可以將自己所寫的代碼拿給其他人討論,限登入使用 註冊步驟簡單,只要有帳密和電子信箱即可。 按Save儲存後,左上角的選項會多出Update、Fork、Set as base   Update:儲存更新版本,每儲存一次,網址上會多一個版本序號。如下圖:   Fork:另存新檔,會另開一個新網址。 Set as base:如果版本存到第二版以後,會將這一版設定為初版的範本。 若要在網頁中嵌入的話,只要點開Embed,將EMBED CODE中的碼複製貼到網頁中就好囉。   若是想用iframe也可選擇,只要按上方的prefer iframe就會產生iframe碼。     範例:在jsFiddle製作下拉式選單  https://jsfiddle.net/bok770/f07pgr91/
上次我們介紹了如何安裝Sublime Text 3,這次我們來簡單介紹幾個Sublime Text 3相當實用的套件。     Emmet  快速提示功能,加速建置原始碼,可減少html和css的撰寫時間 例如: HTML5網頁架構的步驟: 新開檔案,右下角點選html->輸入html:5或是! 再按tab鍵就完成了!   選擇HTML   有了Emmet,只要打上簡易語法+[tab]就可快速產生原始碼  例如:html:5+[tab] 就可以產出htnl5的網頁架構 官方提供的速查表:https://docs.emmet.io/cheat-sheet/   Color Highlighter  點選色碼時會顯示該顏色   ColorPicker  調色盤,按ctrl+shift+c就可以叫出色盤自由選色囉!   P.S.預設中ColorPicker的快捷鍵會跟ConvertToUTF8的衝突到,因此會發生按了快捷鍵卻叫不出色盤的情況,解決方法如下: Perferences> Browse Packages,找到ConvertToUTF8的資料夾   依照自己的作業系統開啟檔案做修改,這邊以windows系統做示範。修改ConvertToUTF8的快捷鍵為[ctrl+shift+c+alt](可依自己的習慣作調整   ConvertToUTF8  Sublime Text 3預設不支援中文編碼,開啟big5會亂碼,因此需要安裝此套件來解決問題。   AutoFileName 輸入路徑或url時,自動抓取檔案路徑   SublimeCodeIntel 功能強大的代碼提示工具。   SublimeLinter 用於提示寫的代碼中錯誤的地方,支持Javascript、CSS、HTML、Java、PHP、Python、Ruby 必須先安裝Node.js http://nodejs.org 接著挑選你要安裝的部分,假如你要檢查CSS的部分,一樣先呼叫Package Control,然後打上SublimeLinter-csslint按enter即可安裝。 Html:SublimeLinter-contrib-htmlhint js:SublimeLinter-jshint 如果不想邊打字邊檢查的話,可以改成存檔再一次檢查的設定。 打SublimeLinter便會有選項讓你挑,選擇Choose Lint Mode 接著會有四個選項,分別是: Background:工作中一直在檢查 Load/save:剛開檔案和存檔時檢查 Save only:只有存檔時檢查 Manual:手動檢查   Sublimerge Pro  可以快速比對兩個檔案的內容差異,雖然Sublime Text本身就可以開兩欄或多欄,但必須以人工方式比對內容太耗時間,此套件可快速標示出兩檔案的差異之處。 先安裝此套件-->將要比對的檔案開啟-->在檔案按右鍵Sublimerge > Compare to你要比對的另一個檔案   兩邊不同的地方會被框起來,對照查看相當方便。   Alignment  自動對齊代碼,使得排列更為整齊美觀。快捷鍵:ctrl+alt+a     以上便是Sublime Text3常用的套件,能夠有效加速開發效率,也還有許多其他的套件可以嘗試使用看看唷!    
Sublime Text 3是相當好用的文字編輯器,有許多方便的套件可以安裝,增進開發效率。 首先到官網下載安裝 http://www.sublimetext.com/3   安裝套件: 開啟Sublime Text 3,從上面主選單的view>show console(或是按快捷鍵ctrl+ˋ) 複製貼上出現的指令碼到主控台命令列中(或是直接到https://packagecontrol.io/installation#st3複製文字內容),然後直接按下enter執行,便可安裝完成。 右邊為整個檔案的縮圖,可以點擊並快速跳到欲修改的部分。   Sublime Text 3預設為英文介面,若不擅長英文也可改成中文,從上方選單: Help>Language>Traditional Chinese(繁體中文)   接著便可以從Preferences > Package Control來啟用 Package Control此套件管理員,許多套件都必須透過它來安裝唷! 快捷鍵:ctrl+shift+p然後輸入install按enter   再來便可以安裝一些套件了! 每個套件都是如上步驟:先按ctrl+shift+p ->輸入install按enter,因此ctrl+shift+p是滿重要的快捷鍵唷!若要移除套件,輸入remove即可。       以上便是Sublime Text 3的安裝入門,下一次我們再來介紹Sublime Text 3推薦安裝的套件!
.demo-2:before,.demo-2 after{position:absolute;}.demo-2 a:hover:before,.demo-2 a:hover:after{color:#F48627;}.demo-2 a:hover:after{right:-20px;content:"]";}.demo-2 a:hover:before{content:"[";left:-20px;} before和after是偽元素,顧名思義就是元素的「前」與「後」,可以在指定元素的前後插入其他內容。 範例:       加入before和after後 CSS .demo-1:before{ content:"一化科技-"; color:#257DB4; font-size:28px;} .demo-1:after{ content:"的專業首選";color:#DF5D22;}   「content」為before與 after必須設置的屬性,意思是插入的「內容」,可以是圖片、文字等等,若未填此屬性,偽元素將不會發生任何作用。 例:content:url ( "img/logo.png" ) 例:content:"一化科技" 若不需要內容的話,可以寫成content:""   以下我們來介紹幾項應用範例:   1.清除浮動 常常清除浮動是設個div{clear:both},但如此一來便會多個無意義的空白元素,我們可以利用after來清浮動。 例: .demo-3{float:left;} .demo-3:after{ content:""; clear:both; display:none; width:0;}   2.配合attr使用 attr是取得選取元素的屬性,例如attr(href)是取得href屬性 以下例子是取得a的title屬性: a::before{content:attr(title)} 效果相當於     3.特效 可以做出在鼠標靠近時文字增加外框的特效   例: E-Work   Html  CSS .demo-2:before, .demo-2 after{ position:absolute;} .demo-2 a:hover:before, .demo-2 a:hover:after{color:#F48627;} .demo-2 a:hover:after{ right:-20px; content:"]";} .demo-2 a:hover:before{ content:"[";left:-20px;}   製作陰影        可以運用偽元素、box-shadow以及z-index:-1來做兩邊陰影。 範例: Html   CSS .box{ width:300px; height:200px;         background:#A7C7D3;         position:relative;         box-shadow:0 0 3px rgba(0, 0, 0, 0.2); } .box:before, .box:after{ width:50%;                                       background:#000;                                       z-index:-1;                                       position: absolute; top:10px; bottom:15px; left:10px;                                       content:"";                                       box-shadow:0 15px 10px rgba(0, 0, 0, 0.5);                                                     -webkit-transform: rotate(-3deg);                                      -moz-transform:rotate(-3deg);                                      -o-transform:rotate(-3deg);                                      -ms-transform:rotate(-3deg);                                      transform: rotate(-3deg);} .box:after{ right:10px; left:auto;                  -webkit-transform:rotate(3deg);                  -moz-transform:rotate(3deg);                  -o-transform:rotate(3deg);                  -ms-transform:rotate(3deg);                  transform: rotate(3deg);                 }   before和after的瀏覽器兼容性相當好,除了IE6 IE7以外不用加上前綴。且可以簡化網頁的html標籤和class數量。
我們常常在修改完CSS上傳後,對方看到的卻還是未改過的舊畫面,這是因為瀏覽器會暫存CSS、js等等這些靜態網頁,雖然按ctrl+F5或是有像「CSS Reloader」這種讓瀏覽器清除快取、重新載入最新CSS的配件可以安裝,然而也不太可能要求每個客戶都這麼做吧! 這時就得用一些小撇步讓瀏覽器加載網頁最新版,讓瀏覽器認為URL變得不同,向伺服器請求新的下載,這樣一來對方就能夠直接看到新頁面了。   方法如下: CSS後面加上?以及日期、亂數、版本等都可以強制瀏覽器讀取最新的CSS唷! 1.CSS?後面加上日期。如:style.css?20170620  2. CSS?後面加上亂數。如:style.css?3344qwe 3.CSS?後面加上版本。如:style.css?v2.11.1 圖片也可以運用唷! 例如: CSS內用到的圖片也行 如:.AD{background:url(../images/banner.png?20170808);} js也可以加上,方法亦同。(如首圖範例)   只要簡單改一下,就可以保證瀏覽器讀取的是最新頁面!
.article{width:960px;margin:0 auto;height:400px;padding:40px;font:24px 'Arial';background-repeat:no-repeat;background-attachment:fixed;background-position:center center;background-size:cover;line-height:28px;}.section1{color:#fff;background-image:url("img/upload//pic-4.jpg");text-shadow:5px 4px 5px #575353;font-weight:bold;}.section2{color:#fff;background-image:url("img/upload//pic-6.jpg");font-weight:bold;text-shadow:3px 4px 5px #373030;}.section3{color:#fff;background-image:url("img/upload//pic-3.jpg");text-shadow:3px 4px 5px #373030;} 什麼是視差滾動呢?其實就是當使用者滾動滑鼠滾輪(捲軸)時,將多層背景以不同速度移動,形成3D的垂直運動效果,造成視覺上的錯覺並增加趣味性。 網路上多的是用CSS搭配JS寫出來的,以下來介紹如何只用CSS表現出最簡單入門的視差滾動。 只要想成背景圖的尺寸必須比包住它的div還大,並且在頁面上須是固定住的,因此在向下滾動時,背景就會固定在原地,但是其上的內容和包住的div卻會隨著滾輪而向上移動,這樣就形成最簡單的視差滾動了。 範例:           Travel     Travel     Travel                 Enjoy Your Life     Enjoy Your Life     Enjoy Your Life     Enjoy Your Life                 HAVE FUN!     HAVE FUN!     HAVE FUN!       Html CSS 要注意的是背景圖的高(height)一定要比div還長,否則向下滾動時就會露餡了!  以上範例便是最基本的視差滾動,很適合想嘗試看看的新手唷!