分类： HTML&CSS

Unslider – 非常实用的超小JQuery轮播slider插件！

admin 评论
  1. 引入jQuery 和 Unslider
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>
  2. 准备HTML代码
    <div> 
  <ul> 
    <li><img src="slider_1.jpg" /></li> 
    <li><img src="slider_2.jpg" /></li> 
    <li><img src="slider_3.jpg" /></li> 
  </ul> 
</div>
  3. 添加CSS样式
    .banner { position: relative; overflow: auto; } 
  .banner li { list-style: none; } 
    .banner ul li { float: left; }
  4. 启动！
    $(function() { 
  $('.banner').unslider(); 
});

官方网站：http://www.bootcss.com/p/unslider/

Font Awesome：精心打造的 Twitter Boostrap 矢量字体图标

admin 评论

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标，除了包括 Twitter Boostrap 的默认图标外，还有社交网络图标、Web 应用程序图标和编辑器图标等等，可以免费用于商业项目。

主要特色：

  • ✓  一种字体，249个图标，是网页操作的象形语言；
  • ✓  纯 CSS 控制，能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果；
  • ✓  无限缩放，矢量图标在任何尺寸下都一模一样；
  • ✓  免费使用，包括商业和非商业项目；
  • ✓  支持 Internet Explorer 7 浏览器；
  • ✓  能够在 Retina 屏幕完美呈现；
  • ✓  完全兼容 Twitter Boostrap 最新版本；
  • ✓  对设计师友好，设计师能够轻松使用；
  • ✓  和其它图标字体不同，兼容屏幕阅读器；

使用方法

　　使用 CSS：

  1. 拷贝 Font Awesome 字体目录到项目中；
  2. 拷贝 font-awesome.min.css 文件到项目中；
  3. 修改 font-awesome.min.css 文件中的字体路径到正确的位置；
  4. 在页面的 head 里引入 font-awesome.min.css 文件：

<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />

　　使用 LESS：

  1. 拷贝 Font Awesome 字体目录到你的项目中；
  2. 拷贝 font-awesome.less 文件到 bootstrap/less 目录。
  3. 打开 bootstrap.less 文件并替换 @import “sprites.less”; 为 @import “font-awesome.less”;
  4. 编辑 elusive-webfont.less 文件的 @FontAwesomePath 变量为字体路径：

@FontAwesomePath: "../font";

然后重新进行 LESS 编译就可以了。

Github     官方主页     猛击下载

如何 GitHub 无法访问，可能需要配置 hosts 才能访问：

207.97.227.239 github.com
207.97.227.252 nodeload.github.com
207.97.227.243 raw.github.com
204.232.175.78 documentcloud.github.com

为什么absolute定位始终以浏览器为基准，而不是以父元素为基准

admin 评论

只有将父元素的postion设置为relative，那么absolute定位才以父元素为基准进行偏移。

 

拿例子说明最好
<body>
<div id="a">
  <div id="b"></div>
</div>
</body>

#a{width:500px;height:500px;background:#ccc;}
#b{width:100px;height:100px;background:#f00;}

首先我们设置#a{position:relative;left:30px;top:50px;}
此时浏览效果为,#a距离浏览器 上边缘50px,左边缘30px

接着我们设置#b{position:absolute;left:20px;top:10px;}
此时浏览效果为#b是距离#a内部上边缘10px,左边缘10px,而不是相对于浏览器

一句话，如果要使用absolute,就必须在这个absolute的外面那个层设置relative
如刚刚这个例子的#a和#b这样

而relative不是就是相对于浏览器的边缘的，而是相对于包围他的那个层，不理解，咱继续
如<body>
    <div id="out">
      <div id="a"><div id="b"></div></div>
    </div>
  </body>
假如我们的#out此时在距离浏览器上方100px,距离浏览器左边300px
那么我们设置#a{position:relative;left:10px;top:20px;}
此时浏览器显示#a距离#out上边缘20px,左边缘10px

好了，差不多就这样了，自己必须写一下才能知道，看看肯定不行

Web前端CSS框架-Bootstrap

admin 评论

简介

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

组件

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等

Javascript插件

Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：
模式对话框、标签页、滚动条、弹出框等。

定制自己的框架代码

可以对Bootstrap中所有的CSS变量进行修改，依据自己的需求裁剪代码。

 

Bootstrap中文网．http://www.bootcss.com/

css3元素简单的闪烁效果 （html5 jquery）

admin 评论

<html>
<head>
<style>
@-webkit-keyframes twinkling{ /*透明度由0到1*/
0%{
opacity:0; /*透明度为0*/
}
100%{
opacity:1; /*透明度为1*/
}
}

.twinkling{
-webkit-animation: twinkling 1s infinite ease-in-out;
}

.yellow{
background:yellow;
}
</style>
</head>
<body>
<div class=”twinkling yellow”>Go!!!</div>
</body>
</html>

 

注：动画名称为twinkling 时间为1s 动画次数为无限次 动画效果ease-in-out

简单吧！其实用css3做动画效果，比用flash，javascript要方便简单多了！希望浏览器赶快都支持css3 Animation .目前webkit内核的浏览器都支持（safrai,chrome）

摘自：html5专栏

上传控件（file类型的input控件）自定义样式出现“form.submit拒绝访问”错误

admin 评论

直接说解决办法，原理就是利用label控件。在点击label时，相当于触发上传控件的“浏览”按钮，且不会发生“拒绝访问”错误。

只有两步：

1、用CSS隐藏input控件，注意不能用display:none的方法，否则控件的功能也失效了。代码如下：

#upload_file{
position:absolute;
top:-9999px;
opacity:0;
filter:alpha(opacity:0);
}

2、为input控件添加label，属性for的值即为上传控件的ID，代码如下：

<label for=”upload_file”>上传新图标</label>

 

剩下的就是利用CSS美化这个label了。

表格单元格宽度的强制固定与网页对屏幕分辩率的自适应

admin 评论

今天，在完善一个原来项目的过程中，实现了两个想法：一个是表格单元格宽度的强制固定，另一个是网页对屏幕分辨率的自适应。下面分别介绍一下。

一、表格单元格宽度的强制固定

曾经碰到一个非常头疼的问题：一个table拆分为两个后，如何让两个table中的各个列精确对齐，看起来如同一个表。

这个问题，初想起来是蛮简单的：只要给两个table都添加相同的一堆<col>不就行了？

但实际操作起来却发现存在这样的问题：表格会根据单元格中填充内容的多少自动调整表格。

后来，我尝试着将table的各列的宽度直接作为行内style进行定义，结果也一样，表格仍然自动调整。

这里不再详述问题的解决过程。将几点重要经验分享给大家：

1、单元格的溢出处理
[css]
table{
width:1000px;
table-layout:fixed;
}
td{
overflow:hidden;
text-overflow:ellipsis;
}
[/css]

2、根据框模型，仔细分析宽度组成。这里重点观察：width是否如你所想的，包含了border、padding等。

小技巧：很多浏览器自带调试工具，用调试工具进行查看能发现意想不到的问题！

二、网页对屏幕分辩率的自适应

此项目要求在不同分辨率的屏幕上具有较为严格的一致性。这里给出解决思路供大家参考。

1、头部HEAD
[html]


[/html]
2、为要求的每种分辨率分别创建一个css文件

这些文件中只包含各分辨率下不同的部分，相同部分放在style.css中。

命名方式参考：style_pack_1920_1080.css, style_pack_1024_768.css。

3、利用js进行css文件引入控制

给出jquery代码：
[javascript]
function ajust_to_screen(){
var width = parseInt( $(‘body’).css(‘width’) );
var css_pack_file;
switch( width ){
case 1024:
css_pack_file = ‘style_pack_1024_768.css’;
break;
case 1920:
css_pack_file = ‘style_pack_1920_1080.css’;
break;
default:
css_pack_file = ‘style_pack_1920_1080.css’;
break;
}
$(‘style_pack’).attr( ‘href’, css_pack_file );
}
[/javascript]

js解决各个浏览器的css不兼容问题

admin 评论

如果分别用IE5、IE6、IE7、firefox、google浏览器、苹果浏览器浏览同一个网页，将可能出现不一样的效果。
这是它们之间对CSS的解析选择器不一样或错误和个别bug所导致。为了解决这些浏览器的css不兼容问题。
我们不得不找到一个能平衡于它们之间的解决方法。

如png透明问题在IE5、IE6下无法显示出其效果，我们可能会使用CSS hack或者引入外部JavaScript来实现。譬如前面我提到过用pngfix的那个方法就是调用外部JavaScript来解决在IE5、IE6下png透明问题。当然还有更多的方法。

而现在有种更加完美的方法能兼容IE5、IE6、IE7、firefox、google浏览器、苹果浏览器的CSS选择器解析不一样问题。那就是： ie7 – js

ie7 – js中是一个JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS2、CSS3选择器,使css兼容各个浏览器。它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示。

目前该ie7 – js版本： 2.1 beta 4

用法：
直接引用Google Code服务器上的js文件。

IE7.js
使IE5、IE6升级至兼容IE7
注释使Internet Explorer版本号小于7的IE浏览器载入该代码。

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

 

 

IE8.js
使IE5、IE6、IE7支持更多的W3C标准（修复了许多的HTML和CSS问题）。
注释使Internet Explorer版本号小于8的IE浏览器载入该代码，而其它符合标准的浏览器则会忽略该代码，并在IE8出来后不干扰其工作。

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->

PNG
此脚本仅修复了图像命名为：*-trans.png
遗憾的是，此方法透明的PNG图像不能平铺（重复）使用在背景上；也不能用在CSS “position”定位属性上 。

除了直接引用Google Code服务器上的js文件外，如果你愿意你也可以下载然后引入
下载地址页面：http://code.google.com/p/ie7-js/downloads/list

 

演示：
http://ie7-js.googlecode.com/svn/test/index.html

精选15个国外最流行的CSS框架

admin 评论

CSS框架通常指的是一些CSS文件的集合，这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。例如：

  • typography.css 基本排版规则
  • grid.css 基于网格的布局
  • layout.css 通常的布局
  • form.css for 表单样式
  • general.css 更多通用规则

虽然对于小的WEB开发项目来说，CSS框架并不一定适用，但是对于规模较大的团队开发项目而言，CSS框架不仅能加快设计开发速度，而且还能有效解决网站改版中带来的诸多麻烦和问题。这里推荐的15款CSS框架是现在国外最流行的CSS框架，希望能对你的开发有所帮助！

       1 . Elements CSS Frameworks

CSS Frameworks

       Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架，它有自己的项目工作流。它拥有你完成项目所需的所有东西，这也让你和你的浏览者感到愉悦。阅读 概述 了解更多。

       2 . YUI Grids CSS

CSS Frameworks

       YUI Grids基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 这个4KB的文件可提供超过1000中页面布局组合。 更多信息

       3 . YAML CSS Framework

CSS Frameworks

Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。

       4 . Blueprint CSS

CSS Frameworks

       Blueprint 是一个CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。

       5 . Schema Web Design Framework

CSS Frameworks

       Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同，Schema提供必要的基础来开始并立马让你的设计跑起来。

       6 . CleverCSS

CSS Frameworks

       CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。

       7 . Tripoli CSS Framework

CSS Frameworks

       Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准，Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

       8 . ESWAT Web Project Framework

CSS Frameworks

       ESWAT正在重新整理。如果你是冲着我的网站框架来的，那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

       9 . Boilerplate CSS Framework

CSS Frameworks

作为BluePrint CSS的原作者之一，我决定把我的思想重新整理到一个赤裸裸的框架，它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。

       10 . WYMstyle CSS Framework

CSS Frameworks

       WYMstyle是一组CSS文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

       11 . Content with Style Framework

CSS Frameworks

       Content with Style下一个逻辑步骤就是将这个扩展为CSS框架，允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板。

       12 . Logicss Framework

CSS Frameworks

       Logicss 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset文件或是用“*”)，排版支持文本字体大小调整(使用EMs) 和垂直居中，符合可定义的灵活的布局网格利用css代码生成工具。

       13 . That Standards Guy CSS Framework

CSS Frameworks

       That Standards Guy只能调用单个样式文件，主样式需要取得CSS认证(WCAG 1.0)； 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac； IE Hacks使用独立文件； 快速创建模板；框架中提供 少量注释/实例演示，可以节省时间来理解。

       14 . 960 Grid System

CSS Frameworks

       960 Grid System是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。

       15 . Emastic CSS Framework

CSS Frameworks

       Emastic 是一个CSS框架，它有连续的任务：探索陌生的新世界，寻找新生活和新的网站空间，大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化，在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。

——摘自 http://www.microspaze.com/?p=339

网页设计：浏览器在兼容模式下布局全乱了 – 解决办法

admin 评论

在chrome、ie浏览器中显示均正常，为何用360或搜狗等浏览器的兼容模式查看网页布局会全乱了呢？

解决办法：在head中添加一个meta标签，指定兼容模式。因为旧的ie浏览器与chrome等浏览器的解释方式差别较大，因此个人经验是指定较高的兼容模式即可，如ie8。

兼容性对于网页设计师来说非常重要。虽然最好是建立一个完全不需依赖任何网页浏览器特性或功能的网站，但是有时候这是不可能实现的。而文件兼容模式能将网页限制在某个特定版本的IE中。
可以使用 X-UA-Compatible 标头来指定网页支持的IE版本，可以使用 document.documentMode 来判定网页的兼容性模式。
通过选择支持某个特定版本的IE，你可以确保你的网页在未来的浏览器版本中也能显示一致。
指定网页兼容性模式
要为网页指定兼容模式，需要在网页中使用 meta 元素放入 X-UA-Compatible  http-equiv 标头。以下范例是指定网页为 IE7 兼容模式。

  1. <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ >

复制代码

不过前两天给一个网站调试的时候发现他连续加了两个版本的兼容，结果没有任何变化，结果查了下资料原来是IE浏览器只能读第一个兼容的代码后面的都不认！
即：IE只会执行网页中第一个 X-UA-Compatible 标头。
可以使用多个属性值来指定网页兼容模式，这能使网页在将来的浏览器版本中保持显示一致。如果需要设置多个兼容模式，使用分号分开各个模式。
如果一个特定版本的 IE 支持的可用兼容模式多于一种，则将采用列于标头属性中最高的可用模式。尽管不推荐这样做，但是可以使用这个特性来排除特定的兼容模式。下面的例子将会排除 IE7 模式。

  1. <meta http-equiv=”X-UA-Compatible” content=”IE=5; IE=8″ >

复制代码

常用兼容标头如下：
各种兼容模式代码范例：

  1. <meta http-equiv=”X-UA-Compatible” content=”IE=5″ />

复制代码

像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。

  1. <meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

复制代码

无论页面是否包含 <!DOCTYPE> 指令，均使用 Windows Internet Explorer 7 的标准渲染模式。

  1. <meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

复制代码

开启 IE8 的标准渲染模式，但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本，因此等同于冗余代码。

  1. <meta http-equiv=”X-UA-Compatible” content=”edge” />

复制代码

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。

  1. <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

复制代码

EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循 <!DOCTYPE> 指令。