百度360必应搜狗淘宝本站头条
网站建设一键优化网页制作教程百度搜索推广苏州网站建设
当前位置：网站首页 > SEO教程 > 正文

网页前端基础教程07-利用表格制作360导航页，项目教学

gaoyangw 2024-11-04 12:59 24 浏览 0 评论

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

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

上节回顾

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

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

总体布局介绍

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

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

单元格之间的距离

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

部分文字

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

居中显示

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

没有学习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>

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

相关推荐

Chrome43正式版发布 新增海量应用扩展

2015-07-0809:26:10作者：刘菲菲谷歌Chrome浏览器一向被大家称为“版本帝”，原因就是更新频率相当高。最近，Chrome又发布了新版，版本号为v43.0.2357.132。本次更...

软网推荐:快速下载需要的谷歌浏览器扩展

谷歌浏览器现在已经不是一个单纯的网页浏览器，而更加像是一个管理操作平台，因为它的很多功能都是通过功能扩展来实现的。但是通常我们要想访问谷歌的扩展商店非常的麻烦，所以就需要寻求其他的解决方法。第三方扩展...

谷歌预告3项Chrome浏览器改进，提高管理标签页效率

IT之家9月11日消息，谷歌公司昨日（9月10日）发布新闻稿，宣布为iOS和安卓版Chrome浏览器引入3项改进，从而帮助用户提高管理标签页效率。1.在iOS上体验标签页...

谷歌发布Chrome浏览器更新，修复密码消失问题:持续18个小时

IT之家7月27日消息，谷歌发布Chrome浏览器更新，修复了存在于密码管理器中的错误，该错误导致Chrome用户密码消失18个小时。Chrome用户反馈更新到版本127.0....

谷歌浏览器Chrome 38.0.2125.101稳定版下载

IT之家（www.ithome.com）：谷歌浏览器Chrome38.0.2125.101稳定版下载今天，谷歌浏览器团队带来最新版Chrome稳定版更新。具体版本号为38.0.2125.101，该版...

谷歌浏览器8年后首换新LOGO，变了又好像没变

近日，ChromeCanary版浏览器（开发者专用的每日构建版）在新版中首次更新了浏览器图标，意味着这个新的图标很快将开始出现在各位用户的设备上了。...

谷歌浏览器，居然被山寨了（谷歌浏览器可靠吗）

大家看看下面两张Logo，光看图标你能分辨出来哪个是假的Chrome，哪个是真的吗？...

谷歌浏览器Chrome 45.0.2454.93稳定版下载

IT之家讯谷歌Chrome浏览器更新至45.0.2454.93稳定版。谷歌官方并没有给出更新日志，因此本次更新重点在于小范围问题修复。Chrome浏览器用户可下载并且更新至该版本。Chrome45...

微软推出的新版Edge浏览器，让我抛弃用了5年的谷歌

随着新版Edge浏览器的发布，这个微软的亲儿子以崭新的面貌和大家见面啦。这次更新可谓是好评如潮，相比浏览器届的老大哥——谷歌浏览器，它少了些臃肿，但又多了一些独特的功能。今天，我就为大家介绍8...

谷歌Chrome浏览器安卓版将支持Material You设计版地址栏

IT之家1月26日消息，Google的MaterialYou主题在Android上提供了一致的配色方案。谷歌现在正在为Android上的谷歌Chrome浏览器的地址栏提供...

你想要的功能，Edge浏览器都有（你想要的功能,edge浏览器都有哪些）

2020年之前，如果有求推荐一款好用的浏览器，那谷歌Chrome浏览器一定是最好的选择，现在却不一定了。今年一月份，微软正式推出了基于谷歌Chromium内核的MicrosoftEdge浏览器，它继...

谷歌浏览器Chrome更新:图标再变动，版号来到100

经过十多年的更新，谷歌浏览器GoogleChrome终于迎来了“100”的版本号，并在近日于Windows、Mac、iOS和安卓等多个平台正式上线。尽管是很有象征性意义的版本号更新，但它这一...

不再桌面端独占，谷歌Chrome浏览器安卓版将迎来任务管理器

IT之家10月4日消息，谷歌Chrome浏览器即将为Android用户带来一项备受期待的功能——任务管理器。虽然Chrome浏览器在桌面端已经具备了任务管理器的功能，但移动端一...

安卓版谷歌Chrome浏览器测试新面板，方便用户管理跨设备标签页

IT之家8月30日消息，科技媒体mspoweruser昨日（8月29日）发布博文，报道称Canary频道最新安卓版谷歌Chrome浏览器正测试新特性，为跨设备标签页添加了一个...

谷歌浏览器，网站页面禁用右键功能，如何解决?

进入浏览器开发者工具点击谷歌浏览器右上角三个点，选择【更多工具】——【开发者工具】找到“代码段”【源代码/来源】——【>>】——【代码段】...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表