导航

‍ ‍ IOS 里面，导航栏是必不可少的一个控件。很多人不知道如何设置导航直到我们想要的效果，这里我把我平时的经验记录下。 ‍ ‍ 1.透明度 [self.navigationBar setTranslucent:YES]; YES是该属性的默认值，导航是透明的并且如果当前视图的subviews的第一个元素是UIscrollview族类，那么默认UIscrollview的内容向下偏移64像素,与scrollview的 automaticallyAdjustsScrollViewInsets等效，view起点在屏幕的（0，0）点。这样当我们滑动scrollview的时候，就是将内容滑到导航栏背后，在导航栏的半透明效果下，会呈现模糊效果特别好看。 如果属性值是NO的情况下，导航是不透明的，view的起点是（0，64）。 2.颜色 在IOS7 之后 需要调用 [self.navigationBar setBarTintColor:color] 方法为导航栏着色。 3.导航添加背景图片 [self.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault]; 给导航添加背景图片，UIBarMetricsDefault是导航样式，图片会铺在状态栏和导航栏的底部。 1

自从受到了领导的熏陶之后，就想做一个针对企业运维IT人员的网站，收集一些对企业运维有价值的网站，也推荐一些安全信息给运维人员，在工作中发现中国It运维人员缺少对安全的认知，目前网站已经上线，可以到 share.ykuaile.net 上面查看信息，也欢迎大家推荐网站。网页做好了，就要去做用户体验，因为我习惯性把常用的网站添加到百度首页导航里面，这样每次打开浏览器就可以选择打开我常用的网站了。非常方便。这样一想，我就想让我的网站能拥有这个功能，至此我也做到了这个功能。 NO.1 下载代码 https://git.oschina.net/ykuaile/Add-to-Baidu-Home.git NO.2 打开baidu.html,查看添加效果 点击 快乐分享 就可以弹出百度网址添加框，没有登录百度帐号，就会弹出百度登录窗口，登录后才可以添加 正在添加 添加完成后就可以在百度首页看到添加的网址了，因为百度不知道share.ykuaile.net网站是什么类型的，所以放到未分类了。 NO.3 在自己的页面添加代码 1.在需要添加网址的a标签换成 <a onclick="addtobaidu(this); return false;" href="http://share.ykuaile.net/">快乐分享</a> " http://share.ykuaile.net/ "

我想在木有提供地图接口的年代，前端工程师门要么只写上企业的具体地址，要么就是用一张标有自己位置的地图图片。但是现在不一样啦！为了增强用户体验，谷歌，甚至百度都很开放了，你可以在他们的网站上找到地图接口，通过进行直接的调用就可以了。 下面我来教你怎么在网页中用好百度地图，当然了，你也可以去百度地图网站去查找相关的技术资料。 首先你需要进入到百度地图官网 http://developer.baidu.com/map/ 。因为我们是用的脚本进行加载的，所以我们要选择上图中的第一个“javascript api”，进去之后你会发现它的功能很强大有木有？ 这里只是它的冰山一角。你可以在最下面“开始体验”。里面有源代码，你可以获取，然后放入到你的网页当中去。不过我今天讲的不是这么简单的。 我需要的是地图层，需要有移动，还需要能进行导航搜索功能。怎么实现呢？Copy下面的这段代码到你的网页中： <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map('map'); var poi = new BMap.Point(116.307852,40.057031); map.centerAndZoom(poi, 16); map.enableScrollWheelZoom(); var content = '<div

我想在木有提供地图接口的年代，前端工程师门要么只写上企业的具体地址，要么就是用一张标有自己位置的地图图片。但是现在不一样啦！为了增强用户体验，谷歌，甚至百度都很开放了，你可以在他们的网站上找到地图接口，通过进行直接的调用就可以了。 下面我来教你怎么在网页中用好百度地图，当然了，你也可以去百度地图网站去查找相关的技术资料。 首先你需要进入到百度地图官网 http://developer.baidu.com/map/ 。因为我们是用的脚本进行加载的，所以我们要选择上图中的第一个“javascript api”，进去之后你会发现它的功能很强大有木有？ 这里只是它的冰山一角。你可以在最下面“开始体验”。里面有源代码，你可以获取，然后放入到你的网页当中去。不过我今天讲的不是这么简单的。 我需要的是地图层，需要有移动，还需要能进行导航搜索功能。怎么实现呢？Copy下面的这段代码到你的网页中： <script type=”text/javascript”> // 百度地图API功能 var map = new BMap.Map(‘map’); var poi = new BMap.Point(116.307852,40.057031); map.centerAndZoom(poi, 16); map.enableScrollWheelZoom(); var content = ’<div

利用browser-sync实时刷新页面 为了省去每次修改代码后都要手动刷新页面，我习惯使用 browser-sync 监听文件，自动刷新浏览器 1. 安装Browsersync npm install -g browser-sync 2. 运行Browsersync browser-sync start --server --files index.html --files "css/*.css" 引入normalize.css Normalize.css ，保证默认元素在不同浏览器上变现一致。 Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。—— 来，让我们谈一谈 Normalize.css 导航 页面 根据设计稿，我们把整个页面分为三个部分，头部、内容区域、页脚 <header class = "site__header"> </header> <main class = "site__main"> </main> <footer class = "site__footer"> </footer> 用 BEM 作为CSS的命名规范，虽然site__header丑了点，但是在你代码越来越多的时候

有时候，我们在Cordova/PhoneGap APP中实现导航，如果使用百度SDK开发，工作量是很大的。值得兴奋的是百度地图APP提供了URI API帮我们来实现这个功能。简单的说：如果用户手机中安装了百度地图APP，那么就可以通过一个超链接来调起地图APP来进行导航。 使用方法很简单，不需要任何准备工作，示例代码如下： <a href="bdapp://map/direction?origin=latlng:34.264642646862,108.95108518068|name:我家&destination=大雁塔&mode=driving&region=西安&src=yourCompanyName|yourAppName">线路规划</a> 点击上面的超链接，将会打开地图APP，自动规划出当前位置到大雁塔的路线，按提示即可进行导航。 参数说明： origin 内容由竖线分为两部分，latlng表示起点的纬度和经度，注意顺序；name表示地点的名称，只是一个标识 destination 目的地名称 mode 导航模式，固定为transit、driving、walking，分别表示公交、驾车和步行 region 搜索区域，一般为所在的城市名 src 你的公司名称|APP名称 可能的问题： 1 必须使用UTF-8编码传值，否则中文名称可能出现乱码，导致无法正确定位 2

Bootstrap响应式前端框架笔记十——导航栏相关组件 Bootstrap中提供的导航栏分为两种模式，使用nav-tabs类可以创建页卡模式的导航栏，使用nav-pills类可以创建胶囊模式的导航栏，示例如下： <p>导航分为两种，页卡模式和胶囊模式</p> <p>页卡模式</p <ul class="nav nav-tabs"> <li class="active"><a>主页</a></li> <li><a>活动</a></li> <li><a>留言</a></li> </ul> <hr /> <p>胶囊模式</p> <ul class="nav nav-pills"> <li class="active"><a>主页</a></li> <li><a>活动</a></li> <li><a>留言</a></li> </ul> 效果如下图： 针对胶囊式导航，也可以设置其排列方向为堆叠，添加nav-stacked类即可，示例如下： <p>堆叠排列的胶囊导航</p> <ul class="nav nav-pills nav-stacked"> <li class="active"><a>主页</a></li> <li><a>活动</a></li> <li><a>留言</a></li> </ul> 效果如下： 导航中也可以进行下拉菜单的嵌套，示例如下： <p>导航中嵌套下拉菜单</p>

iOS开发UINavigation系列二——UINavigationItem 一、引言 UINavigationItem是导航栏上用于管理导航项的类，在上一篇博客中，我们知道导航栏是通过push与pop的堆栈操作来对item进行管理的，同样，每一个Item自身也有许多属性可供我们进行自定制。这篇博客，主要讨论UINavigationItem的使用方法。 UINavigationBar： http://my.oschina.net/u/2340880/blog/527706 。 二、来说说UINavigationItem Item，从英文上来理解，它可以解释为一个项目，因此，item不是一个简单的label标题，也不是一个简单的button按钮，它是导航栏中管理的一个项目的抽象。说起来有些难于理解，通过代码，我们就能很好的理解Item的意义。 首先，我们创建一个item，用UINavigationBar导航栏push出来： UINavigationItem * item = [[UINavigationItem alloc]initWithTitle:@"title"]; UINavigationBar * bar = [[UINavigationBar alloc]initWithFrame:CGRectMake(0, 0, 320, 64)]; [bar