【HTML入门】第二十三课 - 【实战】做一个简单的图书详情页

最新推荐文章于 2024-08-23 13:49:12 发布

经海路大白狗

最新推荐文章于 2024-08-23 13:49:12 发布

阅读量499

点赞数 11

分类专栏： WEB前端小白从这里出发文章标签： html 前端学习

本文链接：https://blog.csdn.net/xingyu_qie/article/details/140955339

版权

WEB前端小白从这里出发专栏收录该内容

33 篇文章 11 订阅

订阅专栏

这一节，我们继续用纯HTML来做一个实战小案例。

我找了一个图书详情的页面，就像这样：

这一小节，我们用纯HTML标签，来实现一下这个图书详情的内容。

1 布局分析

2 用到的标签

3 实战代码

1 布局分析

我们看这张设计图，

这是一个左右结构；
左侧是一张图书的封面图；
右侧是一个整体结构，然后又分上下结构排列；
图书名称、作者介绍、图书简介；
再下面是价格，折扣，以及原价；

脑子里一定要有一个心理构思，大概的布局，就像这样：

2 用到的标签

下面我们分析一下会使用到的标签：

左右结构，目前想到的是横向排列的行内元素，但不太合适，在不使用CSS的时候，我们可以考虑 table 布局，这可以做成一行两列的；
右侧呢，分上下布局，第一行的标题，我们可以使用 h2 标签，标题嘛，很合适；
下面2行可以使用段落，也就是 P 标签；
第四行，我们看设计图，有一个横线，可以想到 hr 标签，对吧；
第五行，是几个横向排列的，可以想到 span
第五行最后有个删除字，想到 del 标签。

3 实战代码

下面，我们来真是写一下代码，一定要自己练着写，代码是练出来的，不是看出来的，一定记住。多写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <img src="./files/imgs/book.png" />
                </td>
                <td width="500">
                    <h2>动手学深度学习（PyTorch版）</h2>
                    <p>阿斯顿·张（Aston Zhang）[美]扎卡里·C. 立顿（Zachary C. Lipton） 李沐（Mu Li） [德]亚历山大·J. 斯莫拉（Alexander J. Smola）</p>
                    <p>《动手学深度学习》全新PyTorch版本，李沐和亚马逊科学家阿斯顿·张等大咖作者强强联合之作，机器学习、深度学习领域重磅教程，交互式实战环境，配套资源丰富！</p>
                    <hr/>
                    <div>
                        <span>￥</span>
                        <span>87.84</span>
                        <span>[8.0折]</span>
                        <span><del>[定价:109.8元]</del></span>
                    </div>
                </td>
            </tr>
        </table>
    </body>

</html>