作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面。在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果。 效果演示 插件下载 详细教程 HTML示例代码 ...
swiper css 制作移动端网站,折叠导航 前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题让我不知道选用fullpage还是选择swiper来写这个项目。下图就是这个项目完成的效果。 问题 :整屏滑动两个插件都可以用,但是移动端用swiper偏多的 问题 :网站的导航要随着页面更新跳转 这里 ...
2017-06-26 10:43 0 1501 推荐指数:
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面。在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果。 效果演示 插件下载 详细教程 HTML示例代码 ...
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高相等的子盒子,左侧的子盒子左上角和左下角以及右侧子盒子的右上角和右下角利用 ...
我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能;而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件。 其实swiper中的官网中也有这种功能的实现,但是我认为是有点麻烦的。而我在网上也没找到。所以我通过查找和研究弄出了这种方法(也可能有人这么用了 ...
在手机web app开发中会涉及到水平导航,代码如下: .nav_dh{box-sizing: border-box;width: 100%;overflow-y: auto;height:2.5rem;line-height:2.5rem;background-color ...
结合 Framework7 和ios UI系统,微信weUI,支付宝H5 我们在移动端一些css用法 细节的有了更深的了解; 高斯模糊的显示效果,ios8以上支持,ios8以上0.5px,backdrop-filter: blur(10px)等新的属性被支持; 适当利用伪 ...
在我们用手机浏览网页时,当点击某个链接或者点击事件时 会出现一层蓝色半透明的高光显示, 但在开发webapp时,由于网页是被native load去的,在app里面点击的时候如果出现高光则显得很不和谐 css3 的-webkit-tap-highlight-color: rgba ...
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。 本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果。 导航条是梯形形状的。 背景 ...
网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动画效果演 ...