原先基于css2设计的网页怎样在css3中显示

html-css022

原先基于css2设计的网页怎样在css3中显示,第1张

原先基于css2设计的网页在css3中显示如下。

1、html做布局(超文本标记语言，标准通用标记语言下的一个应用。超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

2、javascript或者jquery添加切换效果(javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为javascript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在html标准通用标记语言下的一个应用)网页上使用，用来给html网页增加动态功能。

超出指定文本以省略号显示效果，用css的"text-overflow:ellipsis"实现

text-overflow:ellipsis 溢出的部分用 省略号 表示。

<!DOCTYPE html>

<html>

<head>

<style> 

div.test

{

    white-space:nowrap 

    width:123px 

    overflow:hidden 

    border:1px solid #000000

    text-overflow:ellipsis

}

</style>

</head>

<body>

    <p>这个 div 使用 "text-overflow:ellipsis" ：</p>

    <div class="test">

        This is some long text that will not fit in the box

    </div>

</body>

</html>

在div块中要设置宽度，"overflow:hidden"要跟"text-overflow:ellipsis"使用才行

使鼠标经过显示 css3 绘图三角形参考下面方法：

<a class="tooltips" href="#tooltips">这就是Tooltips<span>这些附加的说明文字在鼠标经过的时候显示。

</span></a>

<style type="text/css">

/*Tooltips*/

.tooltips{

position:relative/*这个是关键*/

z-index:2

}

.tooltips:hover{

z-index:3

background:none/*没有这个在IE中不可用*/

}

.tooltips span{

display: none

}

.tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/

display:block

position:absolute

top:21px

left:9px

width:15em

border:1px solid black

background-color:#ccFFFF

padding: 3px

color:black

}

</style>