二月, 2009 的存档

margin负值的应用小技巧[隐藏首边框]

展开/收缩

2009-02-28 html/css Der 0 条评论 Tags: Views: 1,152

style部分：
<style type=”text/css”>
* { font-size:14px; margin:0; padding:0; }
ul{ margin:30px;}
li{ list-style:none;}
/*第一种列表模式 [横排]*/
.ul1{ overflow:hidden; zoom:1; } /*设置overflow:hidden隐藏最上边border，zoom:1是为IE6准备的*/
.ul1 li { float:left; padding:0 11px 0 10px; border-left:1px solid gray; margin-left:-1px; } /*margin负值隐藏掉最左边边框*/
/*第二种列表模式 [竖排]*/
.ul2 { overflow:hidden; position:relative; zoom:1;} /*IE下子容器如果包含属性position:relative，则父容器失效[IE bug]，固也设置父容器position:relative解决，zoom:1依然是为IE6所设置[触发万恶的layout]*/
.ul2 li{ border-top:1px solid gray; padding:5px 0; position:relative; top:-1px;} /*竖排margin负值IE6不兼容，改为positon方式处理，与margin负值原理相同*/
</style>

xhtml部分：
<body>
<ul class=”ul1″>
<li>项目1</li>
<li>项目1</li>
<li>项目1</li>
<li>项目1</li>
<li>项目1</li>
</ul>
<ul class=”ul2″>
<li>项目2</li>
<li>项目2</li>
<li>项目2</li>
<li>项目2</li>
<li>项目2</li>
</ul>
</body>

这样我们就可以实现列表项头尾无边框的效果，而无需额外设置诸如<li class=”last”></li>。

以下是效果图：

兼容各大浏览器的CSS绝对底部

展开/收缩

2009-02-26 html/css Der 0 条评论 Tags: Views: 1,207

有时候页面内容过短，撑不满一屏，我们就希望底部能够位于窗口底部，而不是往上缩，这里从网上找到了一个兼容各浏览器的解决方案，本人有点代码小洁癖，稍加改良，代码如下，兼容FF IE67 Opera Safari等。

xhtml部分：
<body>
<div id=”wrap” class=”clearfix”> <!–这里加clearfix是为了兼容Opera–>
<div id=”main”>main</div> <!–嵌套一层是为了使用padding-bottom不被footer挡住底部–>
</div>
<div id=”footer”>footer </div>
</body>

style部分：
.clearfix:after { content:”"; height:0; visibility:hidden; display:block; clear:both; } /*传说中的clearfix ^_^.*/
.clearfix { zoom:1; } /*IE闭合浮动(触发layout)*/
html, body { height:100%; }
#wrap { min-height:100%; _height:100%; } /*对于ie6设置height:100%;其他设min-height即可。*/
#main { padding-bottom:150px; background:#bbb; } /*padding值与footer同高，以避免被footer挡住。*/
#footer { margin-top: -150px; height: 150px; background:#36c; } /*margin负值果然好用。。*/

<———————————–华丽的分隔线—————————————–>

另一种更简洁的解决方案：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>我个是非常好的小页脚</title>
<meta http-equiv=”Content-Type” content=”text/html” charset=”utf-8″    />
<style type=”text/css”>
html{height:100%;overflow:auto;}
body{margin:0;padding:0;position:relative;_height:100%;min-height:100%;text-align:center;}
.main{border-bottom:60px solid #fff;}
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}
</style>
</head>
<body>
    <div class=”all”>
        <div id=”topbar”>菜单部分</div>
        <div class=”main”>
                我是主体，我是核心<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                虽然我是主体，但是你可以删除我其中的内容再看看我下面的页脚
        </div>
        <div id=”footer”>
            我是安分守己的页脚，我只安静的待在页面的最下方
        </div>
    </div>
</body>
</html>

改变选中文字的背景色 [IE不支持]

展开/收缩

2009-02-25 html/css Der 0 条评论 Tags: Views: 3,834

<style type=”text-css”>
::-moz-selection { background:#f50; color:#fff;} // FF私有属性
::selection { background:#f50; color:#fff;} //其他标准浏览器
</style>
这样我们就可随意设定选中文字的背景色了，不再是那永远的蓝色，可惜IE不支持

网站易用性优化调节

展开/收缩

2009-02-25 web-performance Der 1 条评论 Tags: Views: 4,378

a:focus   //为键盘tab导航时定样式[IE不支持，对于IE设置a:active即可达到效果]
<script type=”text/javascript”>
    document.getElementById(‘inputId’).focus();
</script>   //为搜索框登录框等设置默认焦点。
tabindex=1…. //为搜索登录框设置合理的tab顺序，方便纯键盘操作，从1开始是为了避免部分浏览器不识别0的状况，设为-1将永远不会跳到该元素。
accesskey=”x” //为搜索登录框提供快捷键，ie是alt+key(这里是x),ff2.0以上是alt+shift+key.快捷键可通过title<a href=”#” title=”此链接的快捷键是x” accesskey=”x”>链接</a>来告知来访者。
网页title格式用 [本页内容标题(在前)+全站标题(在后)] 形式，以便在打开多个窗口时可以区别开来。
正文内容在代码上要置于其他内容之前。
还有的继续更新中…

图片在固定容器中垂直居中

展开/收缩

2009-02-24 html/css Der 0 条评论 Tags: Views: 6,762

以下内容转自淘宝前端考题

解法一：
优点：代码简洁
缺点：用到了hacks，图片下如果有文字会有问题。

<style>
.box {  
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell; vertical-align:middle;  
/*设置水平居中*/
text-align:center;  
/* 针对IE的Hack */
*display: block;
*font-size: 175px; /*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial; /*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px; height:200px; border: 1px solid red; }
.box img {  
/*设置图片垂直居中*/
vertical-align:middle; }
</style>
<div class=”box”> <img src=”http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg” /></div>

解法二：
优点：无hacks，图片下允许有文字
缺点：用到了IE expression语句，相对上述方法比较耗客户端资源。

<style>
.box {
text-align:center;
width:200px;
height:200px;
border:1px solid #ff0;
vertical-align: middle;
display: table-cell;
}
.box img{
margin-top:expression(100-this.height/2);
}
</style>
<div class=”box”> <img src=”http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg” /></div>

以上方法缺陷是box容器不能float或绝对定位，解决办法为在box外套一层再float或绝对定位即可。

button 与 input

展开/收缩

2009-02-22 html/css Der 0 条评论 Tags: , Views: 3,407

一句话概括主题：<button>具有<input type=”button” … >相同的作用但是在可操控性方面更加强大。

HTML 4.01规范的Forms部分指名表单有以下几种控制类型：buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls, object controls. 其中除了buttons/menus/object controls之外，都是由<input>完成。

我这里说的是<button>和<input>。

<button>和<input>
规范中指名：可以用<button>和<input>来做表单按扭。不同的按钮类型请参考这些元素的详细定义。要注意的是<button>比<input>支持更丰富的表现功能。

一些区别
大家都知道<input>可以这样用（实际上是一定要这样用）：<input type=”submit” value=”OK” />，一定要这样闭合。而不是：<input type=”submit” value=”OK” ></input>。因为起始标签为必须，而关闭标签是禁止的。

<button>比<input>更厉害的地方就在于它可以包含内容。它的值并不是写在value属性里，而是包含在标签中。如：<button>OK</button>。<button>的起始标签和关闭标签都是必须的。这样你便获得了样式化的主导权。

你可以这样写：<button><strong>OK</strong>, I do.</button>，甚至是插入图片：<button><img src=”button.gif” alt=”" />, it’s great.</button>。有点类似于<input type=”image”>，但是显然强大多了。

最后要注意的是，被<button>包含的图片，不能使用热点地图，即不能<img src=”foo.gif” usemap=”…” />，这是不合法的。当然也不能再包含诸如input, select, textarea, label, button, form, fieldset, iframe,和isindex（不推荐使用）元素了。

css reset [跨浏览器重设]

展开/收缩

2009-02-22 html/css Der 0 条评论 Tags: , Views: 1,021

/* Public Css */
body{ font:12px/1.5 Arial, Helvetica, sans-serif; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset,legend, input, button, textarea, p, blockquote,th, td { margin:0; padding:0; }
h1,h2,h3,h4,h5,h6 { font-size:1em;}
address,code,caption,th,cite,dfn,em,var{font-style:normal;}
q:before,q:after{ content:”";}
table { border-collapse:collapse; border-spacing:0; }
caption,th{ text-align:left;}
ins{ text-decoration: none;}
del{ text-decoration: line-through;}
fieldset, img { border:none; }
legend{ display:none;}
input{ vertical-align:middle;}
ol,ul{ list-style:none;}
a:link,a:visited{}
a:hover,a:focus,a:active{}
.clearfix:after{ content:”"; height:0; visibility:hidden; display:block; clear:both;}
.clearfix{ zoom:1;}

12
>>
┊ 后台管理 ┊ github RSS ┊ 微博 简历
RSS订阅