实战web标准网站开发实录（三）：界面开发过程（上）

john521

浏览: 614358 次
性别:
来自: 深圳

最近访客更多访客>>

svl

Peasant_Worker

lijun1191997

420664555

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Web YUI CSS 招聘框架

，第三篇来的比较晚。本篇主要内容将详细的介绍从一个空白页面开始到一个完整的页面的实现过程。几个关键的point：yui grid布局实现，多种方式的圆角实现，lib的应用，多浏览器兼容的hack，以及一些css的技巧。

所谓无图无真相，首先先看一下我们的目标，如图：

04a139fc-3fd9-3d70-943f-2314cbba5ba4

这是一个最常见的布局了。左右2分栏。可以适用很多情况。由于截图效果有点失真，可能这边的圆角边框看起来比较奇怪，但是不要受此影响。。.现实效果不会变成这样。

本人不是美工，所以或许有些图片让你觉得很眼熟，嗯。。是的，实在不好意思，里面几个图片是我从别的网站上偷来的。这里仅以此来作为技术实现探讨。

OK,LET’S GO！

一个页面的开发步骤其实说起来很简单，框架，内容，修饰，动态效果。
框架

整个页面是一个2分栏的效果，我们项目中引用了yui grid，所以这个页面布局，我们只要1分钟就能做好。

到http://developer.yahoo.com/yui/grids/builder/
中，生成一个页面布局，我们选用的是950的宽度，然后添加2行，第一行是用来放导航的，第二行是来放主要内容的，然后对第二行split content选择2列75/25布局，点一下show code，就可以看到生成的html代码：
查看文本复制到剪贴板打印

   1. <div id="doc2" class="yui-t7">
   2. <div id="hd">
   3. <h1>Header</h1>
   4. </div>
   5. <div id="bd">
   6. <div class="yui-g">
   7.     
   8. <div class="yui-ge">
   9. <div class="yui-u first">
10.     </div>
11. <div class="yui-u">
12.     </div>
13. </div>
14. <div id="ft">
15.
16. Footer</div>
17. </div>
18. </div>
19. </div>

Header
Footer

这样我们的布局代码就完成了，将这个代码拷贝到你的项目中的模板文件夹里。

这个界面的具体样式，可以自己的yui 的build里面体验，只要1分钟。

这里有几个问题是要注意的，

第一：它生成的html代码dtd是html 4.01的，而我们要把它改成xhtml Strick 1.0的。（不仅是为了web标准，也是体现一个设计师的追求。。一个设计师的准则。。）

第二：将link的css地址改成引入自己的css，呃。。这个要记得。。

第三：在页面底部将我们所需要的js引入。

做完这之后，我们的框架就算完成了。

这边已经做好了归类，头部放在hd，内容主题放在bd里，而底部放在ft里。当然我们也看到了采用这样grid框架的不足，就是需要一些无意义的标签，还有一些让人很难理解的class类名，对于那些习惯了wrap，content，navigation的人来说，比较难以接受。但是这是为了布局必须的，只能做这样的牺牲了。
内容

设计阶段，我们随便填充一点内容，以便于我们进行修饰。注意，在这个阶段，我们只关心包含了什么内容，而不关心这个内容它是怎么布局的，修饰，是接下来才做的事情。

内容需要根据我们的目标图来做。首先是hd头部部分。头部的内容包括左边一个图标，右边一个导航。这样，我们写出如下的代码：
查看文本复制到剪贴板打印

   1. <h1> <a href="http://localhost">logo</a></h1>
   2. <ul>
   3. <li><a href="#">首页</a></li>
   4. <li><a href="#">业务介绍</a></li>
   5. <li class="cur-item"><a href="#">庆典策划</a></li>
   6. <li><a href="#">婚礼策划</a></li>
   7. <li><a href="#">案例展示</a></li>
   8. <li><a href="#">婚庆知识</a></li>
   9. <li><a href="#">人才招聘</a></li>
10. <li><a href="#">在线留言</a></li>
11. </ul>

logo

    * 首页
    * 业务介绍
    * 庆典策划
    * 婚礼策划
    * 案例展示
    * 婚庆知识
    * 人才招聘
    * 在线留言

这是头部。
接下来是中间一层的面包屑导航条，以及右侧的搜索框，这一栏要放在头部或者是放在内容部分其实做法看个人习惯。同样的，你只需要写html代码就可以了。具体的代码不再赘述。这一段代码放在第一个的yui-g的div里面。
主题正文部分比较庞大，左侧，也就是在yui-ge 的yui-g first这个div里面，是2个大的内容框，其实2个内部都是div ul li的结构。只是一个是横的，一个是竖的。
填完了基本的结构，我们就有了一个长得有点丑陋的界面：
56fef07f-e42e-3bd8-ae0d-62863cb3a3e1
然后，就是我们的重头戏，怎么把这样的一个如此简陋的页面，变成如开头所示的界面。
修饰

在介绍css修饰的开始之前，我先介绍下我使用的几个最常用的也是必须的css定义，也是我的lib.css里的内容。
查看文本复制到剪贴板打印

   1. .c:after {
   2.     clear: both;
   3.     content: ".";
   4.     display: block;
   5.     height: 0;
   6.     visibility: hidden;
   7. }
   8. .c {
   9.     zoom: 1;
10. }
11. .r {
12.     float: rightright;
13. }
14. .l {
15.     float: left;
16. }

.c:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.c {
    zoom: 1;
}
.r {
    float: right;
}
.l {
    float: left;
}

c即清除浮动，l跟r，即左右浮动。关于c的用法，是现在很流行的一个清除浮动的方法，它可以在不添加额外标记的情况下清除浮动。第一个c:after是针对ff等标准浏览器，而第二个c zoom :1是针对IE。
一切从头开始。我们从头部。头部的基本样式，左右分开，列表横向排列。如果你构造了你的lib.css的话，你可以这样做：
查看文本复制到剪贴板打印

   1. <div id="hd" class="c">
   2. <h1 class="l w3"> <a href="http://localhost">logo</a></h1>
   3. <ul class="r w7">
   4. <li><a href="#">首页</a></li>
   5. <li><a href="#">业务介绍</a></li>
   6. <li class="cur-item"><a href="#">庆典策划</a></li>
   7. <li><a href="#">婚礼策划</a></li>
   8. <li><a href="#">案例展示</a></li>
   9. <li><a href="#">婚庆知识</a></li>
10. <li><a href="#">人才招聘</a></li>
11. <li><a href="#">在线留言</a></li>
12. </ul>
13. </div>

logo

    * 首页
    * 业务介绍
    * 庆典策划
    * 婚礼策划
    * 案例展示
    * 婚庆知识
    * 人才招聘
    * 在线留言

效果如下：
2c19bd93-56eb-337c-9fed-6ebf0f787b63
这是由于ul列还带有margin，导致宽度不够，挤到下面来了。接下来我们将ul列表变成横的，并且应用上样式：
查看文本复制到剪贴板打印

   1. #main_nav {
   2.     margin: 20px 0 0 0;
   3.     background: #FF3399;
   4.     padding-left:10px;
   5. }
   6. #main_nav li {
   7.     font: 120% 幼圆;
   8.     list-style: none;
   9.     float:left;
10. }
11. #main_nav li a {
12.     padding:10px;
13.     color: #FFFFFF;
14.     text-decoration: none;
15.     display:block;
16. }

#main_nav {
margin: 20px 0 0 0;
background: #FF3399;
padding-left:10px;
}
#main_nav li {
font: 120% 幼圆;
list-style: none;
float:left;
}
#main_nav li a {
padding:10px;
color: #FFFFFF;
text-decoration: none;
display:block;
}

这个css样式做了什么？基本上可以看得出来吧。
头部菜单先到这里。接下来往下，是面包屑导航。将搜索框靠右边。这个easy，只要在搜索框所在的div加一个tr的类，即lib.css里面的text-align:right，即可。
现在整站效果：

9640dd10-c049-3129-885f-db3ab1cd1554
看起来有点小模样了。
呃。。由于发文大小有限制，所以其余每个部分要分开发。。请继续关注下一部分内容。。

分享到：