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