[HTML CSS JavaScript JQuery Bootstrap 开发] 由浅到深，搭建网站首页，实现轮播图

最新推荐文章于 2024-05-28 19:26:08 发布

SolarL

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量1.6k

点赞数 6

分类专栏： Web前端文章标签： HTML CSS JavaScript JQuery Bootstrap

本文链接：https://blog.csdn.net/SolarL/article/details/89852420

版权

本文旨在通过实际案例加深对前端技术的理解，运用HTML、CSS、JavaScript和Bootstrap逐步构建一个具备轮播图的响应式网站首页。首先分析页面结构，然后使用HTML搭建基础框架，接着利用CSS进行美化，再用JavaScript实现图片轮播功能，最后通过Bootstrap提升用户体验和响应式布局。

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

写在前面

本篇主要是能使前端知识有较好的应用和掌握，学习完零散的知识点后需要应用到实际案例才能有更好的理解和掌握。
应用HTML超文本标记语言 CSS样式 JavaScript脚本语言 Bootstrap框架来一步步搭建网站首页，应用不同的技术实现同一个网页，能更好的理解和区别前端知识。

1. 网站首页

<1> 首页展示

以下画面是我们本篇文章要实现的网站首页，最终效果是通过 Bootstrap 前端框架来实现，以达到最好的用户体验效果。

<2> 搭建网站分析
要想一次性搭建出来像上面这样的画面或许不太容易，但是通过我们细心观察，不难发现，上面的画面可划分为八个部分进行，通过这样的思路，我们就能更好的搭建简单的网站首页。
第一部分: LOGO部分
第二部分: 导航栏部分 : 放置5个超链接
第三部分: 轮播图
第四部分: 嵌套实现
第五部分: 直接放一张图片
第六部分: 抄第四部分的
第七部分: 放置一张图片
第八部分: 放一堆超链接
之后的多种搭建方式均是按照这八部分的分布思路展开，通过不同的方式来实现。

2. 通过 HTML 搭建网站

HTML 超文本标记语言: 用于设计网页,决定了网页的结构。

<1> table 表格标签

常用的属性
bgcolor : 背景色
width : 宽度
height : 高度
align : 对齐方式
border=“1px” 表格框线
tr 行标签 th 表头标签
td 列标签
合并单元格
colspan : 跨列操作
rowspan : 跨行操作
注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉
表格的嵌套
在td中可以嵌套一个表格

<2> 通过 table 表格标签布局分析

创建一个8行1列的表格
第一部分: LOGO部分: 嵌套一个1行3列的表格
第二部分: 导航栏部分 : 放置5个超链接
第三部分: 轮播图（仅通过HTML方式中无法实现轮播，暂时插入一张图片）
第四部分: 嵌套一个3行7列表格
第五部分: 直接放一张图片
第六部分: 同第四部分的
第七部分: 放置一张图片
第八部分: 放一堆超链接

<3>进一步分析第四部分（第六部分）

详细分析
第四部分中，我们可以再次进行划分，将第四部分分为三部分，这一行嵌套一个3行7列的表格。
第一行：
将第一行7列合并成一列，进行列合并 colspan=“7” ，删除第一行剩余的6列，第一行只保留一个 td 标签，插入h 标签，之后紧跟一张图片。
第二行、第三行：
将第二行第2、3、4三列进行合并，列合并 colspan=“3”，删除第二行3个 td 标签，横着放置一张图片；
将第二行和第三行的第一列合并成一列，行合并 rowspan=“2”，删除第三行的第一列 td 标签，左边竖着放置图片一张，其余 td 列标签均放置商品图片及信息即可。

<!--  5.第四部分：嵌套一个3行7列的表格-->
    <tr>
        <td>
            <table width="100%">
                <tr>
                    <td colspan="7" width="100%">
                        <h3>最新商品<img src="..."/></h3>
                    </td>
                </tr>

                <tr align="center">
                    <td rowspan="2">
                        <img src="..." height="100%" width="100%"/>
                    </td>
                    <td colspan="3">
                        <img src="..." height="100%" width="100%"/>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                </tr>

                <tr align="center">

                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                </tr>

            </table>
        </td>
    </tr>

<4> 网页完整代码实现
当然，第一次进行布局的时候，我们可以在每个table 标签中添加 border="1px"属性展示表格的框线，这样可以更好的呈现出整个页面的布局。

<table width="100%" border="1px">
	<tr>
		<td></td>
	</tr>
</table>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页table布局</title>
</head>
<body>

<!-- 1.创建一个8行1列的表格-->
<table width="100%">
    <!--2.第一部分：logo：嵌套一个1行3列表格-->
    <tr>
        <td>
            <table width="100%">
                <tr>
                    <td>
                        <img src="..."/>
                    </td>
                    <td>
                        <img src="..."/>
                    </td>
                    <td>
                        <a href="https://blog.csdn.net/SolarL/article/details/89852420">登录</a>
                        <a href="https://blog.csdn.net/SolarL/article/details/89852420">注册</a>
                        <a href="https://blog.csdn.net/SolarL/article/details/89852420">购物车</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--  3.第二部分：导航页首部放置5个超链接-->
    <tr bgcolor="black">
        <td height="50px">
            <a href="https://blog.csdn.net/SolarL/article/details/89852420"><font color="white">首页</font></a>
            <a href="https://blog.csdn.net/SolarL/article/details/89852420"><font color="white">手机数码</font></a>
            <a href="https://blog.csdn.net/SolarL/article/details/89852420"><font color="white">电脑办公</font></a>
            <a href="https://blog.csdn.net/SolarL/article/details/89852420"><font color="white">美肤美容</font></a>
            <a href="https://blog.csdn.net/SolarL/article/details/89852420"><font color="white">鞋靴皮箱</font></a>
        </td>
    </tr>
    <!--  4.第三部分：轮播图（仅通过HTML方式中无法实现轮播，暂时插入一张图片）-->
    <tr>
        <td>
            <img src="..." width="100%"/>
        </td>
    </tr>
    <!--  5.第四部分：嵌套一个3行7列的表格-->
    <tr>
        <td>
            <table width="100%">
                <tr>
                    <td colspan="7" width="100%">
                        <h3>最新商品<img src="..."/></h3>
                    </td>
                </tr>

                <tr align="center">
                    <td rowspan="2">
                        <img src="..." height="100%" width="100%"/>
                    </td>
                    <td colspan="3">
                        <img src="..." height="100%" width="100%"/>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                </tr>

                <tr align="center">

                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."/>
                        <p>洗衣机</p>
                        <p><font color="red">$998</font></p>
                    </td>
                    <td>
                        <img src="..."

最低0.47元/天解锁文章