小湯湯筆記

2011年8月18日星期四

css設定table預設間距為0

參考：http://www.52css.com/article.asp?id=593

.tb1 {
border-collapse:collapse;
}

2011年8月10日星期三

CSS 常用命名表

規劃

wrapper 包裝 wrap
sidebar 邊欄 side
navigation 導航 nav
content 內容
footer頁腳
top 頁首
menu菜單
main 主內容
inner 裡面
supp 增刊
column欄位 col
breadcrumbs路徑(麵包屑)

版面類

欄目 column
容器 container
內容 content
頁尾 footer
頁首 header
版型佈局 layout
首頁 index
頁面主體 main
側欄 sidebar

導航類

主導航 main_nav
全域導航 global_nav
導航 nav
領行列 navbar
左導航 left_sidebar
右導航 right_sidebar
子導航 subnav
頂導航 topnav
工具條 toolbar

菜單類

菜單 menu
子菜單 submenu
菜單內容 menu_content
菜單容器 menu_container

樣式類

箭頭 arrow
橫幅廣告 banner
分界線 boundary
按鈕 btn
按鈕 button
轉角/圓角 corner
文字 font
標題 title
圖示 icon
項目 item
列表 list
主要的 master
頁面 page
標示 mark
分段 section
邊導航圖標 sidebar_icon
標籤頁 tab
樣式/主題 theme
閃爍 twinkle
小部件 widget
包裝器 wrapper
頁面外圍控制整體佈局寬度
區域 zone

功能類

檢舉 abuse
點擊這裡 click_here
收藏 coffin
塌陷 collapse
完成的,結束的 complete
改變,轉變 conversion
當前的 current
預設 default
下載 download
下拉 drop
編輯 edit
相等 equals
例外 exception
完成,結束 finalize
折疊 fold
雜湊 hash
局部的 localized
管理 manager
方法 method
即時通訊 messenger
提示信息 msg
註釋 note
通知,告知;報告 notify
語法分析 parse
語法分析器 parser
傳送 pass
位置 place
投票 poll
發表文章 post
預覽 preview
列印 print
發布 publish
查詢 query
收到,接到 receive
重填 reset
滾動 scroll
搜索 search
搜索框 search_box
進階搜尋 search_further
搜尋結果 search_results
統計 statistics
狀態 status
串流 stream
訂閱 subscribe
送出 submit
查詢訂閱 subscriptions
小技巧 tips
追蹤清單 track
指導 tutorial
上傳 upload
驗證碼 verification_code
觀看 view
投票 vote

內容類

檔案/文件 archive
文章 article
所有文章 article_all
文章分類 article_folder
招呼語 blast
部落格 blog
部落格資料 blog_info
麵包屑 bread_crumb
頁面所處位置導航提示
行事曆 calendar
徵才 careers
社群家族 club
評論、評鑑 comment
社群家族 community
位置導航 crumb
娛樂 entertainment
電子報 epaper
活動 event
常見問題 faq
回覆意見 feedback
論壇 forum
友情鏈接 friend_link
強力搜尋 gd_search_tech
留言板 guestbook
指南 guide
公會 guild
熱門 hot
熱門連結 hot_link
學習 learning
介紹 introduce
徵才 job
知識 knowledge
新聞 news
記事本 notepad
即時訊息 online_news
作品 portfolio
活動比賽 promo
排行 rank
景點 scenic
服務 service
招呼語 set_blast
即時留言板 shoutbox
網頁導覽 sitemap
技術支援 support
旅遊 travels
視訊 video

網站類

關於 about
關於我們 about_us
公司 company
公司簡介 company_profile
聯絡 contact
聯絡我們 contact_us
版權資訊 copyright
資訊 info
網站標誌 logo
商標 label
組織 organization
合作夥伴 partner
薪資福利 remuneration
摘要 summary
系統 system
網頁快訊 web_slices

購物類

atm atm
現折活動 allowance
配件 appendix
紅利折抵 bank_bonus
競標 bid
取消訂單 cancel
刷卡 card
換貨 change
推薦 commend
優惠卷 coupon
顧客 customer
顧客服務 customer_service
運送 deliver
折扣 discount
快速到貨 express
購物流程 flow
贈品 gift
集殺 group
詢價 inquire
服務中心 help
訂購單 order
訂單查詢 order_check
包裝 packing
付費 payment
集購 payshop_flow
價格 price
產品名稱 product_name
產品 products
嚴選保證 promise
估價 quotes
維修 repair
退貨 return
交易安全 safety
購物 shop
商店 store
超商取貨付款 store
補貨通知 supply_info
信用卡線上分期 time
統一編號 unified business no.

會員類

通訊錄 abook
帳務 account
地址 address
相簿 album
申請 apply
審核 approval
黑名單 black_list
信箱 email
忘記密碼 forgot_password
忘記帳號 forgot_username
服務條款 legal
登入 login
登出 logout
登入條 login_bar
邀請朋友 invite
加入 join_us
會員 member
會員登入 member_login
個人 personal
個人資訊 personal_information
照片 photo
隱私權政策 privacy
個人簡介 profile
個人相片 profile_photo
註冊 register
轉寄好友 send_friend
註冊 sign_up
登入 sign_in
登出 sign_out

2011年7月28日星期四

純CSS 下拉式選單

參考：http://ucmic.blogspot.com/2011/04/css-menucssmenu.html

CSS min-height(解決ie6不支援min-height問題)

參考：http://blog.makezine.com/archive/2008/03/easiest-crossbrowser-css-minhe.html

===========css Str============
min-height:768px;
height: auto !important;
height: 768px;
===========css End============

利用!important讓ie6讀不到height:auto(ie6看不懂!improtant)，
其他瀏覽器則會以height: auto !important;為主
而不被第3行語法設定影響。

2011年7月27日星期三

多層選單(css+ jquery)

參考：http://qrayg.com/learn/code/cssmenus/

下載：https://sites.google.com/site/fanlixiazai/home/xiao-tang-tang-bi-ji/CssJqueryMenus.zip?attredirects=0&d=1

因為版型需要一個下拉選單，

所以找到這個範例檔，

將多餘的css拿掉，

只留跟選單相關的css設定，

各瀏覽器支援狀況

Firefox 1.x+ : any OS (works!!!)
IE 5.5+ : Windows (works!!!)
IE Mac : any version, OS 9-X (probably doesn’t work)
Safari 2.0+ : OS X (works!!!)
Safari 1.x : OS X (probably doesn’t work)
Opera 7+ : any OS (works!!!)
Opera 1.x-6.x : any OS (probably doesn’t work)

Reset CSS

參考：http://meyerweb.com/eric/tools/css/reset/

下載：http://meyerweb.com/eric/tools/css/reset/reset.css

將各瀏覽器css樣式設定成統一格式

例：

margin 歸 0
文字大小、行高統一大小

reset.css

==========================Reset CSS Str==========================

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

/*clearfix(解決浮動高度問題)*/

/*===========clearfix Str============*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
/*Hides from IE-mac\*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/
/*===========clearfix End============*/

==========================Reset CSS End==========================

reset-fonts-grids.css

設定css之前先引入css初始化的css檔，

可以讓各瀏覽器設定統一，

這樣在做美化時也比較不會有問題。

首頁

2011年8月18日 星期四