border-radius

1、基本书写方式

1.1 设置四个值

基本形式也是简写形式,例如:

div {
  border-radius: 10px 5px 10px 5px;
}

这样可以给`div`的四个角都设置`border-radius`属性,分别对应左上角(`top-left`)、右上角(`top-right`)、左下角(`bottom-left`)、左下角(`bottom-right`)。

继续阅读

一个小技巧,在做移动web站点的时候,可以用的到

全屏背景的设置如下:

code of css

html{
    background: #000 url("./bg.jpg") center center no-repeat;
    min-height:100%;
    background-size:cover;
}
body{
   min-height:100%:
}

另外,对于图片的自适应,我们可以这样对图片定义:

img{
    max-width:100%;
    max-height:100%;
}

然后在使用图片的时候,可以直接定义百分比即可。

在改版的时候想试试css3的高级选择器,虽然兼容性很差,但通过ie-css3,可以让IE也兼容这个属性,所以,用起来还是挺舒心的。

:nth-child 属性是选择父元素的第n个子元素

:nth-last-child 属性是倒数着选择,和上面的相反,所以,下面的例子就用nth-child来演示了,nth-last-child类似。

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul li:nth-child(1)就是选择第一个li标签,里面的数字可以替换成其他的,就意味着选择另外的li标签。

此外的用法就更为强大了,下面简要说一下,我用到的比较有限。

  • ul li:nth-child(n+1)表示的是全部选中
  • ul li:nth-child(n+2)表示的是从第二个以后全选中
  • ul li:nth-child(n+3)表示的是从第三个以后全选中
  • ul li:nth-child(n)表示全选中
  • ul li:nth-child(2n)表示隔一个选中
  • ul li:nth-child(3n)表示隔两个选中
  • ul li:nth-child(n+1)表示全选中
  • ul li:nth-child(2n+1)表示从第一个开始,隔一个选一个
  • ul li:nth-child(2n+2)表示从第二个开始,隔一个选一个
  • ul li:nth-child(2n+3)表示从第三个开始,隔一个选一个
  • ul li:nth-child(3n+1)表示从第一个开始,隔两个选一个
  • ul li:nth-child(3n+2)表示从第二个开始,隔两个选一个

其他形式依次类推。

另外,还有一种负号的写法:

  • ul li:nth-child(n+4)表示第四个以后全选中
  • ul li:nth-child(-n+4)表示选择的是前四个

nth-child是一种>=或者<=的思想,所以,你会发现,无论符号正负,4位总被选中。

最后,发一个测试css3高级选择器的地址:

http://lea.verou.me/demos/nth.html

OK,更多功能,大家慢慢去发现。

最近写改版页面,需要学习的东西用到的东西也很多,在这类记录一下,很多东西对大家都很有用。

首先,我最新版本提出的要求是:兼容IE全家(6+),chrome全家,opera全家等众家族,所以,在页面上需要花费较大的精力。

下面说一说如何在IE下支持css3高级选择器,需要用的工具是:

ie-css3.js:官网:http://www.keithclark.co.uk/

DOMAssistant:官网:http://www.domassistant.com/documentation/

能够支持的选择器有:

  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :nth-last-of-type
  • :first-child
  • :last-child
  • :only-child
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :empty

不支持:not

使用方式:

<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>

另外,css3属性在IE下支持,需要使用PIE,网上资源比较多,不再赘述。

原文地址:http://www.oschina.net/news/53903/zui-1-0?from=20140727

关于zui框架

授权协议:MIT
项目地址:https://github.com/easysoft/zui/
文档示例:http://easysoft.github.io/zui/
下载地址:https://github.com/easysoft/zui/releases

zui框架的主要特点如下:

  • 简单美观,易于使用,快速构建简洁大方的现代web应用。
  • 新颖健壮,采用HTML5且支持所有流行的移动及桌面浏览器平台,一些旧的浏览器也能够降级支持。
  • 轻快独立稳定,最佳的可用性能,最大限度的不依赖于外部组件。
  • 全平台响应,一次编写,响应任何尺寸的设备。
  • 比较适合中文环境

我们为什么来做zui框架?

zui框架并不是我们完全从头到尾自己写出来的。我们也是在使用bootstrap, yui这些框架中结合我们自己产品的应用场景,逐渐积累形成的。现在最成熟的当推bootstrap了。但是bootstrap的版本跨度比较大,也有很 多功能是我们不需要的,再加上它还是比较适合英文场景的布局。所以我们才决定自己来写zui框架。在写这个框架过程中,我们结合了很多具体的应用场景,比 如大量数据展示、比如手机端响应式布局等,做了很多非常有针对性的改进。最终形成了zui框架。