@dimpurr10年前
这是一个 HTML5 + CSS3 的个人名片页,附带响应式移动版,兼容 IE9 及以上浏览器。
最近有不少同学表示了对钉子目前个人页的喜爱,虽然个人觉得并不咋滴, 正好准备过段时间重新设计新版的个人页,于是好好修正了一下放出来了。出于无聊重新修改了各种语义化标记,把脚本也重做了,并且通过了 W3C 验证,感谢 @JoyNeop 菊苣的挑刺 …… 纯 HTML5 页面,需要请自行修改相关内容。有问题可以回复,可能不接受新的功能需求。
这是一个 HTML5 + CSS3 的个人名片页,附带响应式移动版,兼容 IE9 及以上浏览器。
最近有不少同学表示了对钉子目前个人页的喜爱,虽然个人觉得并不咋滴, 正好准备过段时间重新设计新版的个人页,于是好好修正了一下放出来了。出于无聊重新修改了各种语义化标记,把脚本也重做了,并且通过了 W3C 验证,感谢 @JoyNeop 菊苣的挑刺 …… 纯 HTML5 页面,需要请自行修改相关内容。有问题可以回复,可能不接受新的功能需求。
这是一个 HTML5 的空 WordPress 主题,可以基于此快速开始新主题的创作。内置了基本的输出结构和函数,没有任何多余样式标签。目前处于早期测试版本还较不稳定,欢迎试用和反馈。Github 项目地址→
因为连续制作了几个主题之后遇到了例如首页 meta 标签等的复用问题,于是就花了一晚上在几个主题的基础上修改合并成了这个空主题,并加上了注释。这只是一个单纯的空白主题,并且内置了一些常用函数,并不是一个框架,也没有复杂的功能。代码格式和文件结构有一定的个人风格,也欢迎诸位来添砖加瓦。预计将会在今后增加关于后台设置的框架。
页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 Fixed 固定布局,到因为宽屏设备和移动互联网的普及产生的响应式和自适应,再到「Mobile First」的设计理念,前端们在可用性方面做的努力越来越多。
REM 是一个在 CSS3 中被提出的新单位,相对 EM 变为了针对根元素 <html> 的 font-size 计算,使得便利性大为提升的弹性布局再次被提上话题。在介绍具体实现之前,不妨先说说为何要选择 EMs 进行布局。
脱离了表格布局的蛮荒时代后,越来越多的基本布局方式被应用在了实践中,当然也不乏多种配合。以下就是几个常用技术的对比。(响应式和自适应这两个名词经常被错误使用,例如 自适应网页设计(Responsive Web Design) 这篇文章
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪类了。
在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将伪类用于添加一些自定义字符时,只需使用伪类普遍的单冒号写法,以保证浏览器的兼容性:
在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。
这种效果一直以来需要通过 JavaScript 实现。不过就在去年,这项结合了 Relative (在屏幕中时) 和 Fixed (移出屏幕时) 的样式效果被提案添加到了 CSS3 中。下面是一个示例:
.sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: sticky; top: 15px; // 使用和 Fixed 同样的方式设定位置 }
因为这个样式尚未进入标准,还必须使用私有前缀。这里介绍一下浏览器兼容更好的 JS 实现方式:
记得在开学前夕,某钉子曾无奈地望着手上的各种大坑,对着日益临近的初三昼夜叹息。于是就在那时想起了一直想给博客写个主题,于是……这里就是一篇关于某钉子的第一个 WordPress 试水作的回顾。
草率的基调大概是一开始就定好的。在只剩下寥寥数天暑假而且作业没写完(活该)的情况下,主题的大致样式在英语课间的十分钟内迅速定下。刚回到家,在本地PHP环境中安上 WordPress ,然后直接在 wp-content 目录开始了代码。
在此之前还稍微回顾了一下自己过往作品的所谓设计风格,直到端详自己个人页的时候看到那个「交互/前端」……交互前端你妹啊!某人顿时掀桌。没错,直到今天才发现,作为自己选择的两个方向,正常开发过程中还要经过的一步视觉,某人完全没有研究……虽说当年还是以平面设计起家的,但是最后一次开PS貌似只是为了P一张同学的恶搞图片,难怪自己的页面都是所谓「简洁平面化」风格。眼前的道路霎时迷茫起来……
咳咳跑题了。说起来当年好不容易觉得能手写出个页面来时就已经有意要做,曾经下载的 WordPress 主题教程仍静静的呆在硬盘里,当然因为那时菜鸟级的技术没看多少就只能放弃。只是重新翻出来时发现里面引用的大量资源已经失效,于是最后还是在官方模版和官方文档之间各种参考完成的模版。
在CSS中,有一个极其实用的功能:@media 响应式布局。具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分。通过响应式布局,可以达到只使用单一文件提供多平台的兼容性,省去了诸如浏览器判断之类的代码。
当然这种设计也存在着缺点,比如我所见的不少使用响应式布局的设计在适配移动端时大量使用 display:none 隐藏富媒体元素,这样势必会导致大量不必要的流量。因此,如果有较为重要的移动端需求,那么还是开发专门的移动版页面为好。不过,对于诸如内容较少的页面或者单页式网站来说,响应式布局依然不失为一种偷懒的好方法 ^ ^
<link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)">
这句意味在满足 media 的判断语句 screen and (min-width: 400px) 即 屏幕并且最小宽度不小于400px 的介质上面使用 middle.css 。