css学习之css选择器（1）

2014-07-07

1、CSS element>element Selector

版本：css2

用法：选取当前父元素的直接子元素

支持版本：

pc：ie7+、all chrome versions、all firefox versions、all safair versions、all opera versions

mobile：all ios safair versions、all opera mini versions、all Android Browser versions

eg：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS element>element Selector</title>
<style id="jsbin-css">
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
  <h2>My name is Donald</h2>
  <p>yellow1</p>
  <p>yellow2</p>
</div>
<div>
  <span><p>I will not be styled.</p></span>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>

预览地址：http://jsbin.com/yacoba/1

more >>

展开全文 >>

jquery 学习之toggle(),toggleClass(),fadeToggle()，slideToggle()

2014-07-06

toggle()

功能：显示或隐藏匹配的元素

说明：匹配的元素将被揭示或立即隐藏，没有动画，通过改变CSS显示属性。如果在初始显示的元素，它会被隐藏;如果隐藏，它将会显示。 display属性被保存并在需要时恢复。如果元素具有内嵌的显示值，然后通过隐藏和显示，它会再次被内联显示。

持续时间是以毫秒为单位;值越高，动画越慢，不是越快。字符串’fast’和’慢’可分别提供给代表200持续时间和600毫秒。

如果提供，则回调被触发，一旦动画完成。这对于将不同的动画一起在序列是有用的。回调不发送任何参数，但它被设置为DOM元素被动画。如果多个元素的动画，需要注意的是回调执行每一次匹配的元素，没有一次为动画作为一个整体是很重要的。

$(selector).trigger(function)
The toggle() method was deprecated in jQuery version 1.8, and removed in version 1.9.

more >>

展开全文 >>

li隔行显示不同颜色

2014-07-01

css方法：

预览地址：http://jsbin.com/pokan/2/

jquery方法：

预览地址：http://jsbin.com/pokan/1/

展开全文 >>

关于块级元素和行内元素

2014-06-26

常见的行内元素：

a – 锚点，abbr – 缩写，acronym – 首字，b – 粗体(不推荐)，bdo – bidi override，big – 大字体，br – 换行，cite – 引用，code – 计算机代码(在引用源码的时候需要)，dfn – 定义字段，em – 强调，font – 字体设定(不推荐)，i – 斜体，img – 图片，input – 输入框，kbd – 定义键盘文本，label – 表格标签，q – 短引用，s – 中划线(不推荐)，samp – 定义范例计算机代码，select – 项目选择，small – 小字体文本，span – 常用内联容器，定义文本内区块，strike – 中划线，strong – 粗体强调，sub – 下标，sup – 上标，textarea – 多行文本输入框，tt – 电传文本，u – 下划线

常用的行内元素要记住：a、span、img、input、lable、select、strong、textarea

常见的块级元素：

address – 地址，blockquote – 块引用，center – 举中对齐块，dir – 目录列表，div – 常用块级容器，也是CSS layout的主要标签，dl – 定义列表，fieldset – form控制组，form – 交互表单，h1 – 大标题，h2 – 副标题，h3 – 3级标题，h4 – 4级标题，h5 – 5级标题，h6 – 6级标题，hr – 水平分隔线，isindex – input prompt，menu – 菜单列表，noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容，noscript – 可选脚本内容（对于不支持script的浏览器显示此内容），ol – 有序表单，p – 段落，pre – 格式化文本，table – 表格，ul – 无序列表

常用的块级元素要记住：div、h1~h6、dl、ul、ol

more >>

展开全文 >>

css处理文字溢出显示为省略号，兼容ie,ff,chrome

2014-06-25

.limit1{ display:block;}
.limit1,.limit2,.limit3{
  max-width:100px;
  white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    overflow:hidden;}

文字溢出文字溢出文字溢出文字溢出
文字溢出文字溢出文字溢出文字溢出
文字溢出文字溢出文字溢出文字溢出
注意：标签必须为block属性才行，不然不会隐藏，原因是width属性对行内元素span失效，至于失效原因，下次再另开一帖说明

*ff必须在28+

预览地址：http://jsbin.com/seyaf/1/

展开全文 >>

bootstrap of .container，.row，.col-*

2014-06-24

“行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
使用“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素，例如.col-*。
类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建，且同一个row中.col-*的数字和必为12。

<div class=”row”>
<div class=”col-md-1”>.col-md-1</div>
<div class=”col-md-1”>.col-md-1</div>
<div class=”col-md-1”>.col-md-1</div>
<div class=”col-md-1”>.col-md-1</div>
<div class=”col-md-1”>.col-md-1</div>
<div class=”col-md-1”>.col-md-1</div>
<div class=”col-md-1”>.col-md-1</div>
<div class=”col-md-1”>.col-md-1</div>
<div class=”col-md-1”>.col-md-1</div>
<div class=”col-md-1”>.col-md-1</div>
<div class=”col-md-1”>.col-md-1</div>
<div class=”col-md-1”>.col-md-1</div>
</div>
<div class=”row”>
<div class=”col-md-8”>.col-md-8</div>
<div class=”col-md-4”>.col-md-4</div>
</div>
<div class=”row”>
<div class=”col-md-4”>.col-md-4</div>
<div class=”col-md-4”>.col-md-4</div>
<div class=”col-md-4”>.col-md-4</div>
</div>
<div class=”row”>
<div class=”col-md-6”>.col-md-6</div>
<div class=”col-md-6”>.col-md-6</div>
</div>

展开全文 >>