首页 > > 网页制作 > css >

css学习笔记(2)

2008-02-23 08:47:06来源：互联网阅读 ()

<table width="500" border="1">
<tr align="center">
<td>姓名</td>
<td>年龄</td>
<td>联系地址</td>
<td>联系电话</td>
<td> </td>
</tr>
<tr align="center">
<td>张三</td>
<td>22</td>
<td>深圳市福田区华强北路</td>
<td>12345678</td>
<td>编辑</td>
</tr>
<tr align="center">
<td>李四</td>
<td>25</td>
<td>不详</td>
<td>321</td>
<td>编辑</td>
</tr>
</table>

答：
<style type="text/css">
#dydiv { border: 1px solid #aaa; float: left; }
#dydiv ul { padding: 1px ;margin: 0px; list-style: none; float: left; }
#dydiv ul li { padding: 3px; margin: 1px; border:1px solid #aaa; text-align: center; }
</style>
<div id="dydiv">
<ul>
<li>姓名</li>
<li>张三</li>
<li>李四</li>
</ul>
<ul>
<li>年龄</li>
<li>22</li>
<li>25</li>
</ul>
<ul>
<li>联系地址</li>
<li>深圳市福田区华强北路</li>
<li>不详</li>
</ul>
<ul>
<li>联系电话</li>
<li>12345678</li>
<li>321</li>
</ul>
<ul>
<li> </li>
<li>编辑</li>
<li>编辑</li>
</ul>
</div>

14、鼠标停滞显示文字

可以用对象的title 或alt属性

也可以用下面的代码实现

<html>
<head>
<STYLE type=text/css>BODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
}
A {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline
}
A:active {
FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033
}
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<a href="#" tips="我是第一个" onmousemove=show(this.tips,1) onmouseout=show(this.tips,0)>Hello,world!</a>
<a href="#" tips="我就是第二个" onmousemove=show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_member.gif') onmouseout=show(this.tips,0)>你好，中国</a>
<a href="#" tips="那我就是最后一个了" onmousemove=show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_moderator.gif') onmouseout=show(this.tips,0)>永远都好</a>

再添两笔吧：
在 xhtml 里对 body 默认不占浏览器整高的解决方案：
html, body{height: 100%; max-height:100%;}

对于文字与图片混排时文字靠下的解决方案：
a, em, font, img, input, label, span, strong{vertical-align: middle;}

对于 li 在IE和FF里左边的空间不一致：
li{padding: 0; margin: 0 0 0 32px;}

对于带链接的图片会出现两像素边框的解决：
img{border: none;}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有