H5实战(四):导航栏
来源:互联网 发布:每日推荐软件 编辑:程序博客网 时间:2024/04/26 10:24
1.导航栏效果
导航栏主要分为两种:水平导航栏和垂直导航栏,其中水平导航栏又有普通导航栏与简约导航栏等样式设置。
2.实现思路:
导航栏的实现主要使用ul标签结合a标签,设置a标签为块元素,可为其设置宽高,将其向左浮动就可形成水平导航栏,取消其默认的原点与下划线样式,并为鼠标移入时增加样式,颜色较深的背景色的导航栏,鼠标移入时,多会修改移入部分背景色,背景为白色的导航栏在鼠标移入时,可为其添加下滑线等样式,以追求其美观性。
3.小知识点
在制作简约导航栏时,可为每个选项前面添加一张图片,对于这种小的图片,多选择以背景图片方式导入,并且一般会选择.png的格式,一般的网站制作中,会将这些小图标放入一张图片中,在使用每个小图标时,可使用background-position进行偏移,找到小图标在图片中的位置,并将其导入,这样做的好处是,可以一次性加载完左右小图标,减少调用次数,提高了加载速度。
一般情况下,小图标与背景图以.png格式导入,相对较大又颜色鲜艳的图片,以.jpg格式导入, 而动图则以gif格式导入,jpg的图片相对于png要小一些,而又能达到用户的视觉要求,这里要注意的是,我们需要对导入图片的大小有一定的限制,既要防止图片过小引起的不清晰,又要防止图片过大引起的加载缓慢问题。
阅读全文
0 0
- H5实战(四):导航栏
- JQuery实战:导航栏
- h5实战
- h5导航条滑动
- H5学习之22 CSS-导航栏的创建
- h5腾讯提供的边栏垂直滚动导航案例
- H5实战页面
- h5学习笔记:横排导航
- h5+css 垂直导航菜单
- H5开发头部滑动导航
- H5实战(六):固定边栏滚动特效
- 微信小程序入门四: 导航栏样式、tabBar导航栏
- H5---面试题四
- H5应用 安卓输入法弹出撑开底部导航栏的问题解决
- h5学习笔记(3) 导航菜单
- h5+css 菜单导航---改变宽度
- h5学习笔记: 导航菜单(2)
- h5学习笔记:横排导航(2)
- java.io.File 进行文件操作常用方法
- php分享
- js replace(a,b)之替换字符串中所有指定字符的方法
- 数据库语句
- rocket mq的发展历史和底层实现原理
- H5实战(四):导航栏
- c# 变量
- SPRING结合Quartz的使用教程
- CASE WHEN 及 SELECT CASE WHEN的用法
- linux路由route 命令
- 浅议P2P平台内部用户间债权转让功能设计
- 在 Ubuntu16.04 上安装 LaTeX
- pt-table-check和pt-table-sync实践
- 情人节动画笔记