该教程转自 番茄's Blog 仅够学习之用
四、页面制作(1)----用好border和clear
由于找工作找房子的原因，隔了这么久才能开始写教程，心里感觉很对不起一直在关注本站的朋友，今天是找到房子的第二天，于是赶快继续写教程。
这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。
首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在
大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。
四、页面制作(1)----用好border和clear
由于找工作找房子的原因，隔了这么久才能开始写教程，心里感觉很对不起一直在关注本站的朋友，今天是找到房子的第二天，于是赶快继续写教程。
这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。
首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在
<divstyle="border-bottom:1px dashed #ccc"></div>
大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。
Time 2007-4-16 | Posted in 网页技术 | 0 Comments | 1595 Hits
该教程转自 番茄's Blog 仅够学习之用
三、页面顶部制作(2)----使用列表<li>制作菜单
开始此节的学习前，请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。
这一节我将告诉大家如何用列表<li>来制作菜单。
程序代码
三、页面顶部制作(2)----使用列表<li>制作菜单
开始此节的学习前，请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。
这一节我将告诉大家如何用列表<li>来制作菜单。
程序代码
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>
Time 2007-4-16 | Posted in 网页技术 | 0 Comments | 1746 Hits
该教程转自 番茄's Blog 仅够学习之用
三、页面顶部制作(1)
当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。
在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码：
程序代码
三、页面顶部制作(1)
当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。
在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码：
程序代码
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}
/*页面层容器*/
#container {width:800px;margin:10px auto}
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}
/*页面层容器*/
#container {width:800px;margin:10px auto}
Time 2007-4-16 | Posted in 网页技术 | 0 Comments | 1421 Hits
该教程转自 番茄's Blog 仅够学习之用
二、写入整体层结构与CSS
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
程序代码
二、写入整体层结构与CSS
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
程序代码
<!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=gb2312" />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Time 2007-4-16 | Posted in 网页技术 | 0 Comments | 1430 Hits
该教程转自 番茄's Blog 仅够学习之用
一、页面布局与规划
好久没有认真写点东西了，想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题，其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧...
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
一、页面布局与规划
好久没有认真写点东西了，想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题，其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧...
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
Time 2007-4-16 | Posted in 网页技术 | 0 Comments | 1443 Hits
