May
19
May
15
话说很多门户的头部菜单都如下图所示
这个是文字较少的情况，要是菜单名字很长呢？
那就得做成背景图片自动延伸的才行，多做几个不同长度的背景图片这一方案是可以，但是你肯定是个空闲时间很多的人。
其实原理很简单
总共3层
最底层为菜单大背景层
起名为bg.png
第二层为选中状态左起延伸背景层
最上层为选中状态右部结束延伸层
起名为bg1.png
样式代码如下：
页面代码如下：
OK,就是如此，很是简单的东西。如果你用的是table，那就不要问我了，虽然方法一样，但是那玩意还是别用了。
这个是文字较少的情况，要是菜单名字很长呢？
那就得做成背景图片自动延伸的才行，多做几个不同长度的背景图片这一方案是可以，但是你肯定是个空闲时间很多的人。
其实原理很简单
总共3层
最底层为菜单大背景层
第二层为选中状态左起延伸背景层
最上层为选中状态右部结束延伸层
样式代码如下：
.box{ width:500px; height:30px; background:url(bg.png) 0 -35px repeat-x;}
.box li{ margin:0px 10px; line-height:35px; float:left; font-size:14px; font-weight:bold;white-space:nowrap; overflow:hidden}
.box a{ color:#FFF; text-decoration:none;}
.ccc{ background:url(bg1.png) left 0;}
.ccc a{ background:url(bg1.png) right 0; display:block;padding:0 15px; color:#000; text-decoration:none;}
ul,li{ margin:0; padding:0; list-style:none;}
.box li{ margin:0px 10px; line-height:35px; float:left; font-size:14px; font-weight:bold;white-space:nowrap; overflow:hidden}
.box a{ color:#FFF; text-decoration:none;}
.ccc{ background:url(bg1.png) left 0;}
.ccc a{ background:url(bg1.png) right 0; display:block;padding:0 15px; color:#000; text-decoration:none;}
ul,li{ margin:0; padding:0; list-style:none;}
页面代码如下：
<div class="box">
<ul>
<li><a href="#">标题1</a></li>
<li class="ccc"><a href="#">较长的标题</a></li>
<li><a href="#">标题2</a></li>
</ul>
</div>
<ul>
<li><a href="#">标题1</a></li>
<li class="ccc"><a href="#">较长的标题</a></li>
<li><a href="#">标题2</a></li>
</ul>
</div>
OK,就是如此，很是简单的东西。如果你用的是table，那就不要问我了，虽然方法一样，但是那玩意还是别用了。
Feb
23
原文：http://matthewjamestaylor.com/blog/perfect-3-column.htm
.colmask、.colmin、.colleft，分别为三列背景的容器，最外层的.colmask设定overflow:hidden;，通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面，通过相对定位定好位置，所以不管.col1、 .col2、 .col3哪一个伸长或缩短，外部的.colmask、.colmin、.colleft都会跟着伸长与缩短，也就实现了我们所要的效果。
.colmask、.colmin、.colleft，分别为三列背景的容器，最外层的.colmask设定overflow:hidden;，通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面，通过相对定位定好位置，所以不管.col1、 .col2、 .col3哪一个伸长或缩短，外部的.colmask、.colmin、.colleft都会跟着伸长与缩短，也就实现了我们所要的效果。
<!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>demo</title>
<style type="text/css">
body {margin:0; padding:0; font-size:12px;}
.header {width:100%; height:50px; background:#EEE; border-bottom:1px solid #000;}
.colmask {position:relative; clear:both; width:100%; overflow:hidden;}
.colright, .colmid, .colleft {float:left; width:100%; position:relative;}
.col1, .col2, .col3 {float:left; position:relative; overflow:hidden;}
.threecol {background:#BBB;}
.threecol .colmid {right:20%; background:#CCC;}
.threecol .colleft {right:60%; background:#DDD;}
.threecol .col1 {width:58%; left:101%;}
.threecol .col2 {width:18%; left:23%;}
.threecol .col3 {width:18%; left:85%;}
.footer {clear:both; width:100%; height:50px; background:#EEE; border-top:1px solid #000;}
</style>
</head>
<body>
<div class="header">
这里是头部
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
</div>
<div class="col2">
这里是左栏
</div>
<div class="col3">
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
</div>
</div>
</div>
</div>
<div class="footer">
这里是底部
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
body {margin:0; padding:0; font-size:12px;}
.header {width:100%; height:50px; background:#EEE; border-bottom:1px solid #000;}
.colmask {position:relative; clear:both; width:100%; overflow:hidden;}
.colright, .colmid, .colleft {float:left; width:100%; position:relative;}
.col1, .col2, .col3 {float:left; position:relative; overflow:hidden;}
.threecol {background:#BBB;}
.threecol .colmid {right:20%; background:#CCC;}
.threecol .colleft {right:60%; background:#DDD;}
.threecol .col1 {width:58%; left:101%;}
.threecol .col2 {width:18%; left:23%;}
.threecol .col3 {width:18%; left:85%;}
.footer {clear:both; width:100%; height:50px; background:#EEE; border-top:1px solid #000;}
</style>
</head>
<body>
<div class="header">
这里是头部
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
<p>这里是中间</p>
</div>
<div class="col2">
这里是左栏
</div>
<div class="col3">
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
<p>这里是右栏</p>
</div>
</div>
</div>
</div>
<div class="footer">
这里是底部
</div>
</body>
</html>
Feb
23
a:hover img这种写法还是挺实用的
但是在IE6这玩意里面似乎很不爽
竟然没效果
最后找到方法了
如下
但是在IE6这玩意里面似乎很不爽
竟然没效果
最后找到方法了
如下
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXX</title>
<style type="text/css">
a{ border:0; float:left; padding:5px;}
a:hover{zoom:1;}
a:hover img{zoom:1.1; border:3px #000000 solid;}
</style>
</head>
<body>
<a href="#"><img src="http://www.dv9.org/images/emot/stupid.gif" border="0"/></a>
<a href="#"><img src="http://www.dv9.org/images/emot/stupid.gif" border="0"/></a>
<a href="#"><img src="http://www.dv9.org/images/emot/stupid.gif" border="0"/></a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXX</title>
<style type="text/css">
a{ border:0; float:left; padding:5px;}
a:hover{zoom:1;}
a:hover img{zoom:1.1; border:3px #000000 solid;}
</style>
</head>
<body>
<a href="#"><img src="http://www.dv9.org/images/emot/stupid.gif" border="0"/></a>
<a href="#"><img src="http://www.dv9.org/images/emot/stupid.gif" border="0"/></a>
<a href="#"><img src="http://www.dv9.org/images/emot/stupid.gif" border="0"/></a>
</body>
</html>
Feb
10
/*BBOX框架样式 www.Dv9.org*/
/*一经调用，万事俱休！*/
/*V0.0.6-010210*/
html, body{ margin:0; padding:0; font-size:12px; width:100%; height:100%; background:#FFFFFF; font-family:Arial, Helvetica, sans-serif;}
div,ul,li,form,p,dl,dt,dd,h1,h2,h3,h4,h5,h6,img,a,form,img{ margin:0; padding:0; list-style:none;}
/*所有浏览器下去虚线框全局类，及除下划线*/
a { text-decoration: none;}
a:hover {text-decoration: none;}
a{blr:expression(this.onFocus=this.close());}
a{blr:expression(this.onFocus=this.blur());}
a:focus { -moz-outline-style: none; }
a:focus { outline: none; }
/*页面高度自动延伸,目前该类只适用于IE6这垃圾东西*/
.autoheight{font: 0px/0px sans-serif; height:100%; clear: both; display: block;}
/*页面文字左右对齐类*/
.text_text{text-align:justify; text-justify:inter-ideograph;}
/*隐藏多余部分和解决ie6嵌套自动延伸bug*/
.over{ overflow:hidden;}
/*左浮动*/
.f{ float:left;}
/*右浮动*/
.r{ float:right;}
/*左右居中,不可与左、右对齐共用*/
.c{ margin:0 auto;}
/*鼠标指针手型*/
.s{ cursor:pointer;}
/*一经调用，万事俱休！*/
/*V0.0.6-010210*/
html, body{ margin:0; padding:0; font-size:12px; width:100%; height:100%; background:#FFFFFF; font-family:Arial, Helvetica, sans-serif;}
div,ul,li,form,p,dl,dt,dd,h1,h2,h3,h4,h5,h6,img,a,form,img{ margin:0; padding:0; list-style:none;}
/*所有浏览器下去虚线框全局类，及除下划线*/
a { text-decoration: none;}
a:hover {text-decoration: none;}
a{blr:expression(this.onFocus=this.close());}
a{blr:expression(this.onFocus=this.blur());}
a:focus { -moz-outline-style: none; }
a:focus { outline: none; }
/*页面高度自动延伸,目前该类只适用于IE6这垃圾东西*/
.autoheight{font: 0px/0px sans-serif; height:100%; clear: both; display: block;}
/*页面文字左右对齐类*/
.text_text{text-align:justify; text-justify:inter-ideograph;}
/*隐藏多余部分和解决ie6嵌套自动延伸bug*/
.over{ overflow:hidden;}
/*左浮动*/
.f{ float:left;}
/*右浮动*/
.r{ float:right;}
/*左右居中,不可与左、右对齐共用*/
.c{ margin:0 auto;}
/*鼠标指针手型*/
.s{ cursor:pointer;}
今天进行年前的最后次修改，应聘网应用了该框架。结构上还是得多多思索，目前已经完成了几个重点页面的html化。也为自己找到了属于自己的style风格而高兴
