Ghost 发表于 [2009-07-17 15:00]
最近做了一个表单的页面，被输入框的对齐问题烦死了，相信觉得烦的不只我一个，整理下相关的代码，包括输入框内、外文字的对齐。希望对大家有用：
<label><input type="radio" name="info_name" />名称</label>
<label>名称：<input type="text" class="input_text l_type" /></label>
<label>名称：<input type="text" class="input_text l_type" /></label>
input{
vertical-align:middle;
}
input[type="radio"]{
vertical-align:-1px;
vertical-align:middle\9;
}
.input_txt{
height:18px;
height:22px\9;
padding-left:1px;
padding-top:4px;
padding-top:0\9;
border:1px solid #B3D0DF;
*line-height:22px;
}
vertical-align:middle;
}
input[type="radio"]{
vertical-align:-1px;
vertical-align:middle\9;
}
.input_txt{
height:18px;
height:22px\9;
padding-left:1px;
padding-top:4px;
padding-top:0\9;
border:1px solid #B3D0DF;
*line-height:22px;
}
另外，跟大家分享下这次发现的终级hack，比之前《 最新CSS兼容方案 》的简单些：
css.e{
color:#FFF;/* FF,OP */
[;color:#0F0;]/* Sa,CH */
color:#FFF\9;/*IE6、7、8*/
*color:#FF0;/* IE7、6 */
_color:#F00;/* IE6 */
}
@media all and(min-width:0){
.e{
background-color:#FF5500;/* OP */
}
}
color:#FFF;/* FF,OP */
[;color:#0F0;]/* Sa,CH */
color:#FFF\9;/*IE6、7、8*/
*color:#FF0;/* IE7、6 */
_color:#F00;/* IE6 */
}
@media all and(min-width:0){
.e{
background-color:#FF5500;/* OP */
}
}
文章地址：http://www.cssforest.org/blog/index.php?id=141
《[原]输入框对齐问题》采用的授权是创作共用的 “署名-非商业性使用-相同方式共享 3.0 通用许可”.
posted @ 2009-12-17 10:21 css design 阅读(477) 评论(0) 编辑
posted @ 2009-11-17 14:19 css design 阅读(272) 评论(2) 编辑
http://www.cssstickyfooter.com/
这个网页即使内容很少的情况下，它也始终在页面的底部。否则页面底部将留下大量空白。
footer位置自适应
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
ccc
</div>
<div id="side">
sss
</div>
</div>
</div>
<div id="footer">
fff
</div>
<div id="main" class="clearfix">
<div id="content">
ccc
</div>
<div id="side">
sss
</div>
</div>
</div>
<div id="footer">
fff
</div>
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
background: #ddd;
clear: both;}
.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 */
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
background: #ddd;
clear: both;}
.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 */
posted @ 2009-10-20 11:29 css design 阅读(434) 评论(0) 编辑
<ul>
<li><a href='###'>LINK</a></li>
<li><a href='###'>LINK</a></li>
<li><a href='###'>LINK</a></li>
<li><a href='###'>LINK</a></li>
<li><a href='###'>LINK</a></li>
<li><a href='###'>LINK</a></li>
</ul>
CSS
<li><a href='###'>LINK</a></li>
<li><a href='###'>LINK</a></li>
<li><a href='###'>LINK</a></li>
<li><a href='###'>LINK</a></li>
<li><a href='###'>LINK</a></li>
<li><a href='###'>LINK</a></li>
</ul>
li {float:left;}
IE里面在没定义li宽度的时候LINK后面会有空格，只要里面的a也加上float:left问题就解决了
posted @ 2009-09-02 10:57 css design 阅读(632) 评论(0) 编辑
摘要: 现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了这篇文章, 简单的摘译了一下阅读全文
posted @ 2009-05-25 11:03 css design 阅读(216) 评论(0) 编辑
摘要: btn自适应内容大小，这已经不是什么新的写法了，很多人都会用的，而且效果上还是比较实用阅读全文
posted @ 2009-05-21 15:56 css design 阅读(4172) 评论(0) 编辑
