手头项目比较紧,第三篇来的比较晚。本篇主要内容将详细的介绍从一个空白页面开始到一个完整的页面的实现过程。几个关键的point:yui grid布局实现,多种方式的圆角实现,lib的应用,多浏览器兼容的hack,以及一些css的技巧。
所谓无图无真相,首先先看一下我们的目标,如图:
这是一个最常见的布局了。左右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代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Base Page</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="doc2" class="yui-t7">
<div id="hd"><h1>Header</h1></div>
<div id="bd">
<div class="yui-g">
<!-- YOUR DATA GOES HERE -->
</div>
<div class="yui-ge">
<div class="yui-u first">
<!-- YOUR DATA GOES HERE -->
</div>
<div class="yui-u">
<!-- YOUR DATA GOES HERE -->
</div>
</div>
</div>
<div id="ft"><p>Footer</p></div>
</div>
</body>
</html>
这样我们的布局代码就完成了,将这个代码拷贝到你的项目中的模板文件夹里。
这个界面的具体样式,可以自己的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头部部分。头部的内容包括左边一个图标,右边一个导航。这样,我们写出如下的代码:
<h1> <a href="http://localhost">logo</a> </h1>
<ul>
<li><a href='#'>首页</a></li>
<li><a href='#'>业务介绍</a></li>
<li class='cur-item'><a href='#'>庆典策划</a> </li>
<li><a href='#'>婚礼策划</a></li>
<li><a href='#'>案例展示</a></li>
<li><a href='#'>婚庆知识</a></li>
<li><a href='#'>人才招聘</a></li>
<li><a href='#'>在线留言</a></li>
</ul>
</div>
这是头部。
接下来是中间一层的面包屑导航条,以及右侧的搜索框,这一栏要放在头部或者是放在内容部分其实做法看个人习惯。同样的,你只需要写html代码就可以了。具体的代码不再赘述。这一段代码放在第一个的yui-g的div里面。
主题正文部分比较庞大,左侧,也就是在yui-ge 的yui-g first这个div里面,是2个大的内容框,其实2个内部都是div ul li的结构。只是一个是横的,一个是竖的。
填完了基本的结构,我们就有了一个长得有点丑陋的界面:
然后,就是我们的重头戏,怎么把这样的一个如此简陋的页面,变成如开头所示的界面。
修饰
在介绍css修饰的开始之前,我先介绍下我使用的几个最常用的也是必须的css定义,也是我的lib.css里的内容。
.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的话,你可以这样做:
<div class="c" id="hd">
<h1 class="l w3"> <a href="http://localhost">logo</a> </h1>
<ul class="r w7">
<li><a href='#'>首页</a></li>
<li><a href='#'>业务介绍</a></li>
<li class='cur-item'><a href='#'>庆典策划</a> </li>
<li><a href='#'>婚礼策划</a></li>
<li><a href='#'>案例展示</a></li>
<li><a href='#'>婚庆知识</a></li>
<li><a href='#'>人才招聘</a></li>
<li><a href='#'>在线留言</a></li>
</ul>
</div>
效果如下:
这是由于ul列还带有margin,导致宽度不够,挤到下面来了。接下来我们将ul列表变成横的,并且应用上样式:
#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,即可。
现在整站效果:
看起来有点小模样了。
呃。。由于发文大小有限制,所以其余每个部分要分开发。。请继续关注下一部分内容。。
- 大小: 60.9 KB
- 大小: 5.9 KB
- 大小: 9.8 KB
- 大小: 50.5 KB
- 大小: 43.2 KB
分享到:
相关推荐
韩啸、王瑞敬、刘健南编著的《ASP.NET Web开发学习实录(附光盘)》重点围绕Web开发,结合精选教学视频,全程推演ASENET 3.5应用开发的整个过程,引导读者深刻理解和掌握以ASP.NET从事Web应用开发所需要的基本知识和...
《Web服务开发学习实录》一书的配书光盘,内容包括了书中所使用的源项目文件以及一套对应的视频教学讲座。不过视频过大没有上传,读者想要可以回复邮箱。
Ruby on Rails Web开发学习实录 内容简介: 在目前的主流web开发技术中,基于ruby语言的rails框架是做网站开发速度最快的工具。它可以达到j2ee框架开发速度的5~10倍,并且代码量也非常少。另外由于代码量的大幅度...
jsp web开发学习实录
这是Web服务开发学习实录 Pdf 书,希望能帮助大家
Struts 2 Web开发学习实录
Web服务开发学习实录(闫建强,王瑞敬编著)随书源代码
MVC Web开发学习实录
《PHP Web开发学习实录》
PYTHON WEB开发学习实录.pdf PYTHON WEB开发学习实录.pdf
Python Web开发学习实录对应源代码
《Python Web开发学习实录》完整版 高清扫描 PDF电子书
ASP.NET Web开发学习实录_源码
《CSS网站布局实录-基于Web标准的网站设计指南(第2版)-》┊李超[.PDF]
《Web服务开发学习实录》.pdf,闰建强王瑞敬编著,共470页,有目录标签,仅包含文档,不包括光盘内容及源代码。
为了使广大读者既能了解Python语言的基础知识,又能将Python语言应用于特定领域(如Web开发),本书全面地介绍了用Python语言进行程序开发的相关知识。学习完本书之后,相信读者能够掌握Python语言,并且可以使用...
《ASP.NET Web 开发学习实录》电子图书
JavaWeb项目开发全程实录源码 ,10个完整开发项目(第一章:ITCLUB博客、第二章:甜橙音乐网……第十章:天下淘商城)
MVC+Web开发学习实录 14章 blog 源码 仅14章blog的代码