让梦冬眠
封藏纷乱的梦不牵挂
© JinYon.Net
All Rights Reserved.

从头开始学习css+div

css定义字体垂直居中
文字的行高
比如 line-height: 22px;
就是高22像素,它就会在中间了
---------------------------------------------------
左右分列
这个做的过程中郁闷了下,其实是自己粗心,定义了右边左对齐,左边没有对齐

程序代码
<div style="float:left;>
我在左边
</div>
<div style="float:right;>
我在右边
</div>

或者

程序代码

#Content #middle #left {
   float: left;
}
#Content #middle #riht {
   float: left;
}

----------------------------------------------
网页TIP的简单作法
程序代码

#infobox span{ display: none; }
#infobox a:hover span{display: block;position:absolute;}

程序代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zishu test tip</title>
<style>
/* zishu.cn */
*{ margin:0; padding:0; list-style:none; font-size:12px; line-height:1.8;}
body{ background: #333}
#info{padding:50px;}
#infobox{padding:0px 20px;background-color: #640000;}
#center{background: #ABBAAC; border-top:2px solid #333; padding:20px;}
.c{ clear:both; height:1px; overflow: hidden; background:#333}
#infobox li{ border-right:1px solid #000; float:left; margin-right:1px; text-align:center;margin-top:-4px; }
a{ width:100px;line-height:28px; display:block;}
a:link,a:visited{color:#000;background:#FF9900;text-decoration: none;}
a:hover,a:active{ color:#FFFF00;background:#000;}

/*以是下显示TIP的内容*/
#infobox span{ display: none; }
#infobox a:hover span{display: block;position:absolute;border:1px solid #640000;background: #FFFFCC;margin-top:26px!important; margin-top:20px;color:#000;padding:5px;white-space: nowrap;}
</style>
</head>
<body>
<div id="info">
<div id="infobox">
 <ul>
  <li><a href="http://www.nicemood.net" target="_blank"><span>从这里可以进入我的首页!</span>网站首页</a></li>
  <li><a href="http://www.nicemood.net" target="_blank"><span>这里边有一些英语和笑话!</span>英语笑话</a></li>
  <li><a href="http://www.nicemood.net" target="_blank"><span>这里都是一些朋友的网站!</span>友情链接</a></li>
  <li><a href="http://www.nicemood.net" target="_blank"><span>你要有什么要说的就来这!</span>给我留言</a></li>
  <li><a href="http://www.nicemood.net" target="_blank"><span>是自已写的和收集的文章!</span>技术文章</a></li>
  <li><a href="http://www.nicemood.net" target="_blank"><span>没有了都放在日记里面了!</span>生活照片</a></li>
 </ul>
 <div class="c"></div>
</div>
<div id="center">
</div>
</div>
</body>
</html>

----------------------------------------------------------------
11月11日
细线分隔线

程序代码
<hr noshade size=0 color=#C0C0C0>

程序代码
<hr width="长度" size="高度" color="颜色代码" noshade>
noshade为有无阴影

打开窗口即最大化

程序代码
<script language="JavaScript">
<!-- Begin
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End -->
</script>

让垂直的滚动条隐藏
在<body>   或   <div>中加入style="overflow-y:hidden"即可  
   
 如:  
     <body   style="overflow-y:hidden">
另外:<body   style="overflow-x:hidden">可以隐藏横向滚动条

最简单的就<body   scroll=no>就可以了

----------------------------------------------------------------
11月23日
CSS样式
a:link:表示已经链接;
a:hover:表示鼠标移上链接时;
a:active:表示链接激活时;
a:visited:表示己点击过的链接。

滚动条颜色代码

程序代码
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #FFCBC8;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-TRACK-COLOR: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR: #FFCBC8;
SCROLLBAR-BASE-COLOR: #FFFFFF
}

----------------------------------------------------------------
12月17日
嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案

<div id="parent">
<div id="content"> </div>
</div>

当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案

<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

在层的最下方产生一个高度为1的空格,可解除这个问题

2006-12-31
关键字: ,