CSS & Javascript學習記錄

一些雜記. li列表默認display:block .塊級元素,每個後換行.若使列表不換行.可以給li加 display:inline ; 或者加 float屬性使其脫離文檔流.推薦後者特別是在li裡面是a 鏈接時候,可能需要把a元素設為display:block.這樣如果把li設為display:inline後仍然會換行 貌似還有一種是給li加 white-space: nowrap .也可以不換行. CSS配合JS的下拉菜單.經典布局是 <ul> <li><a>…</a><ul><li></li><li></li>….</ul></li> <li><a>…</a><ul><li></li><li></li>….</ul></li> </ul> 即ul裡面的li套ul,存放隱藏區塊(Visibility: hidden) .這個ul塊必須採用絕對定位(position: absolute) position:absolute如果沒有配合top left bottom right ,就相對父標籤定位 Javascript實現快捷鍵代碼: document.onkeypress=function hotkey(e) { var code= String.fromCharCode(e.which); switch( code) { case ‘s’ : ….. break; ……….. default: break; } }

Continue reading

DIV +CSS區塊自適應高度

做主題遇到這個問題.假設下面區塊: 經典的二欄+Footer欄布局.content /sidebar區塊分別設置為 向左/右float即可.如果三列則兩列浮左,一列浮右. 通常這樣沒有問題.但如果給區塊加上background-color:(背景顏色),例如: 默認背景(page)白色 content 列,背景紅色 sidebar列: 背景黑色. 通常情況下,content 和sidebar的高度塊不會相等,那麼結果就會出現其中一列背景正常,而另一列上面是背景色,下面是白色!. 這個貌似是DOV+CSS下經典的自適應高度問題.我嘗試給 sidebar /content列加上 height: 100% ;和 min-height:100%,均無效. (不知道原因,手冊上說min-height百分比單位為參照父元素寬度) . 有看到一種方法: page塊背景色:設為黑色 content 列,背景 紅色 sidebar列: 背景 黑色.. 但這樣只有在Sidebar列高度超過 content列時才有效!!,如果反過來呢? 我從現在使用的主題里找到了解決方法 #page { background: url(“images/back.jpg”) repeat-y top right; } 把 back.jpg這個圖片顏色設為Sidebar背景色,寬度設為和Sidebar寬度相等(sidebar有margin的話相應減去),從右上方開始填充!,那麼就正好覆蓋Sidebar塊所在的整個列. 這應該是最佳方案了

Continue reading

修改一下CSS

修改了本博客頂部CSS代碼。 原來的模版頂部導航條代碼: navi區塊放置 ul 無序列表 CSS: #topbar { background: #83C21F; width: 100%; height: 50px; border-bottom: 5px solid #A2D157; margin-bottom: 8px; } #navi { width: 770px; margin: 0px auto; text-align: center; line-height: normal; 偶在頂部導航條右邊加了一個導航菜單 Div塊放在 topbar 和 navi之間: 給custom1 設置為 float:right ; 但設置後這塊並沒有與navi塊對齊。 我想可能由於 navi塊沒有設置 float:left。 如果要改的話: 在Topbar加上 text-align:center ; 把navi改為 width:660px ; float:left 把加上去的導航欄改為 width:110px […]

Continue reading

IE6下CSS三列定位問題

偶博客現在用的主題,在IE6下顯示有一個小問題: 底部Meta 欄會跑到”Recent Posts ,Recent Comments”的下面,造成無法對齊:如下圖 而在FireFox,IE7中顯示正常 這個問題雖然不大,但還是另我頭痛 偶對CSS可以說十竅通了九竅,換言之,一竅不通 (真的是一點也不懂.汗,各位別笑偶) 今天硬着頭皮,來研究一下 用瀏覽器打開,看看底部代碼 Recent Posts …….. …….. Meta 到WP後台主題編輯器,看一下這個主題style.css,相關的CSS樣式: .footer-recent-comments { width: 250px; float: left; margin-left: 20px; } .footer-recent-posts { width: 250px; float: left; position: relative; margin-left: 10px; } .footer-meta { width: 225px; float: right; margin-left: 10px; } 偶根本不懂CSS,只好隨便改了. 首先把 footer-meta 的 float: right; 改為 “position:right”,刷新看看 […]

Continue reading