css 给特定文字的效果

html-css013

css 给特定文字的效果,第1张

用css的话,如果一个网页有1万个"手机",那岂不是要给定义1万个标签类

所以你想实现的这种效果最好是用js来实现

以下代码供你参考

<body>

<div id="content">

我想搜索"手机"这个关键字我想搜索"手机"这个关键字我想搜索"手机"这个关键字我想搜索"手机"这个关键字我想搜索"手机"这个关键字我想搜索"手机"这个关键字我想搜索"手机"这个关键字我想搜索"手机"这个关键字我想搜索"手机"这个关键字我想搜索"手机"这个关键字我想搜索"手机"这个关键字</div>

搜索的特定文字:<input type="text" id="words" value="手机"><button onclick="atest()">试试</button>

<script>

var content=document.getElementById("content")

var words=document.getElementById("words")

function atest()

{

eval("content.innerHTML=content.innerHTML.replace(/"+words.value+"/g,\"<font color=red>"+words.value+"</font>\")")

}

</script>

</body>

你自己改改js里面的<font>样式就可以了,这个不难

1、新建一个html文件,命名为test.html。

2、在test.html文件内,创建一个div模块,下面将使用css设置该div的样式,实现鼠标移到div上显示手型。

3、在test.html文件内,设置div的class属性为mydiv,主要用于css对该div进行样式定义。

4、在css标签中,使用“*”来初始化页面所有元素的内边距为0,外边距为0。

5、在css标签中,对类名为mydiv的div进行样式定义,设置其宽度为200px,高度为200px,背景颜色为黄色。

6、最后,使用css设置div的cursor属性值为pointer,即鼠标移到div上显示手型。