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

当前位置：站长之家 >> 网站技术 >>

	<center>站长之家提供几个DIV+CSS制作网页的使用技巧</center><br/><br/>
	<center>
	  【发布人：站长之家    发布日期：2014-11-05】
	</center><br/>
	<p>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进行网页布局的技术实现代码，可供各位网站技术人员制作网页时参考使用。</p>
	<p>一、实现DIV盒子不独占一行的显示方法（即多个div盒子显示在同一行上，由左至右排列）：<br/>
    在默认情况下，一个div盒子在网页上是单独占据一行的，其所占用的宽度是100%的。这样的显示方式对于网页排版来说几乎是没有一点用的。要想使用DIV+CSS技术，我们必须在编码时使用多个div占据一行的技术。要实现这一技术是非常简单的，下面为您提供两种解决方式来实现。</p>
	<p>1、利用style里的 display:inline 属性来实现：<br/>

代码如下：

	<p>2、利用style里的 float:left 属性来实现：<br/>

代码如下：

二、使用CSS技术实现当鼠标移动到链接上方时，会自动出现一个提示框的效果：

	  假设我们设置网页上的链接为：站长之家这里是提示文字：本网站是站长网的网站，那么我们可以以下面的代码来实现显示提示框的效果：<br/>
	  CSS可以这样写：<br/>
	  a.tooltip {position: relative}<br/>
	  a.tooltip span {display:none; padding:5px; width:200px;}<br/>
	  a:hover {background:#fff;}<br/>
a.tooltip:hover span{display:inline; position:absolute;}</p>
	<p>三、利用DIV+CSS技术设置网页整体居中的代码：<br/>
	  在默认情况下，DIV盒子是居左显示的，下面的代码可以让DIV居中放置。<br/>
	<br/>
	<br/>
	<br/>
	<title>实例：DIV+CSS技术设置网页整体居中</title><br/>
	<br/>
	<br/>
	<br/>
	</p><div>请看一下这个div盒子是否居中了</div><br/>
	<br/>

	<p>四、利用DIV+CSS来设置DIV盒子中的内容上下垂直居中：<br/>
	  实例代码如下：<br/>
	<br/>
	<br/>
	<br/>
	<title>实例：设置容器中的内容垂直居中</title><br/>
	<br/>
	<br/>
	<br/>
	</p><div>请看一下这句文字是否垂直居中了</div><br/>
	<br/>

	<p>五、利用CSS实现将超级链接的下划线改成虚线的形式：<br/>
	  在浏览网页时，经常可以看到链接的下划线是虚线，或者在link与hover不同状态，下划线会从虚线到实线的变化。这样的效果是如何实现的呢？其实这样的效果，只需要设置text-decoration:none即可，也就是去除了链接的下划线。然后再给链接加下边框线，设置下边框线不同的宽度、线型、颜色，就可以实现“下划线”变成多样效果，您也可以根据本代码将超级链接的下划线改成其他类型的线条。实例代码如下：</p>

	<p><br/>
	实例测试<br/>
	<br/><br/><br/>
	实例测试<br/>
</p>
	<p>六、利用CSS来实现段落前面缩进两个字的位置：<br/>
	  段落前面空两个字的距离，不要再使用空格( )了。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位，比如中文段落一般每段前空两个汉字。在这里我们需要用到一种长度单位em。em是相对长度单位的含义，相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em，实例代码如下：</p>

	<p>七、利用用DIV+CSS技术把一段或一行文字的超出的部分变成省略号“...”：<br/>
	  提供的实例代码如下：<br/>
	<br/>
	<br/>
	</p>
	<p><br/>
	</p><div><br/>
	我们网站www.zzdj.net，是站长学习的平台，上面主要是关于网站建设知识类的内容<br/>
	</div><br/>
	<br/>
	<br/>
	<br/>