欢迎你来到站长之家！
DIV+CSS是一种网站标准，是网页布局的几种较为流行的方法，也是站长们非常喜爱的一种网页制作方法。目前，许多大中小型网站都已经开始采用DIV+CSS的框架布局来制作，这更加印证了DIV+CSS是大势所趋。DIV+CSS布局方式的特点主要有这样几个：1、这种DIV+CSS布局的网页更加符合W3C标准；2、这种DIV+CSS布局方法对于搜索引擎更加友好；3、使用DIV+CSS样式布局在调整改变布局时更加方便自由；4、使用DIV+CSS布局的页面，代码量通常都比较少，从而使得DIV+CSS的页面更加容易被浏览器加载。在这里，站长之家为各位站长们整理了一些使用DIV+CSS进行网页布局的技术实现代码，可供各位网站技术人员制作网页时参考使用。
一、实现DIV盒子不独占一行的显示方法（即多个div盒子显示在同一行上，由左至右排列）：
在默认情况下，一个div盒子在网页上是单独占据一行的，其所占用的宽度是100%的。这样的显示方式对于网页排版来说几乎是没有一点用的。要想使用DIV+CSS技术，我们必须在编码时使用多个div占据一行的技术。要实现这一技术是非常简单的，下面为您提供两种解决方式来实现。
1、利用style里的 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>
2、利用style里的 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>
二、使用CSS技术实现当鼠标移动到链接上方时，会自动出现一个提示框的效果：
假设我们设置网页上的链接为：<a class="tooltip" href="http://www.zzdj.net">站长之家<span>这里是提示文字：本网站是站长网的网站</span></a>，那么我们可以以下面的代码来实现显示提示框的效果：
CSS可以这样写：
a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;}
a.tooltip:hover span{display:inline; position:absolute;}
三、利用DIV+CSS技术设置网页整体居中的代码：
在默认情况下，DIV盒子是居左显示的，下面的代码可以让DIV居中放置。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实例：DIV+CSS技术设置网页整体居中</title>
<style>
#layout{ width:778px; margin:0 auto; text-align:center; border:1px solid #44b6dc; background:#e1edfb; height:500px;}
</style>
</head>
<body>
<div id="layout">请看一下这个div盒子是否居中了</div>
</body>
</html>
四、利用DIV+CSS来设置DIV盒子中的内容上下垂直居中：
实例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实例：设置容器中的内容垂直居中</title>
<style>
#layout { width:778px; margin:0 auto; text-align:center; border:1px solid #44b6dc; background:#e1edfb; height:500px; line-height:500px;}
</style>
</head>
<body>
<div id="layout">请看一下这句文字是否垂直居中了</div>
</body>
</html>
五、利用CSS实现将超级链接的下划线改成虚线的形式：
在浏览网页时，经常可以看到链接的下划线是虚线，或者在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.zzdj.net" class="texta">实例测试</a>
<br><br>
<a href="http://www.zzdj.net/" class="textb">实例测试</a>
</body>
六、利用CSS来实现段落前面缩进两个字的位置：
段落前面空两个字的距离，不要再使用空格( )了。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位，比如中文段落一般每段前空两个汉字。在这里我们需要用到一种长度单位em。em是相对长度单位的含义，相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em，实例代码如下：
<style type="text/css">
<!--
p{
text-indent: 2em;
}
-->
</style>
七、利用用DIV+CSS技术把一段或一行文字的超出的部分变成省略号“...”：
提供的实例代码如下：
<html>
<style>
.ellipsis span
{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
width:190px;
display:block;
}
.ellipsis {
clear:both;
}
.ellipsis span:after {
content: "...";
}
.ellipsis span {
max-width:180px;
width:auto !important;
float:left;
}
</style>
</html>
<body>
<div class="ellipsis">
<span>我们网站www.zzdj.net，是站长学习的平台，上面主要是关于网站建设知识类的内容</span>
</div>
</body>
</html>
（本页地址为：http://www.zzdj.net/tech/tech-2.html，请尊重别人劳动，不要复制和采集。转载请注明本文出处）
