Sep

5

我喜欢的分页效果

文章分类：css, misc | 只有1条评论  查看次数：414 + 75

效果查看：http://www.live-my-life-with-yuyi.com/lab/standard/pagination_style.html

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Pagination Style Template</title>
<style type="text/">
<!--

#tnt_pagination {
    display:block;
    text-align:left;
    height:22px;
    clear:both;
    padding-top:3px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
}

#tnt_pagination a:link, #tnt_pagination a:visited{
    padding:7px;
    padding-top:2px;
    padding-bottom:2px;
    border:1px solid #EBEBEB;
    margin-left:5px;
    text-decoration:none;
    background-color:#F5F5F5;
    color:#0072bc;
    width:22px;
    font-weight:normal;
}

#tnt_pagination a:hover {
    background-color:#DDEEFF;
    border:1px solid #BBDDFF;
    color:#0072BC; 
}

#tnt_pagination .active_tnt_link {
    padding:7px;
    padding-top:2px;
    padding-bottom:2px;
    border:1px solid #BBDDFF;
    margin-left:5px;
    text-decoration:none;
    background-color:#DDEEFF;
    color:#0072BC;
    cursor:default;
}

#tnt_pagination .disabled_tnt_pagination {
    padding:7px;
    padding-top:2px;
    padding-bottom:2px;
    border:1px solid #EBEBEB;
    margin-left:10px;
    text-decoration:none;
    background-color:#F5F5F5;
    color:#D7D7D7;
    cursor:default;
}
-->
</style>

</head>

<body>

<div id="tnt_pagination">
<span class="disabled_tnt_pagination">前10页</span><a href="#1">1</a><a href="#2">2</a><a href="#3">3</a><span class="active_tnt_link">4</span><a href="#5">5</a><a href="#6">6</a><a href="#7">7</a><a href="#8">8</a><a href="#9">9</a><a href="#10">10</a><a href="#forwaed">后10页</a></div>

</body>
</html>
 

这个是我认为比较容易使用，同时编程方面也挺容易实现的分页，就是以10页为基础，然后上十页和下十页，因为很少有人有兴趣会去看10页甚至20页以后的内容。不太喜欢那种带省略号的，看着就有点别扭。

Aug

7

一款不错的css framework

文章分类：css, misc | 共3 条评论  查看次数：774 + 180

原文地址：http://www.contentwithstyle.co.uk/Articles/17/

现在到处都是，连也不例外，网上各类 也不少，但相比之下还是这款比较和我心意。

特点：

  • 将各个功能块分为不同的，要使用哪个模块只需载入相应的即可
  • 提供了多种页面布局
  • 兼容各类浏览器
  • 符合常规的布局思路

演示地址：http://tinyurl.com/25l7cn

Read more

Jun

10

[译]通过CSS居中图片

文章分类：css | 发表评论  查看次数：366 + 88

原文地址：click here

这里有一个办法可以解决图片的垂直居中同时水平居中，前提是知道容器的高度，兼容FF,IE6,IE7

HTML：

<div class="container">
    <img src="pearbook.png" />
</div>
 

对于一般的浏览器

.container {
    height: 200px;
    width: 300px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 1px solid red;
}
.contain img {
    vertical-align: middle;
}
 

对IE另作处理

<!–[if IE]>
<style type="text/">
    .container {
        font-size: 181px;
    }
</style>
<![endif]–>
 

这段代码对于不是IE的浏览器不会起作用。
或许你会问，181px是怎么来的，这是DIV的高度乘以0.905得到的。听起来是不是有些不可思议，但确实很有效。

测试页面：click here

Jun

5

[译]css form design

文章分类：css, misc | 共5 条评论  查看次数：2,289 + 241

原文地址：click here

PS：原文实在是太长太长了，无奈精力有限，只能把核心给翻译了一下

使用 Label
forms_connection.png
Label能够建立元素与文字说明的桥梁

<label for="firstName">First name</label>
<input id="firstName" name="firstName" type="text" />
 

这样点击First name文字后，就能自动激活input

Label可以用在以下一些内容

  • checkboxes
  • radio buttons
  • textareas
  • text fields
  • select boxes

submit 按钮 和submit 图象 不需要使用Label，因为它们有自己的value和alt

排序相关元素

使用fieldset可以聚合一系列相关的类别，然后通过legend加以说明

< action="example.php">
<fieldset>
<legend>Postal Address</legend>  
<label for="street">Street address</label>
<input id="street" name="street" type="text" />
<label for=" suburb">Suburb</label>
<input id="suburb" name="suburb" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="postcode">Postcode</label>
<input id="postcode" name="postcode" type="text" />
</fieldset>
</>
 

没用修饰的fieldset和legend
forms_unstyled-fields.png

Read more