最新 | 最热门 | 最高评价

+0  移动网页的 iPhone X 适配

Tag: css | iphone | mobile | web
Cat Chen 发于 2018年04月16日 12:37 | 点击: 304 | 展开摘要
一个月前我在 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 | 点击: 1073 | 展开摘要
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 | 点击: 924 | 展开摘要
每次必说题外话

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

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

什么是斜线拼接

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

眼力好的筒子应该就能发

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

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

Tag: CSS | 前端开发
鸟窝 发于 2015年08月25日 13:49 | 点击: 671 | 展开摘要
原文:用 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 | 点击: 842 | 展开摘要
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 | 点击: 401 | 展开摘要
整理了几个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 | 点击: 428 | 展开摘要
本文是 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 | 点击: 3220 | 展开摘要
这个博客是基于“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 | 点击: 1636 | 展开摘要
今天,我想写一个"低技术"问题。
话说我订阅了不少了新闻邮件(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 | 点击: 1430 | 展开摘要
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 | 点击: 83475 | 展开摘要
看到这个标题大家一定会想到这篇神文《How Browsers Work》,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文。为什么我还想写一篇呢?因为两个原因,

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

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

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

浏览器工作大流程

废话少说,先来看个图:

从上面这个图

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

+1  Compass用法指南

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

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

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

一、Compass是什么?

简单说,Compass是Sass的工具库(toolkit)。

Sass本身

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