从一次次的跌倒中，我们学会了如何更快的站起来。下面就是我每次跌倒后的总结体会，希望你在网站开发过程中有所借鉴。

1. 站在用户的角度考虑问题

作为一名技术人员，往往考虑的专业问题太多，而作为网民，特别是中国的网民，由于整体网民水平比较低，只要满足其基本需求即可。网站不要设计的太复杂，功能不用太多，页面简单明了即可。

2. 网站导航栏设计

首先，导航栏设计一定要突出，让访客一看就知道是导航栏，谁也不愿意花好几分钟的时间在你的页面上找导航链接。

其次，导航栏一定要分类明确，方便访客找到感兴趣的内容，其原则是一步到位。

3. 减少富媒体的使用

所谓的富媒体就是指一些Flash、视频、音乐等，用这些东西一定要控制到恰到好处，尽量减少使用这些富媒体，否则物极必反。

4. 网站上线时间点的选择

网站上线一定要等到所有的页面、功能都开发完毕之后才可以，假使你是访客，你会愿意看到“正在建设”这样的字眼吗？

5. 域名主机

域名的选择还是要本着让人一看域名，就知道这个域名代表什么意思的原则比较好，尽量少用简拼，可以采用缩写的形式。域名注册推荐大家选美国的Godaddy。

主机一定要选择一款稳定的主机，当然速度也相当重要。试想一下，如果你的主机隔三差五的宕机，谁能受到了，世界杯期间twitter的主机就老宕机，让我很生气。

这里给大家推荐一款美国的虚拟主机-Bluehost，任鸟飞网页设计博客就是使用的Bluehost，而且Bluehost是 wordpress 官方推荐主机，值得信赖。

先看一下主流浏览器对 _  *  !important 的支持情况

我们可以利用上面的差异，单独针对IE6编写相应的CSS代码。

符号功能解释：

• _（下划线）：只有只有IE6支持
• *（星号）：只有IE6和IE7支持
• !important：此行定义的属性值不会被后续定义覆盖，拥有最高优先级，IE7以上版本都会支持此属性。

知道_ * !important这三个符号的意义后，就可以编写单独针对IE6的CSS样式代码。

注：在CSS定义中，如果对某一属性有重复定义，则后面定义的属性值会覆盖前面的定义。

实例一 在IE6中使用GIF代替PNG

#logo {
background-image: url(logo.png); /*除IE6和IE7之外，其他浏览器都会使用PNG格式*/
background-repeat: no-repeat;
height: 80px;
width: 290px;
text-indent: -9999px;
}
/*使用 星号 */
* #logo {
background-image: url(logo.gif);  /*在IE6和IE7中，使用GIF图像格式代替PNG*/
}

实例二 兼容IE6的最小高度 min-height 设置方法

.box-min-height {
  min-height:550px;
  height:auto !important;  /*IE6 不支持!important，因此会忽略掉本行*/
  height:550px;
}

示例预览：CSS3 multiple backgrounds | CSS3 多层背景

为了实现上面的效果，我们制作了4张图片，分别代表4个位置（左上 右上 左下 右下）。

CSS 代码

background:
    url(right-top-bg.gif) top right  no-repeat,
    url(left-top-bg.gif) top left  no-repeat,
    url(left-bottom-bg.gif) bottom left  no-repeat,
    url(right-bottom-bg.gif) bottom right  no-repeat;

HTML代码：

<div class="multiple-backgrounds">
<h2>CSS3 Multiple backgrounds <br />多层背景</h2>
</div>

下载 css multiple backgrounds | CSS3 多层背景 源代码

本站页眉部分就是采用有凸凹效果的分界线来分隔导航栏与其他内容。

制作有凸凹效果分界线的方法：

预览：

原理：

1. 上半部分背景颜色相对下半部分稍微浅一点
2. 上半部分的下边框颜色采用深色调（看起来比较暗）
3. 下半部分的上边框颜色采用比下半部分的背景颜色浅一点

本例颜色搭配如下：

原理：利用margin属性，约束局部元素定位。

HTML：

<div id="page">
  <div id="right">
    right
  </div>
 <div id="left">
   Left
 </div>
</div>

CSS:

#page {
	background-color: #FF0000;
	min-height:300px;
}
#page #right {
	width: 300px;
	background-color: #0000FF;
	float: right;
	height: 200px;
}
#page #left {
	background-color: #FFFF00;
	margin-right: 350px;
	height: 200px;
}

代码说明：由于 #right设置float:left;所以需要根据实际情况给#page增加min-height属性，以防止#right的高度超过#page，造成#right溢出。也就是说尽量要保证#page的高度大于#right的高度。

1. 新建rss.php，代码如下：

<?php
//get feedburner count
$whaturl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=hvdesigns";

//Initialize the Curl session
$ch = curl_init();

//Set curl to return the data instead of printing it to the browser.
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

//Set the URL
curl_setopt($ch, CURLOPT_URL, $whaturl);

//Execute the fetch
$data = curl_exec($ch);

//Close the connection
curl_close($ch);
$xml = new SimpleXMLElement($data);
$fb = $xml->feed->entry['circulation'];
//end get feedburner count

2. 在需要显示RSS Feed数的页面需要包含（include）rss.php

<?php include("rss.php"); ?>

3. 显示订阅数的代码

<?php echo $fb;?>

草绘是网页设计过程中的起始阶段，须从整体上定义好与网页设计相关的各个设计元素的属性， 例如网页布局 颜色搭配 字体选择 等 ，下面我们列出一些优秀的草绘案例供欣赏借鉴。

1. Coastal Capital Partners Wireframe Sketch

2. CommLogix Wireframe Sketch

3. Data Techniques Product Wireframe v1

4. Complex designs

5. Colour and stars

6. Early Ember sketches in color

7. sketch: vimeo conversations page ideas (alt)

8. Mega-dropdown explorations

9. Video detail initial sketches

10. Category page layout

11. Sketching

制作圆角效果步骤：

1. 圆角的灵活性。例如可否横向、纵向延伸。
2. 需要哪些HTML元素。
3. 制作圆角图片。
4. 编写CSS代码。

虽然制作圆角的方法有很多，但这里介绍一个我自己想出来的方法 —— 利用一个圆形来制作边框圆角。

这个方法的好处是只需要一个圆形图片，然后对所需要的HTML元素进行样式定义。

我们这里用的圆角图片是一个右侧所示的圆形图片。圆角图片： 。

利用一个圆形来制作边框圆角效果预览：

制作过程：

1. 利用绘图软件绘制一个20×20的带有边框的圆角。
   
2. 合理选用HTML元素，并确定这些元素所在的位置及大小。
   HTML元素示意图
   HTML代码：

   <div class="gray-box">
   <span class="top-left"></span>
   <h4>制作边框圆角</h4>
   <span class="top-right"></span>
   <p>圆角是常用的设计元素之一，但HTML元素都是以方形的形式存在。<br />
     <a href="http://www.renniaofei.com">任鸟飞网页设计</a></p>
   <span class="bottom-left"></span>
   <span class="more"><a href="http://www.renniaofei.com">更多资料</a></span>
   <span class="bottom-right"></span></div>

3. 对上面的HTML元素进行样式定义。CSS代码：

   .gray-box {
   	width: 300px;
   	position: relative;
   	height: 200px;
   }
   .gray-box .top-left {
   	background-image: url(bg.gif);
   	background-repeat: no-repeat;
   	background-position: left top;
   	height: 10px;
   	width: 10px;
   	display: block;
   	position: absolute;
   	left: 0px;
   	top: 0px;
   }
   .gray-box h4 {
   	width: 280px;
   	display: block;
   	position: absolute;
   	left: 10px;
   	top: 0px;
   	border-top: solid 1px #ccc;
   	height: 20px;
   	background-color: #eee;
   	z-index: 999;
   	padding-top: 5px;
   	color: #003366;
   }
   .gray-box .top-right {
   	background-image: url(bg.gif);
   	background-repeat: no-repeat;
   	background-position: right top;
   	height: 10px;
   	width: 10px;
   	display: block;
   	position: absolute;
   	top: 0px;
   	right: 0px;
   }
   .gray-box .bottom-left {
   	background-image: url(bg.gif);
   	background-repeat: no-repeat;
   	background-position: left bottom;
   	height: 10px;
   	width: 10px;
   	display: block;
   	position: absolute;
   	left: 0px;
   	bottom: 0px;
   }
   .gray-box .bottom-right {
   	background-image: url(bg.gif);
   	background-repeat: no-repeat;
   	background-position: right bottom;
   	height: 10px;
   	width: 10px;
   	display: block;
   	position: absolute;
   	right: 0px;
   	bottom: 0px;
   }
   .gray-box .more {
   	width: 280px;
   	position: absolute;
   	right: 10px;
   	bottom: 0px;
   	display: block;
   	background-color: #EEEEEE;
   	border-bottom: solid 1px #ccc;
   	text-align: right;
   	padding-bottom: 8px;
   }
   .gray-box p {
   	position: absolute;
   	top: 10px;
   	background-color: #EEEEEE;
   	border-right: solid 1px #ccc;
   	border-left: solid 1px #ccc;
   	width: 278px;
   	height: 140px;
   	padding: 20px 10px;
   }

 
利用一个圆形来制作边框圆角效果 —— 预览
利用一个圆形来制作边框圆角效果 —— 下载

1. clip 【预览】

类似于遮罩层的感念，只显示出指定位置及大小的矩形框中的内容,通过指定 top right bottom left 四个参数来决定矩形框的位置及大小。

使用Clip属性时须指定Postion属性值为absolute。

CSS代码：

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

2. min-height ﹑min-width ﹑max-height ﹑max-width 【预览】

这些属性指定元素的最小高度（min-height）﹑最小宽度（min-width）﹑最大高度（max-height）﹑最大宽度（max-width），常用来平衡页面布局。

CSS代码

.box-min-height {
  min-height: 550px;
}

IE6不支持这些属性，可以使用下面CSS代码来代替

.box-min-height {
  min-height:550px;
  height:auto !important;
  height:550px;
}

min-height min-width max-height max-width 这些属性指定元素长宽方向的极值。

height width指定元素的长 宽，其值为固定值，所包含的内容只能显示在指定的范围内。

3. White-space 【预览】

遇到空格时的换行方式。

CSS代码

em {
  white-space: nowrap;
}

4. cursor【预览】

鼠标类型

[ crosshair | text | wait | default | help | e-resize | ne-resize | n-resize | nw-resize | w-resize | sw-resize | s-resize | se-resize | auto ]

CSS 代码

CSS代码

.default{
  cursor: default;
}

.wait{
  cursor: wait;
}

.pointer:hover {
  cursor: pointer;
}

5. display inline block【预览】

块（block）元素，例如h div p，在显示的时候会单独占有一个新行，而内嵌（inline）元素，例如span em strong ，则会显示在相同行内。

CSS 代码

.block em {
  display: block;
}

.inline h4, .inline p {
  display: inline;
}

6. position:fixed 【预览】

元素的位置固定不随页面滚动

CSS 代码

.position{
  position: fixed;
  top: 200px;
  right: 0px;
  height: 200px;
  width: 100;
}

7. background-imgage (css sprites) 【预览】

CSS 代码

.css-sprites-50 {
  background-image: url(default-thumbnail.gif);
  background-repeat: no-repeat;
  background-position: 50px 50px;
  height:  200px;
  width:  200px;
  background-color: #eee;
  margin-bottom: 50px;
}
.css-sprites-150 {
  background-image: url(default-thumbnail.gif);
  background-repeat: no-repeat;
  background-position: -50px -50px;
  height: 200px;
  width: 200px;
  background-color: #eee;
}

8. text  indent 【预览】

• 为了美观及方便阅读，段落开头一般都要缩进两个字。
• 网站logo部分定位也可以使用这种方式，将logo部分文字缩进-9999px，只显示logo图片，可参考 No.1 Web Design 。

CSS代码

.text-indent{
  text-indent:50px;
}

9. Border Radius 【预览】

定义边框圆角

CSS 代码

.border-redius{
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

10. z-index 【预览】

元素叠放的层级

CSS 代码

.z-index-1 {
  z-index: 999;
}
.z-index-2 {
  z-index: 1;
}

页面布局过程中需要注意的几个参数：

1. 页面整体宽度
2. 页面边距
3. 列数量
4. 栏目之间的间距

页面布局工具 Grid Designer （ http://grid.mindplay.dk）根据上述4个参数，计算出各个栏目之间的位置。