Web|如何实现导航栏的默认,预览以及选中时的样式

简介: Web|如何实现导航栏的默认,预览以及选中时的样式

问题描述

在我们日常生活中,用手机电脑上网查找资料可谓是家常便饭。对于当今社会的我们来说浏览网页更是一件普通到不能再普通的事情。那么大家有没有发现,我们经常浏览有什么相似之处。其实我们常常浏览的网页基本上都会有一个导航栏。导航栏的作用就是为了更好的服务用户,为了更好的聚焦,集中资源、合理利用资源缩短排名周期,满足用户特定的需求。

解决方案

网站导航的基本作用是为了让用户在浏览网站过程中不至迷失,并且可以方便地回到网站首页以及其他相关内容的页面。绝大多数网站,他所有的栏目、内容,都是围绕核心关键词(核心词)拓展而来,网站的导航也大多是要依据用户需求来拓展布局的。要做好一个导航栏,我们就应该明白导航栏存在多种样式,即默认样式,鼠标滑过时的样式,选中时的样式。

(1)  首先我们还是应该做出导航栏的默认模式。此时当我们把鼠标放在导航栏上是不会有任何效果的。(在图片上的/*与*/之间的内容表示注释,即前一句代码的解释内容)

(2)  要实现浏览效果,只需要我们添加一句代码即:

         

完整代码为:

(3)  要实现选中效果,同样也只需添加一个简单代码。

结语

不论是在我们学习还是生活中,我们都应该仔细观察,细心思考。要善于发现细小的问题。就此次的导航栏来说,在我刚开始学习制作简单的网页的时候其实是接触过导航的。但当时只知道默认及预览样式。选中样式还是我在网上查找其他问题是发现的。所以我认为在学习过程中,多查资料是很有必要的。

问题描述

https://jingyan.baidu.com/album/36d6ed1f4daf911bce48836d.html?picindex=1

目录
相关文章
|
7月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
72 0
|
7月前
|
前端开发
简单的做一个图片上传预览(web前端)
简单的做一个图片上传预览(web前端)
58 0
|
2月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
66 2
|
3月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
71 11
|
4月前
|
开发者 前端开发 UED
打造企业专属形象:Vaadin主题与样式定制,让你的Web应用脱颖而出!
【8月更文挑战第31天】在Web应用开发中,界面设计至关重要。Vaadin框架提供强大的主题和样式定制功能,助力开发者打造符合品牌形象的独特外观。本文详细介绍了Vaadin主题的概念及创建流程,并演示了如何通过CSS和SCSS定制组件样式,使用主题继承扩展现有主题,以及为特定组件设置专属样式。遵循这些最佳实践,不仅能提升用户体验,还能增强品牌的识别度,让你的应用更加出众。
42 0
|
5月前
|
JavaScript 前端开发
Web Components详解-Shadow DOM样式控制
Web Components详解-Shadow DOM样式控制
142 3
|
7月前
|
前端开发 开发者
【Web 前端】CSS 样式覆盖规则?
【4月更文挑战第22天】【Web 前端】CSS 样式覆盖规则?
移动端也能兼容的web页面制作2:导航栏、背景图片设置(下)
移动端也能兼容的web页面制作2:导航栏、背景图片设置
229 0
移动端也能兼容的web页面制作2:导航栏、背景图片设置(上)
移动端也能兼容的web页面制作2:导航栏、背景图片设置
282 0
|
前端开发
【web前端开发】CSS文字和文本样式
本篇文章主要讲解CSS中的文字和文本样式及一些实用技巧.文章最后有思维导图.