扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
在CSS中有一个cursor方法可以改变鼠标指针状态图标,我们可以利用这个方法来达到移动指针到h1标签上的时候鼠标指针变成小手的状态效果。如下代码:
成都创新互联2013年至今,是专业互联网技术服务公司,拥有项目成都网站设计、网站建设、外贸网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元太和做网站,已为上家服务,为太和各地企业和个人服务,联系电话:028-86922220
以上例子中cursor的值pointer表示小手状态,cursor的属性的值有以下类型,不同值可以实现不同的指针效果。
用css伪类hover可以实现这个功能。
1、新建html文档,在body标签中添加一个div标签,然后在div标签中添加p标签,为p标签添加内容:
2、为了方便演示,给div标签设置宽高和背景颜色,然后给p标签设置“display”属性,属性值为“none”,这样p标签中的文字默认情况下不会显示:
3、给div设置hover伪类,当鼠标移动到div区域时,设置p标签的样式为块级元素“block”:
4、这样当鼠标移动到div上时就会显示p标签内容,鼠标离开就不显示p标签内容:
用hover就可以了,意思是当鼠标经过时
举个例子,一个叫top类的div:
.top:hover{ color:#F00; font-size:18px;}
意思是当鼠标经过时字体颜色变为红色,大小变为18像素,离开后恢复原样。
利用cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状:
cursor属性的属性值分为
auto,crosshair,default,hand,move,help,wait,text,w-resize,s-resize,n-resize,e-resize,ne-resize,sw-resize,se-resize,nw-resize,pointer,url(url)
而我们最常用的cursor光标有以下几种
1)div{cursor:default }默认正常鼠标指针
2)div{cursor:hand}和div{cursor:text}文本选择效果
3)div{cursor:move}移动选择效果
4)div{cursor:pointer}手指形状链接选择效果
5)div{ cursor:url(url图片地址)}设置对象为图
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的style标签中,输入css代码:a:visited {color: blueviolet;}。
3、浏览器运行index.html页面,此时超链接文本单击后的样式被设置了文字紫色颜色。
分析如下:
首先你要把代码写好,百左边是1级目录列表,度右边是2级目录列表,然后2级目录最大的知div用display:none先隐藏起来,道用hover。
当鼠标经过1级目录时,给2级目录最回大的div添加display:block属性答让它显示出来。
扩展资料:
1、精简的代码,使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。代码精简提高了百度蜘蛛的爬行效率以及高效性,能在最短的时间内爬完整个页面,同时这样对收录质量有一定好处;
2、提高访问速度、增加用户体验性
使得加载速度得到很大的提高,那么用户点击页面的等待时间就越少,用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢,进而提高网站排名。
3、div+css结构清晰,很容易被搜索引擎搜索到,天生就是适合优化seo,降低网页大小,让网页体积变得更小。注意:div+css结构清晰、精简,不意味着可以全部用div+css结构,比如通篇HTML标签全DIV的,貌似除了head之上及body之上及之外,其它全是div。
就如同整个HTML是一万个毫不相干的内容拼装起来,或者通篇是divulli结构的,就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍,因为曲解了“DIV+CSS”的真实含义,也许根本就不应该有这个说法,因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。
参考资料来源:百度百科-div+css
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流