最新 | 最热门 | 最高评价
---

+0  把我的个人网站推倒重来（Part 2 - 用 Bootstrap 做移动网页）

Tag: bootstrap | css | rebuild | website
Cat Chen 发于 2018年09月04日 09:38 | 点击: 950 | 展开摘要
配置好 Harp 做静态网站构建后，就可以开始做网页了。上一个版本的个人网站样式是我自己设计的，当年用的还是 Macromedia/Adobe Fireworks，做出来一个 PNG 文件然后导出为不同的小图片。这次我也有考虑过要不要自己重新设计一个新的样式，但考虑到新设计不如解决其他几大问题重要，于是决定推迟样式设计。现在的计划是，先用 Bootstrap 解决绝大部分的问题，将来有时间重新设计样式了再做成 Bootstrap 主题。
导航栏
我的个人网站对组件的需求很

查看全文: http://www.udpwork.com/item/17073.html
---

+0  移动网页的 iPhone X 适配

Tag: css | iphone | mobile | web
Cat Chen 发于 2018年04月16日 12:37 | 点击: 916 | 展开摘要
一个月前我在 iPhone X 的 Mobile Safari 中打开 Instagram web，发现页面底下的导航栏跟 iPhone 的 home indicator 重叠在一起不方便使用。我想既然 Apple 为 iPhone X 专门更新的 Human Interface Guidelines 并为 native app 引入了 safe area 和 inset 等概念，那 Mobile Safari 应该有对应的 web 概念吧。搜索了一下，发现 Apple 确实

查看全文: http://www.udpwork.com/item/16790.html
^..^

+0  Chrome开发者工具的小技巧

Tag: Web开发 | 编程工具 | Chrome | CSS | HTML | Javascript
陈皓 发于 2017年01月19日 20:25 | 点击: 1595 | 展开摘要
Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不一定，也欢迎大家补充交流。

话不多话，我们开始。

代码格式化

有很多css/js的代码都会被 minify 掉，你可以点击代码窗口左下角的那个 { }  标签，chrome会帮你给格式化掉。

强制DOM状态

有些HTML的DOM是有状态的，比如<a> 标签，其会有 active

查看全文: http://www.udpwork.com/item/16066.html
^..^

+0  使用CSS mask 实现图片的斜线拼接

Tag: CSS | Web那些事 | css遮罩 | 图片拼接 | 斜线拼接
iAzrael 发于 2016年02月04日 11:50 | 点击: 1315 | 展开摘要
每次必说题外话

话说貌似好久没有写技术文章了，自从娃娃出来后，很少能有时间做技术研究，思考的时间也不足。不过有得必有失，世上事也就酱紫了。但是作为一个前端攻城师，不写代码，不研究技术，是会被后浪拍死在沙滩上的。

碰巧前段时间碰到个CSS问题，一直很喜欢CSS的，能CSS解决的问题绝对不用JS，于是就抽时间整整看。

什么是斜线拼接

回到本文主题上，”斜线拼接“是我自创的词语，因为我也不知道怎么描述这个需求，o(╯□╰)o，实际的效果是下面所示：

眼力好的筒子应该就能发

查看全文: http://www.udpwork.com/item/15172.html
^..^

+0  用 CSS 实现三角形与平行四边形

Tag: CSS | 前端开发
鸟窝 发于 2015年08月25日 13:49 | 点击: 1008 | 展开摘要
原文：用 CSS 实现三角形与平行四边形, 作者：邹润阳

最近在逛某个技术网站的时候，感觉文章关键词上的样式好酷炫啊。于是我将那种写法照搬到了我的博客中，也许最近逛过我博客的小伙伴已经发现了它出现在哪儿了——分页的样式。来张截图：

你在首页的底部也可以看到这样一个分页栏；是不是看上去还不错？下面就来看看这是如何实现的吧~

第一种方法：利用border

第一种方法是借助border属性 hack 出三角形，然后通过一个矩形拼接两个三角形最终制造出一个平行四边形。为什么使

查看全文: http://www.udpwork.com/item/14541.html
---

+0  CSS 样式规则的匹配算法实现

Tag: MacOSX | CocoaUI | CocoaUI源码解析 | CSS | iOS
ideawu 发于 2015年08月21日 15:49 | 点击: 1180 | 展开摘要
CSS 的完整英文名称是: Cascading Style Sheets, 级联样式表. 除了可以定义丰富的样式, 以及进行界面控件布局外, CSS 最重要的特性便是名字中的"级联(Cascading)"一词. 级联代表了父子关联, 天生便是和数据结构中的"树"相关的.

我创建的 CocoaUI iOS UI 框架, 是一个使用 CSS 进行 iOS 上流式布局的开发框架, 极大地方便了 iOS 应用的界面开发, 轻松适配多种屏幕. 因为 CocoaUI 使用 CSS 来进

查看全文: http://www.udpwork.com/item/14530.html
---

+0  CSS的几个属性display,float,clear,overflow,visibility

Tag: CSS | 前端开发
鸟窝 发于 2015年07月31日 21:28 | 点击: 720 | 展开摘要
整理了几个CSS常用的属性。

display属性:block/inline/none

display：block(作用是把行属性标签显示成块属性标签，可以设置宽高) ；
display：inline(作用是把块属性标签显示成行属性标签，这时块属性标签就不能设置宽高啦)；
display：none(作用是使所控制的标签不显示)
visibility：hidden(是设置元素的框的不可见，但是在布局中的位置是不变的)
它和display：none的区别就在于后者不会占用那个位

查看全文: http://www.udpwork.com/item/15232.html
---

+0  22个必须知道的css技巧

Tag: css | 前端开发
鸟窝 发于 2015年07月31日 21:28 | 点击: 840 | 展开摘要
本文是 Gredswsh的技术生活 整理的 22个必须知道的css技巧， 作为偶尔也会涉猎前端开发的我来说，特别喜欢一些前端开发的总结性的文章，文末我也附上了其它几篇关于CSS技巧的文章。

1、改变选中文字的背景和颜色

1
2
3
4
5
6
7
8

::selection{ /* Safari and Opera */
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */

查看全文: http://www.udpwork.com/item/15223.html
---

+0  Firefox中“max-width:100%”不兼容问题

Tag: CSS | 浏览器兼容 | JavaScript
youngsterxyf 发于 2014年04月28日 00:00 | 点击: 3792 | 展开摘要
这个博客是基于“Pelican + Markdown +
定制的my-gum主题”的。定制的主题将博文正文页面的
右边栏去掉，这导致在Firefox等浏览器中，正文中大的图片会突破正文块的宽度，高度也得不到限制，显示效果非常差。

其原因是：Markdown的图片区块元素![Alt
text](/path/to/img.jpg)渲染成HTML元素的结果为 -

<p>
<img src="/path/to/img.jpg" alt

查看全文: http://www.udpwork.com/item/12188.html
^..^

+0  HTML Email 编写指南

Tag: CSS
阮一峰 发于 2013年06月16日 15:40 | 点击: 1947 | 展开摘要
今天，我想写一个"低技术"问题。
话说我订阅了不少了新闻邮件（Newsletter），比如JavaScript Weekly。每周收到一封邮件，了解本周的大事。

有一天，我就在想，是不是我也能做一个这样的邮件？

然后，就发现这事不那么容易。抛开后台和编辑工作，单单是设计一个Email样板，就需要不少心思。

因为这种带格式的邮件，其实就是一张网页，正式名称叫做HTML Email。它能否正常显示，完全取决于邮件客户端。大多数的邮件客户端（比如Outlook和Gmail），

查看全文: http://www.udpwork.com/item/10026.html
^..^

+0  HTML代码简写法：Emmet和Haml

Tag: CSS
阮一峰 发于 2013年06月11日 17:23 | 点击: 1788 | 展开摘要
HTML代码写起来很费事，因为它的标签多。

一种解决方法是采用模板， 在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法----简写法。

常用的简写法，目前主要是Emmet和Haml两种，本文都将加以介绍。

这两种简写法，功能相近，各有特点。考虑到Haml基于Ruby语言，我建议Ruby/Rails项目使用Haml，其他项目使用Emmet。

一、Emmet的用法

Emmet是一个编辑器插件，官方网站提供多编辑器支持。我一般使用vim，下面就以vim

查看全文: http://www.udpwork.com/item/10006.html
---

+0  浏览器的渲染原理简介

Tag: Web开发 | 程序设计 | CSS | DOM | HTML | Javascript | Web
陈皓 发于 2013年05月22日 08:17 | 点击: 84282 | 展开摘要
看到这个标题大家一定会想到这篇神文《How Browsers Work》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两个原因，

1）这篇文章太长了，阅读成本太大，不能一口气读完。

2）花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。

所以，我准备写下这篇文章来解决上述两个问题。希望你能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工作上的东西。

浏览器工作大流程

废话少说，先来看个图：

从上面这个图

查看全文: http://www.udpwork.com/item/9900.html
|<<<12345>>>| 一共5页, 53条记录