一个导航的前端实现
作者:大米 来源:口碑网ued 发布时间:2008-11-13 12:41:00
标签:导航,前端,代码,设计
前端代码要做到简洁易读、高效,还要考虑后端嵌套的方便性。
前段时间做了一个导航,把整个制作过程重现,希望对大家有帮助。
第一步
代码结构按照逻辑来分析初步构想可以这样:
<ul> <li class="first-current">1 填写店铺信息</li> <li class="middle">2 填写联系人信息</li> <li class="middle">3 确认创建信息</li> <li class="last">4 提交成功</li> </ul>
分三种表现,头、中间、尾,同时,用current标出当前停在第几步。可以用第二个class,就是中间用空格,当然如上中间加-,新用一个class也无妨。
第二步
切图,这是最关键的。
这个导航虽然不是很花哨,但是图形结构也是有一定复杂度。如果直接按1234每个步骤的图直接截下来,左右两头都有图形特殊性,就都需要做滑动门或相似的技术,增加代码的复杂度。
然而,我们这里如果把图切成透明gif图,并且左右覆盖,就会减小步骤之前的耦合性。
于是,自然而然,想到了这样的切图方式:
看上去三种步骤,和对应的current状态,应该可以实现了。
实际写CSS的时候,问题出来了,因为这样的切图,需要前面的步骤的图片去覆盖住后面的步骤,即使定义z-index来控制z轴优先级,也不能完全解决问题。具体来说,可以让步骤1覆盖住步骤2,但要让步骤2覆盖住步骤3,就不可行,因为我们期望兼容中间步骤可以无限多,应用了相同的class,也就表明会有相同的z-index,这样必然的结果是,后面的步骤覆盖前面的步骤。
所以脑子拐个弯,逆向切图。
这样,只要设置负的margin-left,让后面的覆盖住前面,就达到了预期的效果。
考虑到最后一个步骤是两头都有不同表现的,需要用到滑动门或者hook,这里我用了hook。于是HTML代码改造如下:
<ul> <li class="first-current">1 填写店铺信息</li> <li class="middle">2 填写联系人信息</li> <li class="middle">3 确认创建信息</li> <li class="last">4 提交成功<span class="hook"></span></li> </ul>
第三步
CSS,写起来就一气呵成了
div.form-nav {border-bottom:3px solid #E77302;margin-bottom:10px;background:#F2F2F2} div.form-nav ul li {height:29px;float:left;background-image:url(/images/eshop/form/step_arrow.gif);background-repeat:no-repeat;color:white;font-size:14px;font-weight:bold;line-height:29px} div.form-nav ul li.first {background-position:0 0;padding-right:30px;padding-left:8px} div.form-nav ul li.first-current {background-position:0 -150px;padding-right:30px;font-size:16px;padding-left:8px} div.form-nav ul li.middle {background-position:0 -50px;margin-left:-20px;padding-right:30px;padding-left:22px} div.form-nav ul li.middle-current {background-position:0 -200px;margin-left:-20px;padding-right:30px;padding-left:22px;font-size:16px;} div.form-nav ul li.last {background-position:0 -100px;margin-left:-20px;padding-left:22px;position:relative;} div.form-nav ul li.last span.hook {position:absolute;top:0;right:-20px;width:20px;height:29px;display:block;background:url(/images/eshop/form/step_arrow.gif) no-repeat right -100px;} div.form-nav ul li.last-current {background-position:0 -250px;margin-left:-20px;padding-left:22px;position:relative;font-size:16px;} div.form-nav ul li.last-current span.hook {position:absolute;top:0;right:-20px;width:20px;height:29px;display:block;background:url(/images/eshop/form/step_arrow.gif) no-repeat right -250px;}
这儿提供完整的demo
0
投稿
猜你喜欢
- 如下所示:#简单来说 LabelEncoder 是对不连续的数字或者文本进行编号from sklearn.preprocessing imp
- 即将上线的百度C2C平台百度“有啊”开始对百度HI用户进行邀请,其首页页面、“有啊”LOGO也首次曝光。从曝光的图片看,百度“有啊”的主色调
- 通过对 26 个字母的设定,设置自己要输出的字体。name = "RUNOOB"# 接收用户输入# name = inp
- 外观模式(Facade Pattern)是什么外观模式是一种结构型模式,它提供了一个简单的接口,隐藏了系统的复杂性,为客户端提供了一个简单的
- 1.默认已经有python环境和vscode2.pip安装PyQt5执行命令:pip install PyQt5pip install Py
- for循环语句的对象是可迭代对象,可迭代对象需要实现__iter__或iter方法,并返回一个迭代器,什么是迭代器呢?迭代器只需要实现 __
- 一、概述变量的功能是存储用户的数据二、声明变量Go语言的每一个变量都拥有自己的类型,必须经过声明才能开始用变量的声明格式:var <变
- 1.创建tfrecordtfrecord支持写入三种格式的数据:string,int64,float32,以列表的形式分别通过tf.trai
- vue2.0中使用mapState及mapActions的方式 // 使用mapStatecomputed: { &nb
- 代码如下:ALTER proc [dbo].[sp_common_paypal_AddInfo] ( @paypalsql va
- python 的虚拟环境可以为一个 python 项目提供独立的解释环境、依赖包等资源,既能够很好的隔离不同项目使用不同 python 版本
- 在Web上使用菜单可以极大地节约页面的空间,同时也比较的符合用户从Windows上继承下来的UI操作体验。在以往的Web页菜单设计中,我们普
- 创建新的项目django-admin.py startproject my_project创建新的App# 在Django项目(my_pro
- 这篇文章主要介绍了Python pickle模块实现对象序列化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- 本文实例分析了ThinkPHP中的__initialize()和类的构造函数__construct()。分享给大家供大家参考。具体分析如下:
- SQL SERVER 2000用sql语句如何获得当前系统时间就是用GETDATE();Sql中的getDate()Sql Server 中
- 引言: 由于MySQL的数据库太大,默认安装的/var盘已经再也无法容纳新增加的数据,没有办法,只能想办法转移数据的目录。 下面我整理一下把
- 尼姆游戏是个著名的游戏,有很多变种玩法。两个玩家轮流从一堆物品中拿走一部分。在每一步中,玩家可以自由选择拿走多少物品,但是必须至少拿走一个并
- 一、python线程的模块1.thread和threading模块thread模块提供了基本的线程和锁的支持threading提供了更高级别
- 终于皇天不负有心人,答案还是让我找到了。 网上的都是这样用的 $content = iconv("utf-8",&quo