从头开始学习css+div

作者： JinYon
发布时间： 2006 年 12 月 31 日
1498次浏览
暂无评论
分类： CSS

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">

</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的空格，可解除这个问题