站长之家-站标logo图片
欢迎你来到站长之家!
携手合作图片
banner图片
当前位置:站长之家 >> 网站技术 >>



站长之家提供几个DIV+CSS制作网页的使用技巧


【发布人:站长之家    发布日期:2014-11-05】

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来实现段落前面缩进两个字的位置:
段落前面空两个字的距离,不要再使用空格(&nbsp;)了。应该使用首行缩进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,请尊重别人劳动,不要复制和采集。转载请注明本文出处)

信息显示图片
页脚blank图片

版权所有:站长之家【www.zzdj.net】