標籤存檔: 網頁設計

台灣佳典提琴網站設計

台灣佳典提琴網站設計

台灣佳典提琴網站設計

製作佳典提琴網站也有十年了,今年第三度改版,改使用WordPress建置符合RWD版型。

 

閱讀更多

CSS筆記

CSS筆記

CSS筆記

 


讓英文字元自動斷行

body{ word-wrap: break-word; word-break: break-all; }

 


CSS等高

#wrap { overflow:hidden; }
#left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }
 

透明

color: rgba(255, 255, 255, 0.8);
background-color: rgba(142, 213, 87, 0.3);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;

文字陰影

text-shadow: x軸位移 y軸位移 柔邊 顏色
例如:
text-shadow: 1px 1px 2px #777;

box-shadow

.shadow {
box-shadow: 3px 3px 3px 3px #669FEC;
}

Class 跟 ID 的比較

這兩者最大的不同,是在於 ID 選擇器在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。第二個不同的地方,是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。

box-sizing: border-box;

避免預設寬度被margin padding等元素撐開

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 }

 

clear: left;

元素加上一個 clear: left; 可以避免其他有標示 float: left;的元素影響

overflow: auto;

內容高度可隨著其他有標示float的元素做變化

.clearfix {
 overflow: auto;
 }

width: 50%;

 

@media screen

介紹:http://fundesigner.net/css3-media-queries/

@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}

column-count

實現多欄文字

http://kayeteaches.blogspot.tw/2013/03/css3-multiple-columns.html

 

flex

RWD設計超方便

http://www.oxxostudio.tw/articles/201501/css-flexbox.html

 

CSS 字型大小 pt, px , em , 百分比 percent 之比較

※ 1em=100%=12pt=16px
※ 0.75em=75%=9pt=12px

pt: 一般印列用字體尺寸,
px: 像素單位(pixel)
em:同百分比,1em=100%=12pt=16px = 瀏覽器預設尺寸,通常是 16px,em可以使用階層的方式設定,如第一層設定為2em,其子階層設定為 0.5em, 則子階層的實際尺寸為(2*0.5 = 1em)
percent(%): 同上,如第一層設定為200%,其子階層設定為 50%, 則子階層的實際尺寸為(200%*50% = 100%)

在CSS檔中嵌入所要的字型語法

字型若是ttf轉檔可轉成woff(網頁開放字型格式):https://fontconverter.com/

將woff上傳至fonts目錄

@font-face {
font-family:"HonyaJi";
src: url("/fonts/HonyaJi.woff") format("woff");
}

body {
font-family: 'HonyaJi' ;
}

CSS筆記

font-family: system-ui; (使用系統字型)

 

CSS筆記

CRM 網站版型設計

CRM 網站版型設計

CRM 網站版型設計

閱讀更多

理財網站設計

理財網站設計

理財網站設計

閱讀更多

China Campno 網站

China Campno 網站

閱讀更多