0371-53778175
15333818157
15333818157
一、DIV+CSS技术实现网页文字位于一个div容器的底部的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DIV+CSS技术实现网页文字位于div底部</title>
<style type="text/css">
#wenzi{
height:300px;
width:300px;
border:1px solid #333333;
text-align:center;
position:relative
}
#wenzi p{
position:absolute;
bottom:0px;
padding:0px;
margin:0px
}
</style>
</head>
<body>
<div id="wenzi">
<p>测试文字，看下是否位于div底部</p>
</div>
</body>
</html>
二、实现DIV不独占一行的样式的方法（多个div显示在一行）：
在默认情况下，一个div在网页上是单独占据一行的，其宽度是100%的。这样的显示对于网页排版几乎是没有用的，我们平时在编码时需要使用多个div占据一行的技术。实现这一技术非常简单，下面笔者提供两种方式来实现。
1、利用 float:left 来实现：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
div{ float:left}
</style>
</head>
<body>
<div>第一个div盒子，看下是否横向居左</div>
<div>第二个div盒子，看下是否横向居中</div>
<div>第三个div盒子，看下是否横向居右</div>
</body>
</html>
2、利用 display:inline 来实现：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
div{display:inline}
</style>
</head>
<body>
<div>第一个div盒子，看下是否横向居左</div>
<div>第二个div盒子，看下是否横向居中</div>
<div>第三个div盒子，看下是否横向居右</div>
</body>
</html>
三、将超级链接的下划线改成虚线的形式：
我们在浏览网页的时候，经常可以看到链接的下划线是虚线，或者在link与hover不同状态，下划线会从虚线到实线的变化。这样的效果是如何实现的呢？其实这样的效果，只需要设置text-decoration:none即可，也就是去除了链接的下划线。然后再给链接加下边框线，设置下边框线不同的宽度、线型、颜色，就可以实现“下划线”变成多样效果。代码如下：
<style type="text/css">
<!--
a.texta {
text-decoration:none;
border-bottom:1px dashed #ccc;
color:#c00;
}
a.texta:hover {
border-bottom:1px solid #c00;
color:#666;
}
a.textb {
text-decoration:none;
border-bottom:1px dashed #ccc;
color:#069;
}
a.textb:hover {
border-bottom:1px dashed #c00;
color:#000;
}
-->
</style>
<body>
<a href="http://www.kxcom.net" class="texta">www.kxcom.net</a>
<br><br>
<a href="http://www.kxcom.net/" class="textb">www.kxcom.net</a>
</body>
1765879842 2632505191 2236519391
