步骤菜单使用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效果。直接附源码 下载。

转载于:https://www.cnblogs.com/fyking/p/3361505.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/377738.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【嵌入式系统】STM32串口通信的四种方法(基于RTOS)

目录1、串行通信的基本参数2、轮询方式代码效果3、中断方式代码效果4、中断加上时间戳方式代码及效果5、DMA空闲中断方式接收数据1、串行通信的基本参数 串行端口的通信方式是将字节拆分成一个接一个的位再传输出去,接收方再将此一个一个的位组合成原来的字符&…

大数据 java 代码示例_Java变量类型与示例

大数据 java 代码示例Java变量 (Java variables) Variables are the user-defined names of the memory blocks, and their values can be changed at any time during program execution. They play an important role in a class/program as they help in to store, retrieve…

毕业设计

位置跟踪系统工作原理(博闻网) http://science.bowenwang.com.cn/location-tracking.htm Azuma是这样定义增强现实的 :虚实结合 ,实时交互 ,三维注册 环境搭建: http://cvchina.net/thread-173-1-1.html http://blog.csdn.net/jdh99/article/…

十五、聚类的评估

一、Given Label 均一性homogeneity:一个簇中只包含一个类别样本,Precision 完整性completeness:同类别样本被归到同一个簇中,Recall 将均一性h和完整性c进行结合(二者加权平均)得到V-Measure,,β为权重 …

SQL SERVER作业的Schedules浅析

SQL SERVER作业的计划(Schedules),如果你没仔细研究过或没有应用一些复杂的计划(Schedules),那么你觉得SQL SERVER作业的计划(Schedules)非常好用,也没啥问题,但是我要告诉你一个“残…

leetcode 51. N 皇后 思考分析

目录题目思考AC代码题目 n 皇后问题研究的是如何将 n 个皇后放置在 nn 的棋盘上,并且使皇后彼此之间不能相互攻击。 思考 首先以N4为例,画出解空间树的一部分: 根据模板: void backtracking(参数) {if(终止条件){存放结果…

Django实战(18):提交订单

前面的内容已经基本上涵盖了Django开发的主要方面,我们从需求和界面设计出发,创建模型和修改模型,并通过scaffold作为开发的起点;在scaffold的基础上重新定制模板,并且通过Model类和Form类对用户输入的数据进行校验。我…

No module named ‘tensorflow.examples‘解决方案

想从tensorflow中导入mnist手写数字数据集,结果报错 from tensorflow.examples.tutorials.mnist import input_data import tensorflow.compat.v1 as tf tf.disable_v2_behavior()my_mnist input_data.read_data_sets("MNIST_data_bak/", one_hotTrue)&…

julia example_使用Julia中的Example的sign()函数

julia exampleJulia| sign()函数 (Julia | sign() function) sign() function is a library function in Julia programming language, it returns the sign of the given value in the form of -1/1. sign()函数是Julia编程语言中的库函数,它以-1 / 1的形式返回给…

.NET通用基本权限系统

DEMO下载地址: http://download.csdn.net/detail/shecixiong/5372895 一、开发技术:B/S(.NET C# ) 1、Windows XP以上 (支援最新Win 8) 2、Microsoft Visual Studio 2010/2012 C#.NET 3、.NET Framework 4.0以上 (支援最新4.5版本) 4、SQL Server 2005以…

leetcode 37. 解数独 思考分析

目录题目核心思路的不断细化1、核心框架2、考虑到每个位置的工作3、考虑到到达最后一列、该位置的数已经预置的情况4、判断是否符合规则的函数5、确定递归终止条件确定函数返回值AC代码题目 编写一个程序,通过填充空格来解决数独问题。 一个数独的解法需遵循如下规…

快速完成兼职外包开发任务

做了很多年的开发相关的工作,做过兼职开发,也做过外包一些开发项目。 兼职人员角色时 正是经历这些事情时,每次就要提前很费经的跟公司沟通,让他们把公司内部的svn开发出去,但是就是很难,会涉及到安全各方的…

使用YOLOv5训练NEU-DET数据集

一、下载YOLOv5源码和NEU-DET(钢材表面缺陷)数据集 YOLOv5源码 NEU-DET(钢材表面缺陷)数据集 这里的数据集已经经过处理了,下载即可 若通过其他途径下载的原始数据集标签为xml格式,需要转化为txt格式XML转txt格式脚本 二、数据集准备 NEU-DET(钢材表…

kotlin获取属性_Kotlin程序获取系统MAC地址

kotlin获取属性The task is to get system MAC address. 任务是获取系统MAC地址。 package com.includehelpimport java.net.InetAddressimport java.net.NetworkInterface//Function to get System MACfun getSystemMac(): String? {return try {val OSName System.getProp…

带分页功能的SSH整合,DAO层经典封装

任何一个封装讲究的是,使用,多状态。Action:任何一个Action继承分页有关参数类PageManage,自然考虑的到分页效果,我们必须定义下几个分页的参数。并根据这个参数进行查值。然后在继承ServiceManage,Service…

在windows phone Mango中使用原生代码开发程序

本文不讨论创建可执行的exe程序,主要想说明怎么在silverlight程序里面调用由原生代码所编写的DLL(C / ARM). 原生代码可以调用更多的API,但是这并不是说你就能随意获得那些你没有权限的资源,比如,你可以使用CopyFile这个API,但是如果你试图把文件Copy到\Windows文件夹,就会得到…

leetcode 198. 打家劫舍 思考分析

目录1、题目2、求解思路3、代码1、题目 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动…

找不到Windows照片查看器解决方法

桌面创建一个txt文本 复制这些命令,之后将后缀改为.reg,右击管理员身份运行即可 Windows Registry Editor Version 5.00 ; Change Extensions File Type [HKEY_CURRENT_USER\Software\Classes\.jpg] "PhotoViewer.FileAssoc.Tiff" ; Change E…

数字拆分为斐波那契数列_检查数字是否为斐波那契

数字拆分为斐波那契数列Description: 描述: We are often used to generate Fibonacci numbers. But in this article, we are going to learn about how to search Fibonacci numbers in an array? 我们经常被用来产生斐波那契数。 但是在本文中,我们…

伙伴分配器的一个极简实现

提起buddy system相信很多人不会陌生,它是一种经典的内存分配算法,大名鼎鼎的Linux底层的内存管理用的就是它。这里不探讨内核这么复杂实现,而仅仅是将该算法抽象提取出来,同时给出一份及其简洁的源码实现,以便定制扩展…