(一) 在实际中浏览网页时我们经常会看到鼠标移动到某个元素的时候,这个元素的颜色会发生改变,那么这个功能又是如何实现的呢?
使用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”)
可以通过键来获取本地存储的值
今天先把这些基础记录,慢慢通过学习去加深理解。
相关推荐
在这个日期选择器中,可能使用了`<input type="date">`来创建一个基本的日期输入字段,同时可能还利用了Web存储API进行数据的本地保存。 CSS3是层叠样式表的最新版本,它带来了许多令人兴奋的新特性。其中,最...
以下是一些关于前端面试题的知识点,涵盖了CSS盒子模型、Cookie、浏览器本地存储、样式选择器以及定位等关键概念。 **CSS盒子模型**: CSS盒子模型是理解网页布局的基础,包括两种主要类型:IE盒子模型和W3C标准...
前端必考面试题汇总 ...CSS 选择符有 id 选择器、类选择器、标签选择器、相邻选择器、子选择器、后代选择器等。CSS 的优先级算法是按照选择符的特殊性来计算的。CSS3 新增伪类有 :hover、:active、:focus 等。
20. 超链接访问后,hover样式不再显示,可能是因为CSS的`:visited`状态覆盖了`:hover`,解决方案是调整CSS选择器的优先级或明确指定`:visited:hover`样式。 21. Css Hack是为了应对不同浏览器解析CSS时的差异,常见...
15. CSS选择器:包括标签选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器等。 16. 隐藏DOM元素:使用`display:none`或`visibility:hidden`,两者效果不同,前者不再占用空间,后者仍保留空间。 ...
1. **选择器**:基础选择器(如类型选择器、类选择器、ID选择器)、组合选择器(如后代选择器、子元素选择器、相邻兄弟选择器)以及属性选择器和伪类。 2. **盒模型**:理解边距、填充、边框和内容区域如何影响元素...
综上所述,这个源码项目涵盖了前端开发中的多个关键知识点,包括 jQuery 事件处理和 DOM 操作,CSS3 的动画和选择器,以及可能涉及的本地存储和服务器通信。通过学习和理解这个项目,开发者可以提升自己的前端技能,...
1. **新特性**:HTML5增加了许多新功能,如`canvas`用于绘制图形,`video`和`audio`用于媒体播放,`localStorage`用于本地数据存储,语义化的标签如`article`、`footer`等,以及新的表单控件如日期选择器、邮箱...
常见的选择器有类选择器(`.class`),ID选择器(`#id`),元素选择器(`element`),以及更高级的选择器如伪类(`:hover`, `:active`)和属性选择器(`[attr=value]`)。 2. **盒模型**:CSS盒模型包括内容...
2. 存储机制:离线存储(`localStorage`和`sessionStorage`)允许在本地存储数据,提升用户体验。 3. 表单改进:新增了`<input type="date">`,`<input type="range">`等输入类型,以及`<output>`标签,提高表单功能...
1. **选择器增强**:CSS3增加了许多新的选择器,如类选择器(.class)、属性选择器([attribute])、伪类(:hover, :active, :focus)和伪元素(::before, ::after),让样式定位更加精确。 2. **布局模式**:CSS3...
4. 选择器:CSS3引入了更多的选择器,如`:hover`、`:active`、`:focus`等伪类选择器,以及属性选择器等,为CSS提供了更精确的选择机制。 培训讲义的目的在于让初学者能够快速掌握HTML5和CSS3的核心知识,了解它们...
18. **CSS选择器**:包括标签选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等,用于精准地选取和操作DOM元素。 19. **隐藏DOM元素**:display:none和visibility:hidden都可以隐藏元素,但前者移除元素占用...
在现代Web开发中,Web应用程序与本地存储的交互是一个关键环节,这使得用户可以在离线状态下继续使用部分功能,同时也提升了应用的性能和用户体验。"lista: Web应用程序与本地存储链接待办事项"这个主题主要关注如何...
例如,我们可以使用`:hover`伪类改变鼠标悬停在按钮上的样式,或者使用`[type="email"]`选择器专门针对邮箱输入框设置样式。 2. **过渡和动画**:CSS3的transition和animation属性可以创建平滑的动态效果,如按钮按...
2. **数据存储**:HTML5引入了`localStorage`和`sessionStorage`,它们允许在用户浏览器中本地存储数据,这对于记录用户的答题情况非常有用。`localStorage`持久化存储,而`sessionStorage`则只在当前会话中有效。 ...
CSS3,层叠样式表的第三版,带来了更多样化的选择器、更强大的布局模式和动画效果。例如,使用伪类`:hover`、`:active`、`:focus`可以实现元素的不同状态样式;媒体查询@media允许我们根据设备特性(如屏幕尺寸)...
4. **数据存储**:为了持久化用户的书签,开发者可能采用了本地存储(localStorage)或会话存储(sessionStorage)来保存书签信息。这样,即使页面刷新或关闭,书签数据也能被恢复。 5. **动画效果**:jQuery库包含...
1. **选择器增强**:CSS3引入了更精确的选择器,如类选择器(.class)、ID选择器(#id)、伪类(:hover、:active、:focus等)和兄弟选择器(~、+)。 2. **边框与背景**:可以设置圆角边框(border-radius)、...
1. **选择器增强**:CSS3增加了更多的选择器,如属性选择器、伪类选择器(`:hover`、`:active`、`:focus`)和伪元素选择器(`::before`、`::after`),使样式控制更精确。 2. **边框和背景**:CSS3引入了圆角边框...