css/javascipt - 老哈-主要从事交互设计、前端编程、网站优化seo

2008年06月15日

清除浮动的良性方法

当我们对所操作元素进行浮动的时候，它就脱离了文档流，不占空间，从而影响了父级元素所占空间产生改变。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清除浮动</title>
<style type="text/css">
.box{background:#ccc}
.box img{float:left}
</style>
</head>
<body>
<div class="box clear">
<img src="images/1.jpg" alt="" />
<p>文本介绍</p>
</div>
</body>
</html>
面对这样的问题，常用的解决方法是在元素末增加:<div style="clear:both"></div>.来清除浮动。这就等于在HTML文档中增加了无意义标签，而且给下次对网页进行重新布局增加负担。
所以如果能在样式文档中能直接清除浮动那是最好不过的。理论上可以用高级选择符可以处理，比如我们在样式表中增加：
.clear:after{content:".";height:0;visibility:hidden;display:block;clear:both}
这种处理方式是使用内容申明在元素末增加新的内容，同时又使用height:0;visibility:hidden;剔去生成内容所占的高度。
不过针对IE7以下的版本并不支持高级选择符，所以仅在FF这些支持高级选择符的浏览器下显示正常。因此我们又需要增加一下代码来支持IE：
.clear{display:inline-block}
.clear{display:block}
需要解释的是：IE和FF本身并不支持display:inline-block（将对象呈递为内联对象，但是对象的内容作为块对象呈递）。但是IE有一个经典的BUG就是先后把display放入CSS声明中，这样就会先触发块元素然后将块元素呈递为内联对象。
其实方法并不是唯一的，比如还有两种简单的方式可以处理IE下问题：
.clear{display:inline-block;height:1%}
和
.clear{display:inline; zoom:1}

老哈21时07分发表在css/javascipt 频道 | 阅读全文 | 评论 2 | 编辑 | 分享 0
2008年06月12日

滑动显示不同区域的效果。

很多网站流行这种展示效果，易于内容的展示，也方便用户的交互，如网易，淘宝。
每个人的写法不一样，习惯占主要因素。这种效果往往是伴随这CSS滑动门技术一起的。正好最近学JS，而且目前着手的网页又需要这种效果。整理一下，实现起来比较简单。这里就不说CSS滑动门技术，主要是JS的切换实现。
不需要对HTML文本进行加工，操作都在JS上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动门</title>
</head>
<style type="text/css">
.dis{display:block;background:#ccc}
.nodis{display:none}
.fb{font-weight:bold;color:#ff6600}
.nofb{font-weight:normal}
</style>
<body>
<h1 id="nav">
<span>标题一</span>
<span>标题二</span>
</h1>
<div id="content">
<ul>
  <li>老哈也说事</li>
  <li>老哈也嘛事</li>
</ul>
<ul>
  <li>老哈说嘛事</li>
  <li>老哈也说事</li>
</ul>
</div>
<script type="text/javascript">
var nav=document.getElementById('nav').getElementsByTagName('span');
var content=document.getElementById('content').getElementsByTagName('ul');
var num=nav.length;
var flag=0;
for(i=0;i<num;i++){
nav[i].value = i;
nav[i].onmouseover=function(){
changeNav(this.value)
};
nav[i].className='nofb';
content[i].className='nodis';
}
nav[flag].className='fb';
content[flag].className='dis';
function changeNav(j){
nav[flag].className='nofb';
content[flag].className='nodis';
flag=j;
nav[j].className='fb';
content[j].className='dis';
}
</script>
</body>
</html>

老哈14时44分发表在css/javascipt 频道 | 阅读全文 | 评论 0 | 编辑 | 分享 0
2007年12月06日

css选择符常用名总结

加以整理，以便在今后处理页面的时候减少时间。刚接触CSS的时候没有感觉命名的重要，习惯用拼音，导致面试的时候别人说我老土，正确的命名可以减少很多注释，也便于他人理解。以下是常用选择符的命名：（建议在浏览器上装上金山词霸。）
网站：site                   布局：layout/wrapper     子页面：subpage
栏目：column               列表：list                         侧栏：sidebar
页头：head/header        内容：content/container   页尾：foot/footer
导航：nav (主导航-mainnav 子导航-subnav)            当前位置导航：crumb
菜单：menu                 子菜单：submenu
搜索：search(搜索框：searchbox)                          标志：logo
登陆：login(登陆条:loginbar)                                  广告：ad/banner
新闻：news                  下载：download                 链接：link
合作伙伴：partner         版权：copyight                 指南：guid
服务：service               注册：regsiter                  摘要：summary
功能：shop                  热点：hot                         标签页：tab
提示信息：msg             小技巧：tips                      状态：status
投票：vote                   按钮：btn
工具条：tool/toolbar     标题：title                        下拉：drop(下拉菜单：dorpmenu)
转角/园角：cor/corner   箭头：arr/arrow               表单：form
滚动：scroll                 图标：ico
左中右：left center right
关于一些class的命名：可以参考163的首页，比较完整和规范。

老哈09时00分发表在css/javascipt 频道 | 阅读全文 | 评论 1 | 编辑 | 分享 0