Pages - Menu

2012年10月26日 星期五

CSS解決各家瀏覽器顯示不一的問題

第一種方法:* {margin: 0px;padding: 0px;}
花了一個多小時再找版面問題,如圖所示,紅色的地方一直消不掉最後發現是各家瀏覽器的問題....

Reset CSS – 重置歸零引用來源

各自為政的瀏覽器

網頁設計的標準(HTML & CSS)是由 W3C 協會所制定的,然而,各大瀏覽器為了展現自身的強大,都自行加入一些有的沒有的設定,造成咱們網頁設計師在排版的時候,就得依每個瀏覽器的不同,而多花好多時間來調整改寫 CSS 語法。

使用 CSS 最令人頭痛的部份就是各家瀏覽器的差異性太多了,用 CSS 寫好的網頁排版明明在 IE 6 看起來很正常,但是到了 Firefox 卻全變了樣,排版的位置都跑位了…. 更何況還有 IE7、IE 8、Safari、Opera、Google Chrome…這麼多種不同的瀏覽器,每一個看起來都是會跑位,很多網頁設計師因此而爆肝的不少!
關於 W3C 標準

造成這樣大差距,主因在於「W3C 所制定的 HTML 標籤在 CSS 中的預設值 」各大瀏覽器的支援程度都不太相同,基本上 Firefox 和 Google Chrome 是最聽話的一家,只要是 W3C 規定的 Firefox 和 Google Chrome 都會乖乖照辦,然而,最不聽話的就是 IE 瀏覽器,常常跟 W3C 唱反調,更慘的是還有 IE6、IE7、IE8、IE9 對於 CSS 的呈現都有些不太一樣啊….唉!
最佳的方法「Reset CSS」

世界知名的 CSS 大師「Eric A. Meyer」整理出一個很棒的解決方法「Reset CSS」,針對 CSS 語法最容易出問題的部份~例如 margin 外間距,各大瀏覽器最常發生不一致的狀況,現在將 margin  全部統一歸 0 ,其他部份,文字大小和行高也全部統成一樣的大小 …. 等,只要掛上這一段「Reset CSS」語法,就可以讓所有的各大瀏覽器乖乖聽話,呈現一樣的結果,CSS 的大同世界就在這裡啊!


/* v1.0 | 20080212 */

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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

2012年10月25日 星期四

CSS命名規則

常用的CSS命名規則


頭:header
內容:content/container
尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
登錄條:loginbar
標誌:logo
廣告:banner
頁面主體:main
熱點:hot
新聞:news
下載:download
子導航:subnav
菜單:menu
子菜單:submenu
搜索:search
友情鏈接:friendlink
頁腳:footer
版權:copyright
滾動:scroll
內容:content
標籤頁:tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標題:title
加入:joinus
指南:guild
服務:service
註冊:regsiter
狀態:status
投票:vote
合作夥伴:partner

註釋的寫法:
/* Footer */
內容區
/* End Footer */


id的命名:
(1)頁面結構
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center

(2)導航
導航:nav
主導航:mainbav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題: title
摘要: summary

(3)功能
標誌:logo
廣告:banner
登陸:login
登錄條:loginbar
註冊:regsiter
搜索:search
功能區:shop
標題:title
加入:joinus
狀態:status
按鈕:btn
滾動:scroll
標籤頁:tab
文章列表:list
提示信息:msg
當前的: current
小技巧:tips
圖標: icon
註釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作夥伴:partner
友情鏈接:link
版權:copyright


class的命名:
(1)顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字體大小,直接使用"font+字體大小"作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
(4)標題欄樣式,使用"類別+功能"的方式命名,如
.barnews { }
.barproduct { }


注意事項::
1.一律小寫;
2.儘量用英文;
3.不加中槓和下劃線;
4.儘量不縮寫,除非一看就明白的單詞.


主要的 master.css
模塊 module.css
基本共用 base.css
佈局,版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
打印 print.css

2012年10月22日 星期一

html video 標籤

src – 你可以直接使用這個屬性來連接你的視頻。如果你的視頻格式是ogg,那麼Firefox, Chrome, Opera可以支援。如果是IE和Safari的呢,你就得使用MPEG4格式的視頻了。為了省麻煩,個人建議還是使用 好了,放上三種格式,這樣不管你在那個遊覽器,只要支援HTML5視頻,就可以播放了。 因此,如果要為了省事,可以三個一起放上去 如此一來就不用怕什麼瀏覽器有支援了。 source src並不是建立列表..要注意

2012年10月18日 星期四

CSS3:在LI後面加上圖片

ul li:after{content:url(http://www.html5sum.com/images/006.small.gif);}/*在所有的li後面加上圖片*/
ul li:nth-child(3)~li:after{content:none;}/*選擇第三個li,並將其之後的所有li所追加的內容content屬性設置為none,變只有前三個有圖*/

2012年10月15日 星期一

讀取畫面時,呈現黑底讀取字樣


<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
             </asp:ToolkitScriptManager>
             
             
             
           
<asp:UpdatePanel ID="UpdatePanel1" runat="server">                  
                 <ContentTemplate>
           
             <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="100"  >
             
                   <ProgressTemplate>  
                        <div style =" background :#000;filter:alpha(opacity=50);position:absolute;top: 0px;left: 0px;width: 1360px;height: 3000px">
                        </div>
                        <div style ="border:solid;background-color:white;position:absolute;top: 220px;left: 500px;width: 250px;height: 60px;padding-left:10px;padding-top:5px;z-index:1">
                        <asp:Image ID="Image1" runat="server" Height="50px" ImageUrl="images/load.gif" Width="50px" />
                        <span style="color: #FF3300">資料處理中,請稍後...
                        </span>
                        </div>  
                        </ProgressTemplate>
                       
                       
                      </asp:UpdateProgress>

內文
.
.
.
.
                      </ContentTemplate>
              </asp:UpdatePanel>

ul 橫項排列

<ul id=\"nav\">

<li><a href=\"http://mid.lt263.com/mb/\">Div CSS教程</a></li>

<li><a href=\"http://mid.lt263.com/mb/\">CSS佈局實例</a></li>

<li><a href=\"http://mid.lt263.com/mb/\">CSS2.0教程</a></li>

<li><a href=\"http://mid.lt263.com/mb/\">CSS酷站欣賞</a></li>

<li><a href=\"http://mid.lt263.com/mb/\">CSS模板下載</a></li> </ul>

CSS3簡易相簿功能

CSS3簡易相簿功能
DEMO
參考網站

CSS #album{ width:1000 px; height:300 px; } #album_ul{ width:125px; /* Width of Tab Image */ float: left; list-style: none; } #main_album{ width:580px; height:305px; overflow:hidden; /* Hides the non selected images */ float:left; }

在文章裡顯示優質的程式碼區

在CSS內加入 CODE { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 8pt; overflow:auto; background: #333 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:200px; height:100px; // for IE6 line-height: 1.2em; } 
之後在文章前後加入<  code>  </  code> 就能有code區塊,
引用自
http://klcintw4.blogspot.tw/2006/11/blog-post_03.html
 另一種
  .post pre { background: #F0F0F0 url(http://你的圖片網址/blogger-code.gif) repeat-y scroll left top; border: 1px solid #CCCCCC; color: #333333; display: block; font-family: Courier New; font-size: 10pt; line-height: 120%; margin: 5px 0 0 20px; max-height: 200px; overflow: auto; padding: 10px 10px 10px 21px; width: 90%; }
這樣子你以後要插入程式碼只要用  <pre> </pre>
包住 也能顯示 引用自:http://gordon168.tw/?p=200

CSS 3 滑鼠移動變大

最近應該會很常寫到css 3 &html5吧...(默)

測試了一段時間才找到其實只要在CSS裡面加


#img2:hover{ transform:translate(80px,120px) rotate(45deg);
-webkit-transform:translate(80px,120px) rotate(45deg);
}
內文
<div id='img2'><img src="../show_mop (4).jpg" width="576" height="360" onMouseMove="img2"></div>