CSS3 实现导航栏

CSS HTML float inline inline-block 搜索引擎

导航栏是Web中常用的UI组件,在Bootstrap等CSS框架中基本都会提供。 既然导航栏这么重要,下面我们便来手动实现一个导航栏。 这个过程还是需要掌握一些排版技巧和CSS3特性的。

列表样式

导航栏通常使用<ul>来标记:

<ul>
  <li><a>First Item</a></li>
  <li><a>Second Item</a></li>
  <li class="active"><a>Third Item</a></li>
  <li><a>Fourth Item</a></li>
</ul>

首先便要去掉列表的那些默认样式,比如左边的项目标记(小圆点)和边距:

ul {
  left-margin: 0;         /* IE/Opera 默认使用外边距 */
  left-padding: 0;        /* Safari/Firefox 默认使用内边距 */
  list-style-type: none;  /* 左侧项目标记 */
}

这样便去掉了浏览器给<ul>设置的默认样式了。 至于如何自定义左侧的项目标记,可参考那些 CSS 背景图的技巧一文。

玩转超链接的样式

CSS HTML inline-block white-space 伪类 字体 盒模型 选择符

超链接虽然不起眼,但它却是万维网(Web)的基石,它使得用户可以在整个万维网进行导航。 链接的默认样式却很低调,在富有设计感的网站中通常会重写链接的样式。 下文介绍常用的一些链接样式技巧:链接状态选择符、自定义下划线、设置外链样式、按钮的实现等。

链接状态选择符

超链接标签有很多状态:未访问、已访问、悬停、激活。这些都可以通过CSS伪类选择符来识别。 其中悬停和激活是一般HTML元素都具有的状态,对于链接而言,当鼠标悬停时:hover生效, 点击后:active生效。比如我们设置未访问的链接呈蓝色,已访问的链接呈绿色:

a:link {color: blue;}
a:visited {color: green;}
a:hover, a:active {color: red;}

那些 CSS 背景图的技巧

CSS HTML float 搜索引擎

HTML的精髓在于文本的、结构化的数据格式。 这样的设计使得搜索引擎、屏幕阅读器、文本处理软件能够非常方便地读取信息。 尤其是CSS样式的分离与HTML5语义标签的提出,使得HTML的这一特性更加明显。 然而对于Web设计师,他们需要除文本外更加丰富的表示形式。 幸运的是CSS的分离,使得我们在不添加标记的同时,可以在页面上显示图片。 下面来看看这些有用的CSS背景图技术。

PKU 网关 Chrome 插件 PKUWebmaster 升级到 2.0 啦!

Chrome Github HTML JavaScript PKU

早在2013年,为了方便PKU的Chrome用户连接校内网官,包括Rea和我在内的鸟人团队一起编写了PKUWebmaster。 此后该插件历经了Chrome Notification 的标准化、PKU 网关接口的变化、以及整个Web前端技术的革新, 鸟人团队于近期意识到更新该插件的必要性。现已修复了既有BUG,并重写了设置页面。

安装与使用

2.0版本已经更新在Chrome商店了:

https://chrome.google.com/webstore/detail/pkuwebmaster(北京大学网关插件)/bnlipdfmheddpljigcaaamjpnbhhklkb

如果你希望使用最新的版本,可以下载Github仓库:

https://github.com/pku-birdmen/pkuwebmaster

并将src目录拖动至Chrome的『扩展程序』页面即可。

用正则表达式分析 URL

JavaScript 字符串 正则表达式 转义

正则表达式是编程语言中非常重要的一部分, 虽然至今都未被正式引入到C++中,╮(╯▽╰)╭。 因为绝大多数编程语言都内置了字符串类型,编程实践中对字符串的匹配和操作也非常频繁。 而正则表达式在多数情况下都会更加高效,语法也更为简洁。 本文借分析URL的场景,详述JavaScript中正则表达式的基本语法和常用函数。

正则表达式有非常多不同的实现, JavaScript的正则表达式基本符合最初贝尔实验室的规则, 同时从Perl语言引入了一些有用的扩展。 正则表达式最难以让人接受的一点在于太难阅读和调试,不允许空白字符和注释。 当然这也是它迷人的地方,正因如此而非常简洁和高效。 正如Vim一般,你需要学习很多东西才能上手使用,但这些努力绝对值得。

代码

在Web开发中正则表达式一点都不陌生,在表单验证时一定会用到。 甚至在AngularJS中,ng-pattern使用正则表达式增强了表单控件。 下面看一个正则表达式分析URL的例子:

var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var url = "https://harttle.land:80/tags.html?simple=true#HTML",
    result = parse_url.exec(url);
    blanks = '       ';
    fields = ['url', 'scheme', 'slash', 'host', 'port', 'path', 'query', 'hash'];
fields.forEach(function(field, i){
    console.log(field + ':' + blanks.substr(field.length) + result[i]);
});

JavaScript 实现原型继承

原型继承 JavaScript 作用域 继承

在原型继承模式中,我们不需要定义任何的类, 其实在概念上原型继承比类继承要简单许多。 毕竟不需要设计一整套嵌套的抽象类的层级。 在原型继承中,对象直接继承其他对象。

JavaScript支持多种面向对象编程风格,在JavaScript实现类的继承一文中介绍了JavaScript如何模拟基于类层级的继承机制。

导航: 上一页 下一页

加载中...

🔝