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

+5  神奇的CSS形状

Tag: Web开发 | 编程语言 | 趣味问题 | CSS
Neo 发于 2012年03月24日 20:35 | 点击: 3842 | 展开摘要
【感谢 Neo 投递本文 – 微博帐号：@_锟_ 】

在StackOverflow上有这么一个问题，有位同学在http://css-tricks.com/examples/ShapesOfCSS/  找到一些使用CSS做的形状，其中一位同学对下面的这个形状充满了疑问。

形状是：

代码是：

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px

查看全文: http://www.udpwork.com/item/7034.html
1

+4  40个很不错的CSS技术

Tag: Web开发 | 技术读物 | 操作系统 | 杂项资源 | CSS | HTML
陈皓 发于 2010年10月08日 08:04 | 点击: 3290 | 展开摘要
以前发布过《30种时尚的CSS网站导航条》，下面是40个CSS的技术，可以让你的网页有更好的用户体验。希望你喜欢

1. A CSS styled table version 2

2. A CSS-based Form Template

3. A Stripe of List Style Inspiration

4. Accessible expanding and collapsing menu

5. Advanced CSS Menu Trick

6. Anim

查看全文: http://www.udpwork.com/item/2957.html
1

+3  去哪吃？

Tag: 前端开发 | css3 | Javascript
崔凯 发于 2011年02月23日 15:33 | 点击: 2592 | 展开摘要
每天中午都发愁吃什么。于是写了这么个东西，随机抽取吃饭地点。演示如下：

var alldata = "新中关,欧美汇,避风塘,牛魔王,小豆,即品面饭"
var alldataarr = alldata.split(",")
var num = alldataarr.length-1
var timer
function change(){
document.getElementById("oknum")

查看全文: http://www.udpwork.com/item/4344.html
1

+1  Compass用法指南

Tag: CSS
阮一峰 发于 2012年11月29日 17:02 | 点击: 2672 | 展开摘要
几个月前，我介绍了Sass的用法。
Sass是一种"CSS预处理器"，可以让CSS的开发变得简单和可维护。但是，只有搭配Compass，它才能显出真正的威力。

本文介绍Compass的用法。毫不夸张地说，学会了Compass，你的CSS开发效率会上一个台阶。

本文假设你已经掌握了CSS的主要用法，如果你还懂Sass，那就更好了。但是不懂Sass，一样可以阅读本文。

一、Compass是什么？

简单说，Compass是Sass的工具库（toolkit）。

Sass本身

查看全文: http://www.udpwork.com/item/8766.html
1

+1  瑞典Ericsson总部Master Thesis面试回忆录

Tag: 职业生涯 | Chalmers | Ericsson | Interview | 面试
Guancheng (G.C.) 发于 2010年02月05日 03:53 | 点击: 2866 | 展开摘要
前言：去年4月份我申请过一些6月份开始的毕业设计和暑假实习，最终拿到了Ericsson的master thesis offer和另一个哥德堡小公司的summer intern，Volvo在我拿到summer intern后也给了interview。现在应该已经有不少一年级的同学要开始找暑假实习了，我觉得你们可以考虑申请6月份开始的毕设(等毕设结束后再回学校把剩下的课程修完)。下面是我去位于Kista的Ericsson总部面试的经历，希望对大家有用。Summer Intern总

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

+0  你好黑暗，我的老朋友 —— 为网站添加用户友好的深色模式支持

Tag: 技术向 | JavaScript | CSS | Media Query | 深色模式
skk 发于 2020年05月26日 14:05 | 点击: 577 | 展开摘要
随着越来越多的操作系统、浏览器开始支持 Dark Mode、支持相应的 Media Queries Level 5，越来越多的网站开始添加深色模式。当然我的博客也不甘落下，趁着新的主题完工不到一个月、还看得懂自己写的代码，也加上了深色模式。
什么是「深色模式」
很多操作系统在日落后会自动切换到「深色模式」、并不意味着「深色模式」就是「夜间模式」。「夜间模式」用于夜晚的弱光环境，主要目的是保护眼睛、减少强光刺激、避免影响睡眠，不难理解为什么 macOS 的 Night Shif

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

+0  天下武功，唯快不破 —— 我是这样优化博客的

Tag: 技术向 | 前端性能优化 | lazyload | JavaScript | CSS | HTTP
skk 发于 2020年07月11日 19:49 | 点击: 928 | 展开摘要
哪个男孩不想拥有一个速度非常快的博客 之前我也写过少许 关于 Web 性能优化的文章，但是却从未介绍过自己的博客是如何优化的。这次我来水篇文章，罗列一下我的博客的几个零散的优化点。
服务器与 CDN
很多人都在我的博客下评论，问我的博客用了哪里的服务器这么快。实际上，我不仅没有用香港、新加坡等亚太服务器，而是用的被誉为「减速器」的 Cloudflare，因为不少好事者和脚本小子喜欢拿我的博客开涮。有了 Cloudflare，我可以预先编写好 FIrewall Rules，几乎

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

+0  再快一点，再快一点 —— 优化博客白屏时间的实践

Tag: 技术向 | 前端性能优化 | CSS
skk 发于 2020年10月03日 16:40 | 点击: 426 | 展开摘要
两个多月以前，我写了一篇文章 介绍我是如何优化我的博客的，但是我对于博客的白屏时间仍然不满意。过去一个月我在博客上进行了一系列优化实践，终于成功将博客的白屏时间减少了将近 50%，这篇文章就来记录优化的过程和方案。
确定和分析白屏时间
First Paint 和 First Contentful Paint 是衡量白屏时间的重要指标。Google Chrome 团队提供了专门的库 web-vitals 用于在浏览器中衡量这些指标。直接在本地开发环境中引入该库：

<sc

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

+0  把我的个人网站推倒重来（Part 9 - 精简 Bootstrap 编译）

Tag: autoprefixer | bootstrap | css | rebuild | scss | website
Cat Chen 发于 2020年01月03日 08:11 | 点击: 531 | 展开摘要
我在很久之前一篇文章里讲述了我为何选择 Bootstrap 作为样式框架，在那篇文章的结尾我提到了一个我当时没做的优化：去掉我不使用的 Bootstrap 模块。
我现在终于有时间把这项优化做了，我可以先说说做好的效果：Bootstrap 全部的 CSS 共 152kb，在优化后变为 72kb，节省了一半的体积。（压缩后的网络传输体积由 23kb 优化到了 11kb。）这个优化的效果还是很明显的，接下来我说说我具体做了什么吧。（具体代码可以参考我的 pull request

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

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

Tag: bootstrap | css | rebuild | website
Cat Chen 发于 2018年09月04日 09:38 | 点击: 2064 | 展开摘要
配置好 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 | 点击: 1911 | 展开摘要
一个月前我在 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 | 点击: 2752 | 展开摘要
Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不一定，也欢迎大家补充交流。

话不多话，我们开始。

代码格式化

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

强制DOM状态

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

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