有关网页CSS问题。。请大神解答。。

html-css024

有关网页CSS问题。。请大神解答。。,第1张

简单说一下原理，做两个层，不是嵌套的两个层。上面的层，设置透明度，ie低版本可能要用滤镜处理，其它浏览器直接css就可以了。下边的层显示文字。设置两个层相对定位，做成重叠的就ok了。

提供两个方案给你：1、在页面的脚本语言里面用类似于left的函数；2、找个js或jq代码来实现，css是需要很大的耐心去调整谦容性的，而且有一些bug是解决不了的；overflow:hidden强制居中width:200pxwhite-space:nowrap强制在同一行内显示所有文本，直到文本结束或者遭遇br对象text-overflow:ellipsis这才是超出后用省略代替 下面给个例子给你<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<title>text-overflow_CSS参考手册_web前端开发参考手册系列</title>

<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />

<meta name="copyright" content="www.doyoe.com" />

<style>

.test li{margin-top:10px}

.test .clip p{overflow:hiddenwidth:200pxwhite-space:nowraptext-overflow:clip}

.test .ellipsis p{overflow:hiddenwidth:200pxwhite-space:nowraptext-overflow:ellipsis}

</style>

</head>

<body>

<ul class="test">

<li class="clip">

<strong>clip: 直接将溢出的文字裁剪</strong>

<p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p>

</li>

<li class="ellipsis">

<strong>ellipsis: 将溢出的文字显示省略标记（...）</strong>

<p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p>

</li>

</ul>

</body>

</html>

margin取负值之后，例如margin-top:-1px元素会从父框架的顶部突出一个像素，如果父框架设置了overflow:visibled的话，这个元素就会看起来显示在父框架外面了~如果取了正值，例如margin-top:1px元素就是距离父框架的顶部一个像素，会在父框架内显示。

padding取了负值之后是没有任何效果的，浏览器会认为padding:0。如果padding取正值，就是在元素内部填充，这个很好理解，就不解释了。

position取了负值之后的效果和margin差不多，只是position通常是应用绝对定位场景的，而margin通常是应用在相对定位场景的，而且position可以定义z轴上的位置关系，但是margin一般是不可以的，两个的区别主要是在这个方面，至于取负值，在视觉上其实没有什么太大的区别。