hover选择器及本地存储的问题 hover本地存储
程序员文章站
2022-07-12 21:29:30
...
(一) 在实际中浏览网页时我们经常会看到鼠标移动到某个元素的时候,这个元素的颜色会发生改变,那么这个功能又是如何实现的呢?
使用hover选择器,便可以方便的实现这个功能了。先来看一个例子:
<!DOCTYPE html> <html> <head> <style> a:hover { background-color:red; } </style> </head> <body> <a href="http://www.baidu.com">你好</a> <a >nihhao</a>
这样的话当你把鼠标移动到中文"你好"和拼音“nihao”的时候字体便变红了。
需要注意hover要操作的元素可以是是链接也可以是普通文字。
接下来是对一些链接的不同状态的一些设置
例:
<!DOCTYPE html> <html> <head> <style> a:link {color:blue;} a:visited {color:blue;} a:hover {color:red;} a:active {color:yellow;} </style> </head> <body> <p><a href="http://baidu。com">你好</a></p> </body> </html
(上面分别是link:未访问链接,visited:已访问链接,active:活动链接)
(二)下面来说说html5的本地存储的问题
html5提供了两种在客户端存储数据的方式
a:localStorage 没有时间限制的存储
b:sessionStorage 针对一个session的数据存储
html5使用javascript来存储和访问数据
今天来了解localStorage()方法
存储数据
localStorage.setitem("name","value");
通过setitem以键值对的方式存储数据
读取数据
localStorage.getitem(“name”)
可以通过键来获取本地存储的值
今天先把这些基础记录,慢慢通过学习去加深理解。