'Design' 标签

几段强大的响应式 CSS 代码

实现响应式图像CSS

img {
max-width: 100%;
}

响应式导航菜单

CSS // 宽度小于960px 就隐藏变成下来式菜单,其实这样也不好看,最起码默认显示一两个就更好。
nav select {
display: none;
}

@media (max-width: 960px) {
nav ul { display: none; }
nav select { display: inline-block; }
}

解决IE下2个DIV无法并排

都说IE总会让人蛋蛋的痛,它怎么还不si呢,靠。

最近弄的一个站的css上使用了伪对象(:after)和最小宽度等一些现在很流行的属性,在IE8下导致2个DIV无法并排,就是浮动飘出去了,网上找了一片,最后加“clear: both;”属性就解决问题了。

Web开发必备 Emmet帮你超快编码

Emmet 是一款用于提高Web开发效率的插件,例如,特别是前端开发HTML和CSS,Emmet的缩写语法将实现少写许多代码,提高了编写速度。

Emmet 除了HTML的缩写功能外,也支持CSS缩写,Emmet 可以做到超快速编码。还有一大特点就是可以个性定制。完整介绍请到官网查阅
http://emmet.io/

Emmet支持以下软件:

  1. Sublime Text
  2. Eclipse/Aptana
  3. TextMate
  4. Coda
  5. Espresso
  6. Chocolat
  7. Komodo Edit
  8. Notepad++
  9. PSPad
  10. textarea
  11. CodeMirror
  12. Brackets
  13. NetBeans
  14. Dreamweaver

9个不错的响应式设计CSS技巧

1。消除“下划线”:


2。响应视频:
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}

.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

3。翻转文本链接:


4。最小和最大宽度:
.container {

width: 800px;
max-width: 90%;
}

实用的在线代码编辑器

实用的在线代码编辑器

Compilr
Compilr 是一个在线的集成开发怀集(IDE),目前支持9种编程语言:C、C++、C#、Java、JavaScript、PHP、Python、Ruby 和 Visual Basic。 Compilr 由坐落于加拿大新斯科舍省的 Ninja Otter Inc 公司开发。‘

CodeMirror
CodeMirror是一个利用JavaScript实现代码编辑器。它为使用者提供了几乎覆盖全部流行编程语言的代码高亮和自动缩进功能,在浏览器之上构建了一个简易的IDE。
相比于普通的代码高亮插件,CodeMirror还具有了大量的可编程接口,提供了诸如撤销、保存、替换、括号匹配、光标控制等通常IDE所应具有的API功能。因此,CodeMirror实质上已经做好了将自身作为浏览器中最佳IDE所需的一切。

基于此,许多CodeMirror插件已经出现,例如JavaScript的代码补全插件、搜索插件、代码折叠插件、XML标签自动闭合插件等等。

CodeAnyWhere
CodeAnyWhere:基于浏览器代码编辑器是可以运行在浏览器上的代码编辑器,内嵌强大的FTP客户端,支持多数流行的网页格式,支持编辑多种类型的文件。
Codeanywhere支持多数流行的网页格式(HTML、PHP、JavaScript、CSS和XML),支持编辑多种类型的文件,集成了桌面编辑器中所有好的特征:高亮显示语法、自动填充代码、智能缩进、支持无限次的撤销和重做、无数个tabs。

Thimble
Firefox 浏览器背后的非营利性组织 Mozilla  宣布推出了一个名为 Thimble 的 HTML/CSS 在线交互式学习网站,该站是 Mozilla 新近推出的 Webmaker 计划 的组成部分,旨在帮助普通用户在线学习编写 HTML 和 CSS。

9个常用特色的 CSS 属性

1. 圆角

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

想充分了解IE浏览器对CSS3属性支持情况,请看这篇文章 http://smashinghub.com/rounded-corners-with-css3.htm。

2. 阴影效果

通过CSS3的box-shadow属性可以非常方便地实现阴影效果。所有主流的浏览器都支持这个属性,其中Safari浏览器支持加前缀的-webkit-box-shadow属性。

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

也可以用JavaScript来实现阴影效果,如下:

object.style.boxShadow="20px 10px 7px #ccc"

3. @media属性

Media属性用于设置同一样式表在不同屏幕下的样式,可以在属性值中指定应用此样式的介质或媒体。

@media screen and (max-width: 480px){
/* 网页在宽度为480px屏幕上的显示样式 */
}

开发者也可以使用@media print属性指定打印预览的样式:

@media print
{
p.content { color: #ccc }
}

4. 渐变填充

CSS3的Gradient(渐变)属性给了开发者另一个惊人的体验。Gradient还未得到全部浏览器的支持,所以不能完全依赖Gradient来设置布局。

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));

前端代码标准最佳实践:javascript篇

推荐一边鸟儿可以看的关于Javascript入手的好文!

最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,JavaScript代码更符合标准,有更好的性能,更好的可维护性,尝到了重构后的甜头,也萌生了写这个系列博客的念头。前端代码有其固有的灵活性,这就导致了目前前端代码非常混乱的局面,本系列文章希望能起到抛砖引玉的作用,让更多的人重视前端代码的质量,编写更标准的前端代码。

本系列文章共有三篇,分别讨论HTML,CSS,Javascript,本篇将讨论Javascript。

javascript是灵活性非常高的一种脚本语言,使得用其实现的同样功能有多种多样的写法,那么在项目中如果没有统一的规范,就会造成javascript代码难以维护,随着项目的深入,性能j也越来越差,文件也越来越大。所以尽早制定统一的编码规范是非常必要的,下面是整理的一些javascript规范供大家参考。

(1)编码格式
好的编码格式,不同人有不同的看法,但是在同一个项目中一定要有统一的格式。下面是常用的编码格式:

1,缩进: 不使用tab(x09)缩进,以4个空格作为逻辑的缩进。

不要使用旧版的浏览器浏览BoroMeke

之前在XP系统下使用不同的浏览器查看本站的CSS兼容性,发现那真叫人悲催的,辛苦弄的优秀CSS代码,在xp系统和那些旧的浏览器面前完全没有效果,真叫人人伤心的。除了xp系统对有些CSS代码不支持之外,Chrome,火狐等国外的浏览器上BoroMeke不会有CSS错误问题。但是如果不是使用IE9以上版本的话,IE下许多CSS代码都不支持,所以对于网页设计师或者开发人员来讲IE真是让人头疼,许多CSS代码Chrome和火狐等都支持,就唯独IE它老人家例外,微软从来都是干这种事情的。

为WordPress置特定页面使用特定CSS

要为 WordPress 中某一日志分类指定使用另一个样式表(当然,这个样式需要我们预先准备好)。一般情况下,WordPress 主题都是通过头部文件 header.php 来加载样式表的,所以,打开这个文件,我们都会看到有如下这么一条函数:

<link rel="stylesheet" href="” type=”text/css” media=”screen” />
好了,我们就在上面这条函数上稍稍做点修改,假如我们要为ID是“1”的分类指定使用我们预先准备好的样式表 cat-1.css,于是上面的函数可以改成如下这样:

<link rel="stylesheet" href="/cat-1.css”
type=”text/css” media=”screen” />

<link rel="stylesheet" href="”
type=”text/css” media=”screen” />

结果是,如果用户打开的页面是ID为“1”的日志分类,它使用的样式表则是 cat-1.css,如果打开的是其它页面,则使用主题默认的样式表。