本网页由我们郑州网站建设公司提供了几个利用DIV+CSS在网页编码时的小技巧，包括利用CSS实现的获得鼠标焦点时改变文字内容和颜色、使用DIV+CSS截取掉超过DIV边界的字符、CSS里的display:none使用注意事项等几个应用技巧，每一个技巧都配有源代码，代码都已经过调试，可以正常地在其他地方使用。下面，我们郑州网站建设公司的小编整理了几个DIV+CSS网页编码应用技巧，在下面列了出来，可供建站用户和网站建设技术人员参考。
一、利用CSS实现的获得鼠标焦点时改变文字内容和颜色：
一些文字可以在鼠标经过时改变文字内容和颜色，下面是代码实现：
<html>
<head>
<title>文字在鼠标经过时改变文字内容和颜色（本实例由郑州网站建设公司--郑州凯讯公司提供）</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
.remind{height:30px; line-height:30px; overflow:hidden;}
.remind span {display:block; margin-top:-30px;}
.remind a:hover { padding-top:30px; color:#CC0000;}
.remind a {float:left; overflow:hidden;}
-->
</style>
</head>
<body>
<div class="remind"><a href="#"><span>内容改变成这个了，再看下颜色是不是也变了</span>系统提示</a></div>
</body>
</html>
二、DIV+CSS截取掉超过DIV边界的字符的方法：
代码如下：
<div style="width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">此处为输入的较长的的字符串，看下后面的是否被截断了</div>
上面的代码中需要了解的几个地方：
1、white-space：
本属性有三种取值，即normal，pre，nowrap。这三种取值分别代表如下含义:
normal：默认值，文本自动处理换行
pre：换行和其他空白字符都将受到保护
nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br对象
上面的代码中使用过了nowrap，表示文本不换行。
2、text-overflow：
此属性有两个取值，即clip，ellipsis，二者的含义如下：
clip：不显示省略标记(...)，而是简单的截断
ellipsis：当对象向内文本溢出时显示省略标记(...)
上文中使用到了ellipsis，表示文本到了超过div的边界时，要截断并显示省略号“...”。
三、关于CSS中的display:none的使用注意事项：
1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop，offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。
2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO优化，因此，完全可以不使用display:none而使用其他的隐藏方法，比如在某些情况下可以使用left:-5000px来达到同样效果，但我们郑州网站建设公司不建议采取这种方式。
3、如果是通过样式文件或<style>css代码</style>方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题
4、在有些情况下可以使用style.visibility来代替style.display，但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素则会让出所占页面空间，就好像该元素不存在一样，只有在显示出来的时候才会占用空间。
