zoukankan      html  css  js  c++  java
  • 步骤菜单使用css3实现

           代码库:http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation

           有兴趣的可以看一下,看完绝对让你大饱眼福。
     
            首先截图,看效果
            
           
     
             看着很酷吧,其实实现起来也不是很难,里边需要用的技术有:box-shadow,计数器:(reset-couter,counter-increment),以及transform,等技术。
     
              第一步书写html代码很简单了,也就是div 套几个a标签即可。
     
              给a写伪类after,after主要为了实现后面的小三角符号,需要给after后面添加content属性为空。设置高宽,display属性,以及背景色和a标签背景色保持一致。需要注意的地方,position:absolute,这样的话就可以把after放到a后面而不影响临近的a标签了。加上border.
              
              有人就好奇了,就算加上border也没有小三角出来啊,这是就需要用到神奇的transform属性了。
     
              
              看下示例图:
                  
             现在明白了吧,需要进行旋转45度即可,但是又有了新的问题,旋转后的变宽过长,超出了边界了,这是就需要使用缩小了,但是缩小到多少倍比较合适呢。来看下计算方法。
              
              假设边长都为1,那么就是(1^2+1^2)^0.5=1.414,一个很熟的值了。也就是垂直的对折线了。只需要1就行,那么就是1/1.414≈0.707。所以需要缩小的倍数就是0.707.
              所以transform:scale(0.707) rotate(45deg);
             
              这样就得到我们需要的小三角了。
     
              再来看前边的编号是如何实现的。
              使用css2.1中的counter实现,在父级元素上初始化计数器。 reset-counter:变量名称 初始值。其中初始值不写默认为0,在子级元素上写伪类before.content:couter(变量名称),couter-inctrement:变量名称 step(可为负值)。
     
               下来需要完成hover效果。直接附源码 下载
     
  • 相关阅读:
    安装future包,django-crispy-forms
    django学习笔记(七)-----视图
    django学习笔记(六)-----模型
    django学习笔记(五)------path
    django学习笔记(四)---基本流程三(视图,模板基本使用)
    django学习笔记(三)--基本流程二---admin站点管理
    django学习笔记(二)基本流程一
    C#时间
    可空类型的DateTime转换成字符串
    asp.net mvc Razor一点小注意点
  • 原文地址:https://www.cnblogs.com/fyking/p/3361505.html
Copyright © 2011-2022 走看看