前端网页导航条件(程序员进阶之路07-程序员制作简单的360导航)(1)

做全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容:这是html课程的第七课,在这节课程中主要做一个小项目,那就是通过以前我们一起学习的知识点,制作一个360导航页。


上节回顾

在上一节课中->网页前端基础教程06-HTML中body属性和表格详解,收藏,

我们讲解了表格和body的相关属性。今天我们就按照表格制作一个360导航。当然也会用到以前用到的知识点,算是一个小的复习吧。

前端网页导航条件(程序员进阶之路07-程序员制作简单的360导航)(2)


总体布局介绍

我们只做上面的选中部分,在以后的课程中可能会慢慢的增加进去新的内容。从图片中可以看到,包括8行6列。所以我们需要写一个对应行和列的表格。

这样就显示了主要的布局。大体是这个样子,下面进行微调。


单元格之间的距离

在效果中可以很简单的看到,单元格之间的距离太小了,以至于都要挤在一起了,所以我们设置单元格之间的边距。通过设置cellspacing属性就可以啦。

前端网页导航条件(程序员进阶之路07-程序员制作简单的360导航)(3)


部分文字

可以看到部分文字有其他颜色,我们也设置一下:

前端网页导航条件(程序员进阶之路07-程序员制作简单的360导航)(4)

居中显示

可以看到每个单元内是居中显示的。所以应该这样做

前端网页导航条件(程序员进阶之路07-程序员制作简单的360导航)(5)

前端网页导航条件(程序员进阶之路07-程序员制作简单的360导航)(6)

没有学习CSS所以很多东西做不到。目前就做个这样子。算是一部分,在学习完毕之后,我们继续做这个项目。


最终代码

<html>

<head>

<title></title>

</head>

<body>

<table cellspacing="30" width="900">

<tr>

<td align='center'><a href='http://www.so.com'>360搜索•商城</a></td>

<td align='center'>新浪•微博</td>

<td align='center'>天猫•精选</td>

<td align='center'>搜狐•视频</td>

<td align='center'>网易•邮箱</td>

<td align='center'>凤凰•军事</td>

</tr>

<tr>

<td align='center'>360游戏</td>

<td align='center'>爱 淘 宝</td>

<td align='center'>360网上购物</td>

<td align='center'>360苏宁易购</td>

<td align='center'>360安全卫士</td>

<td align='center'>携程旅行</td>

</tr>

<tr>

<td><font color='green'>淘 宝 网</font></td>

<td>国美在线聚 划 算</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

</tr>

<tr>

<td>360搜索•商城</td>

<td><font color="red">360搜索•商城</font></td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

</tr>

<tr>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

</tr>

<tr>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

</tr>

<tr>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

</tr>

<tr>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

<td>360搜索•商城</td>

</tr>

</table>

</body>

</html>

每天一个知识点,带你迈向软件编程大神,一起努力吧。下节课程,一起讲解重要知识点列表。

前端网页导航条件(程序员进阶之路07-程序员制作简单的360导航)(7)

前端网页导航条件(程序员进阶之路07-程序员制作简单的360导航)(8)

,