HTML基础——网站首页显示页面

最新推荐文章于 2024-06-13 10:05:56 发布

anjiukonghe77852

最新推荐文章于 2024-06-13 10:05:56 发布

阅读量966

点赞数 2

原文链接：http://www.cnblogs.com/cxq1126/p/7373019.html

版权

这篇博客介绍了如何使用HTML创建一个基本的网站首页。内容包括表格标签的使用，如border、align、bgcolor等属性，以及表格的跨行跨列操作。详细步骤涵盖了创建七列表格，构造导航栏、广告位和友情链接部分，通过嵌套表格和超链接实现各种布局。通过运行代码，可以在浏览器中查看完整的首页效果。

摘要由CSDN通过智能技术生成

1、表格标签： border设置边框，align设置位置(居中等)，bgcolor设置背景颜色，cellspacing设置边框之间的空隙，cellpadding设置边框与里面内容的间距。

　　table表，tr行，td单元格

　　　　<table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing="">
　　　　　　<tr>
　　　　　　　　<td></td>
　　　　　　　　<td></td>
　　　　　　　　<td></td>
　　　　　　</tr>
　　　　</table>
　<tr></tr>里面也能设置相应属性，且比<table></table>优先级高。
2、跨行跨列操作（针对单元格，写在td里面）
　　跨行：rowspan
　　跨列：colspan

3、下面实现网站首页显示页面（事先准备若干照片）

首先分析步骤：

1）创建一个七一列的表格
2）实现第一行（嵌套一个一行三列的表格，然后分别对单元格的内容进行填充）

3）实现第二行（暂时使用字体标签结合超链接完成导航栏，需要设置当前单元格的背景颜色为黑色）

4）实现第三行（直接放置一张广告图片）

5）实现第四行（嵌套一个三行七列的表格）

6）实现第五行（放置一张广告图片）

7）实现第六行（放置一张广告图片）

8）实现第七行（使用字体标签和超链接完成友情链接和版权信息）

然后写代码：

注意代码中<a href="#" ></a>表示页面不发生跳转。

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>商城首页</title>
  6     </head>
  7     <body>
  8         <!--1.创建一个八行一列的表格-->
  9         <table border="1px" width="1300px" align="center" cellpadding="0px" cellspacing="0px">
 10             <!--2.logo部分-->
 11             <tr>
 12                 <td>
 13                     <!--嵌套一个一行三列的表格-->
 14                     <table border="1px" width="100%">
 15                         <tr height="50px">
 16                             <td width="33.3%">
 17                                 <img src="../img/logo2.png" height="47px" />
 18                             </td>
 19                             <td width="33.3%">
 20                                 <img src="../img/header.png" height="47px"/>
 21                             </td>
 22                             <td width="33.3%">
 23                                 <a href="#">登录</a>
 24                                 <a href="#">注册</a>
 25                                 <a href="#">购物车</a>
 26                             </td>
 27                         </tr>
 28                     </table>
 29                 </td>
 30             </tr>
 31             
 32             <!--3.导航栏-->
 33             <tr height="50px" >
 34                 <td bgcolor="black">
 35                     <a href="#"><font size="3" color

最低0.47元/天解锁文章

anjiukonghe77852

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML基础——网站首页显示页面

1、表格标签： border设置边框，align设置位置(居中等)，bgcolor设置背景颜色，cellspacing设置边框之间的空隙，cellpadding设置边框与里面内容的间距。　　table表，tr行，td单元格　　　　<table border="" width="" height="" align="" bgcolor="" cellpadding="" c...
复制链接

扫一扫