標籤存檔: 網頁設計
RonHuw 網站設計
//0 評論/在: 網頁設計前端開發/作者: 多力哥/ 使用者瀏覽數大蒂會計事務所網頁設計
//0 評論/在: 網頁設計前端開發/作者: 多力哥/ 使用者瀏覽數
第三度改版!
閱讀更多
CSS筆記
//0 評論/在: 網頁設計前端開發/作者: 多力哥/ 使用者瀏覽數
讓英文字元自動斷行
body{ word-wrap: break-word; word-break: break-all; }
CSS等高
透明
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' ;
}
font-family: system-ui; (使用系統字型)
CRM 網站版型設計
//0 評論/在: 網頁設計前端開發/作者: 多力哥/ 使用者瀏覽數China Campno 網站
//0 評論/在: 網頁設計前端開發/作者: 多力哥/ 使用者瀏覽數近期文章
- 雙連站台灣感性便當 滷肉飯 豬腳飯 腿庫飯 2025 年 7 月 2 日
- 場外一樣很熱鬧 2025 BABYMONSTER 1ST WORLD TOUR 體育大學綜合體育館 2025 年 6 月 30 日
- 水草缸新大珍珠飄起來了 只好翻缸來造景 2025 年 6 月 23 日
- Microsoft Clarity 網站熱點分析 以視覺化的方式呈現使用者在網站上的行為模式 2025 年 6 月 23 日
- 趕時間的可以刷一盤!土城延吉街太祖魷魚焿 炒飯炒麵 2025 年 6 月 20 日
- 越夜越美味!饒河夜市 大川炒羊肉炒牛肉 2025 年 6 月 11 日
- 會考結束!不衝樂園衝來白沙屯拱天宮和山邊媽祖 2025 年 6 月 8 日
- 宜蘭阿嬤家端午節拜拜 2025 年 6 月 5 日
- 土城家樂福也有好吃的烤肉店了!鉄鮮森燒肉店 2025 年 6 月 2 日
- 吃一盤超滿足!彰化田中淞坊炒飯 2025 年 5 月 28 日
標籤
熱門文章
- 水草缸初學者心得(持續更新) - 瀏覽數
- 滑鼠點一下會變成點兩下?請你跟我這樣做 - 瀏覽數
- CO2高壓鋁瓶2L灌氣心得分享(氣體行真心不騙) - 瀏覽數
- 養好水草不可缺的CO2設備大公開及安裝教學 - 瀏覽數
- 田宮四驅車新手要買那些配件與特色攻略教學(持續更新) - 瀏覽數
- 三陽 SYM FNX 125 ABS 機車(騎乘保養維修心得持續更新到2099年) - 瀏覽數
- 土城日月光Shock燒肉獨立包廂火烤兩吃 - 瀏覽數
- 水草缸水質檢測(pH、GH硬度、KH、二氧化碳濃度)與改善(pH增酸劑) - 瀏覽數
- 無CO2一呎水草缸造景二(全記錄) - 瀏覽數
- 在Apache上設定安裝SSL憑證(XAMPP) - 瀏覽數