Refresh

This website coolshell.cn/tag/css/page/2 is currently offline. Cloudflare's Always Online™ shows a snapshot of this web page from the Internet Archive's Wayback Machine. To check for the live version, click Refresh.

Browsed by
标签: CSS

一些非常有意思的杂项资源

一些非常有意思的杂项资源

下面是一些最近在互联网上看到的一些各式各样的资源和文章,当然,都是英文社区的,本来想每一个写一篇文章,但是觉得一篇文章一句话真没劲,所以,把这些东西合并写成一篇文章,这样有利于减轻本站的负载,也有利于节省网络带宽,同样,也就节省了能力和电力,因此也就很环保,很低碳。呵呵。

  • 说到这些很酷很炫的东西,大家一定会想到使用Flash,不过,目前的Flash正在受到HTML5的强力挑战,目前,对于HTML5的展示网站很多,让我们看到了HTML5完全可以做出Flash的样子,比如前些天本站说到的这个演示,还有给大家展示的纯HTML5的小游戏,不过,那些都是一些演示和展示罢了。今天在网上看到一个更强大的HTML5游戏,相当有可玩性,大家不妨一去试玩:http://www.phoboslab.org/biolab/

  • HTML5 可以应用的还不只是游戏,这不,有文章指出,用VexFlow还可以很轻松地在网页上发布乐谱。而这个网页还可以让你制作Hi-PoP音乐。

Rendered music

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (16 人打了分,平均分: 2.63 )
Loading...
写HTML和CSS的新方法

写HTML和CSS的新方法

Zen Coding 一个用来简化编写 HTML,XML, XSL (或是其它一些诸如此类格式的编辑器)。其主要是用一种缩写方式的语法来书写大量重复和无味的HTML,很像CSS语法。下面是一个例子:
div#page>div.logo+ul#navigation>li*5>a
展开后会成为下面这个样子:
<div id="page">
        <div></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>
可以看出来,#代表ID,>代表下一层。
好烂啊有点差凑合看看还不错很精彩 (6 人打了分,平均分: 3.00 )
Loading...
Web中的省略号

Web中的省略号

在Web开发中,对于一种情况很常见。那就是,文本太长,而放置文本的容器不够长,而我们又不想让文本换行,所以,我们想使用省略号来解决这个问题。但是,在今天HTML的标准中并没有相关的标识或属性让你可以简单地完成这个事。但是我们可以使用CSS样式表来完成这个事,在IE,Safari,Chrome,Opera中都可以。但在Firefox中却不行,但我们可以使用jQuery来解决Firefox不兼容的问题。下面是相关的代码示例。

使用CSS设置省略号

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (7 人打了分,平均分: 2.86 )
Loading...
9个最常见IE的Bug及其fix

9个最常见IE的Bug及其fix

9个最常见IE的Bug及其fix

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗,让你的开发生产率严重下降。下面是一个教程,告诉你9个IE上最常见的BUG以及如何解决它们。

1. 居中布局

创建一个CSS定义把一个元素放到中间的位置,可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个margin: auto; ,然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;

}

下面是我们所期望的输出:

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (17 人打了分,平均分: 4.29 )
Loading...
13个不错的Javascript和CSS的菜单

13个不错的Javascript和CSS的菜单

以前发布过两篇文章——“30种时尚的CSS网站导航条”和“20个优秀的Javascript导航技术”,今天向大家介绍一下,13个不错的Javascript和CSS的菜单。

1) 性感的滑动型菜单 

Sexy-menu - 13不错的Javascript CSS菜单

演示: Mootols Version
演示:Script.aculo.usVersion

 

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (13 人打了分,平均分: 3.77 )
Loading...
IE的CSS相关的BUG

IE的CSS相关的BUG

ie-bug这个网页(http://haslayout.net/css/index)上例举了所有的IE和CSS相关的BUG。如果你在开发网页的时候,你需要看看。

目前,这个网站上包含了 28 个“普通的Bug”4 个“布局方面的Bug”6 个“可以绕开的Bug” 以及 1 个“IE崩溃的Bug”,所有的这些Bug有39个指南和48个解决方法。这个列表目前更新到 2009年8月11日,19:50:22

下面是所有的bug列表,你可以点击每个BUG名的链接查看更详细的说明。

普通Bug

这部分 IE 的 bug 是比较普通的无法归到其它种类,或是同时属于多个种类的Bug。

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (5 人打了分,平均分: 2.40 )
Loading...
如何检测浏览器是否支持CSS3

如何检测浏览器是否支持CSS3

如何检测用户的浏览器是否支持CSS3,我们需要使用HTML,CSS和JavaScript来完成这件事情。下面是步骤。

1)先制作下面的HTML

<span id="check" rel="Detect"></span>

2)然后书写下面的CSS

#check {
  display: none;
  width: 0;
  height: 0;
}
#check[rel^="D"] {
  display: block;
  width: 0;
  height: 0;
}

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (5 人打了分,平均分: 1.40 )
Loading...
Web设计的速查卡

Web设计的速查卡

速查卡不仅仅可能帮助我们记住一些重要的东西,而且可以放在手边,当我们需要的时候,可以很快地查找。

在本篇文章中,你可以看到28个相当不错的关于Web设计的速查卡,它们分别是关于:Photoshop, Dreamweaver, 颜色, 排版, 其它Web设计相关的。他们都是一页纸,可以方便你很快地打印出来。

Photoshop

Photoshop CS3 快捷键速查卡

Photoshop CS3 Keyboard Shortcuts Cheat Sheet - screen shot.Downloads: PDF (Windows), PDF (Mac)

阅读全文 Read More

好烂啊有点差凑合看看还不错很精彩 (9 人打了分,平均分: 3.67 )
Loading...