文章專區

網頁設計相關文章

我們常常在修改完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還長,否則向下滾動時就會露餡了!  以上範例便是最基本的視差滾動,很適合想嘗試看看的新手唷!
 fliter:drop-shadow顧名思義就是投影濾鏡,因此透明的部分不會有效果,可以用在將圖片加上陰影等等。 chrome瀏覽器需加上-webkit- 數值設定: fliter:drop-shadow(x偏移 y偏移  模糊大小 顏色)   例:fliter:drop-shadow(4px 5px 5px #000)   fliter:drop-shadow與box-shadow的差異 可能看上面範例會覺得跟box-shadow這屬性沒什麼兩樣,但看以下範例就能清楚明瞭:   .pic01{-webkit-filter: drop-shadow(5px 5px 8px #000); }   .pic03{ box-shadow:5px 5px 8px #000; }   明明png圖片的背景是透明的,但是box-shadow的陰影卻還是以白背景做呈現,而fliter:drop-shadow卻能夠以實際投影的方式做出陰影效果。兩者的陰影效果也有所不同,box-shadow的陰影較深且模糊範圍較小,fliter:drop-shadow則是陰影較淺、模糊範圍偏大。   下次發現圖片加陰影還是會留一大片空白時,不妨使用fliter:drop-shadow唷!  
繼上次的文章介紹了CSS Lint這項可以線上檢查CSS的工具後,這次介紹CSS Compressor這個能夠精簡壓縮CSS的工具。 1.進入CSS Compressor的網站http://www.pagecolumn.com/tool/css_compressor.htm   2.將寫好的CSS複製貼上,按下GO鍵。   3.壓縮完成之後,可以看到壓縮前與壓縮後的檔案大小,以及壓縮率。   如圖中例子的CSS從21kb壓縮到16kb,足足減少了5kb,壓縮率近23%!        

ARTICLE

5

CSS的text-indent

 text-indent屬性可以幫段落文字做縮排與凸排,將文字調到想要的位置上,相當方便唷! 比如說想將第一行文字凸出一個字的空間,如下範例:   *一化科技 *一化科技是您的好選擇 *一化科技-網頁設計的專業首選 *「一化網頁設計」由一群富含專業熱情、深厚技術背景的人才所組成。從網頁設計、網站設計與統合、企業內部程式與e化的輔導及建置,均提供一貫的解決方案,不同於一般的網頁設計公司或個人工作室。   CSS: ul{font-family:'微軟正黑體'; font-size:16px; line-height:24px; padding-left:1em;} ul li{text-indent:-1em;}   裡面要作凸排的文字設text-indent:-1em表示向左移動一個字的空間(1em),em是文字的單位之一,取決於你當時設定的文字大小,如上述範例設定font-size:16px,那麼在這段文字裡1em=16px。同理,若你要設定向左移動三個字的話,便設text-indent:-3em即可。 而由於text-indent的值設定成負數會使得文字凸出區塊之外,所以外面的容器要設定成padding-left:1em 將整塊文字往右移。   常見的文字首行縮排也是如上作法,只是將text-indent的數值從負數寫成正數而已,而容器則不須另外設定。 CSS: ul{font-family:'微軟正黑體'; font-size:16px; line-height:24px; padding-left:-1em;} ul li{text-indent:1em;}   善用text-indent可以幫助調整文字版面,算是個網頁設計上的小技巧,不妨善加使用唷。
CSS Lint是線上CSS檢測工具,能夠線上分析你所寫的網站CSS有無潛在問題,會清楚列出出錯行數與問題所在,方便進行修改。 步驟如下: 1.進入CSS Lint網站http://csslint.net/ 2.在大白框裡複製貼上寫好的CSS碼,按LINT!鍵     3.會列出有多少錯誤與警告(如下圖的CSS列出了0個錯誤與43個警告   下方會列出警告的清單,包含行數與問題敘述,之後便可針對一個個警告進行CSS修改了唷!   網頁設計師不妨在寫完後貼上檢測看看,有助於讓你的CSS樣式表更精簡唷!  
之前的文章曾介紹過CSS3:nth-child(n)選取器的功能,這次來介紹功能看似很像的:nth-of-type(n)。 :nth-of-type(n)跟:nth-child(n)一樣都是CSS3的偽類選取器,在寫法上和選取順序沒有太大的不同。   :first-of-type選取第一個元素 ex: ul li{background:#4D90BB; } ul li:first-of-type{ background: #E16F6F;}   :last-of-type選取最後一個元素 ul li: last-of-type{ background: #E16F6F;}   :nth-of-type(n)選取第n個元素 ul li:nth-of-type(3){ background: #E16F6F;}  選取的為第三項   :nth-of-type(odd)選取奇數 ul li:nth-of-type(odd){ background: #E16F6F;}   :nth-of-type(even)選取偶數 ul li:nth-of-type(even){ background: #E16F6F;}   :nth-of-type (an+b)自訂數列 ul li:nth-of-type(2n+1){ background: #E16F6F;} n的值從0算起,因此第一與第三項會被選取   乍看之下跟nth-child(n)沒什麼不同,但參照以下範例便可理解兩者的不同之處。 <ul>     <li>001</li>     <li>002</li>     <li>003</li>     <li>004</li> </ul> CSS分別設定: ul li:nth-of-type(3){ background: #E16F6F;} ul li:nth-child(3){ background: #E16F6F;} 結果兩者相同        但若在每個<li>之間加上同層級的<hr>時 <ul>     <li>001</li>     <hr>     <li>002</li>     <hr>     <li>003</li>     <hr>     <li>004</li> </ul>       :nth-of-type能如實選取到指定的第三項<li>,而:nth-child卻選取到了第二項,這是為甚麼呢?因為以範例來說,:nth-child是選取了ul裡的第三個子元素,所以同層級的<hr>也算進去了。 由以上實例可顯示,:nth-of-type比起:nth-child在選取上更精確、更不易出錯,所以建議若要指定某元素裡的第幾個標籤,可以多多使用:nth-of-type唷!          
想要讓你的圖片隨著螢幕放大縮小嗎?想要讓你的圖片放滿版嗎?不妨來試試CSS3的新單位vh、vw吧! vh、vw在使用上與百分比%很相似,vh代表view height,指的是螢幕可視範圍高度的百分比,而vw則代表view width,是指螢幕可視範圍寬度的百分比。 vmin:寬度或高度較小值的百分比 vmax:寬度或高度較大值的百分比   像素px、百分比%、vw vh的比較 像素px:最基本易懂的單位,不會跟著視窗縮放尺寸。 例 : width:200px; height:100px;   百分比%:由於沒有任何內容物,所以跟vh vw不同,即使設定了數值也不會顯示,除了這點以外,百分比是以父元素為基準做百分比縮放,而vh vw則是以裝置(螢幕視窗)大小為基準。   vh vw : 會隨著網頁縮放而改變尺寸。比如說設定一個div為width:50vw;height:30vh(為了方便顯示,另設定一個div為width:100vw;height:100vh來包整塊可視範圍)。 意思就是說這塊div會占可視範圍寬度的50%、高度的30%   這個新單位會隨著網頁縮放而改變,因此在RWD網頁設計的應用上是相當實用。

ARTICLE

9

常用的CSS簡寫

在撰寫上透過css的簡寫可以讓文件變更小,更易讀,以下為幾項常用的CSS簡寫:   margin padding間距的設定 可縮寫成四個數字, 如:margin:10px 30px 20px 10px 填寫順序依序為上右下左,想成從上方順時針數下來就對了。 margin:10px 30px第一數為上下的值,第二數為左右的。 margin:10px表示四邊的值。   邊框border的設定 border: 1px #c00 solid 依序為 border-width邊框寬度、border-color邊框顏色、border-style邊框樣式   background背景設定 background:url(001.jpg) #000 center no-repeat 依序為background-image背景圖片、background-color背景顏色、background-position背景定位、background-repeat背景重複   font文字設定 font: oblique bold 30px 24px 新細明體 依序為font-style文字樣式、font-weight文字粗細、font-size文字大小 、line-height行距、font-family文字字型 透過css的簡寫可以讓文件變更小,更易讀。如果能多加利用的話,便可有效節省css的撰寫量唷。 
 上回介紹了flex-container(容器)可使用的屬性,這次來介紹flex-items(子項目)可操作的屬性。 一樣先來張flexbox盒子模型圖複習一下(來源:MDN)   關於flex-items可操作的屬性,有以下幾項: order可以決定項目的排列順序。   例:下面兩圖僅差在是否加入了order,若未加order指定順序的話會如右圖所示。左圖則是已加入order。   flex-grow可設定項目們在容器內的比例。 例:每個項目在容器內的比例是2:1:3:2   flex-shrink與flex-grow相反,當項目將容器擠爆時,flex-shrink會把項目們縮小設定的比例。會根據flex-shrink設定的值來決定縮小的倍數。   下圖的縮小倍數比:1:2:3:4:5   flex-basis項目的基本大小,有點類似min-width,算是代替width用的,優先權比width高,但若兩者其中之一為auto,會以沒設auto的為優先。 關於flex-grow、flex-shrink、flex-basis此三項屬性,這邊有更詳細的解釋     flex由flex-grow、flex-shrink、flex-basis三個屬性組成,例:.flex{flex:2 1 300px;}   align-self可以指定某個項目的行為,會覆蓋容器align-items的設定。 auto:預設值,繼承容器的align-items屬性,若沒有則為stretch flex-start:對齊容器最上面的cross start flex-end:對齊容器最下面的cross end center:垂直置中 stretch:將flex項目撐開至容器的高度 baseline:以所有flex項目的基線作為對齊標準 例:下圖本來將容器設align-items: flex-start(靠齊最上方)。然而在第三項與第四項分別設了align-self: center(垂直置中)與align-self: flex-end(靠齊最下方),覆蓋了容器align-items: flex-start的設定。