210、一个html的综合案例

最新推荐文章于 2022-03-02 10:31:46 发布

l0510402015

最新推荐文章于 2022-03-02 10:31:46 发布

阅读量952

点赞数 1

分类专栏： 04_html

本文链接：https://blog.csdn.net/l0510402015/article/details/104369201

版权

本文介绍了一个HTML的综合案例，详细讲解了如何布局一行内的多个图片，通过<tr><td></td></tr>和嵌套表格结构实现。同时分享了提高效率的小技巧，如利用IDE的自动补全功能输入标签，并提到了特殊符号如人民币¥的使用方法。

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

1、如果一行只有一个图片，这直接使用<tr><td></td></tr>

2、如果一行里面有多个图片，则采用<tr><td><table></table></td></tr>嵌套结构

3、将示例进行分行，一行一行去实现

4、小提示：直接输入标签，按alt+/，会有提示，可以直接选择然后确定会自动帮你输入全部格式
5、有些特殊符号，比如人民币 ¥899

<font color="red">¥899</font>，显示结果￥899

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--最外层是个table,用于整个页面布局-->
    <table width="100%" align="center">
    <!--第一行-->
        <tr>
            <td>
                <img src="image/top_banner.jpg" width="100%" alt="旅游介绍">
            </td>
        </tr>
    <!-- 第二行-->
        <tr align="center">
            <td>
                <table width="100%" >
                    <tr>
                        <td>
                            <img src="image/logo.jpg">
                        </td>
                        <td>
                            <img src="image/search.png">
                        </td>
                        <td>
                            <img src="image/hotel_tel.png">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    <!--第三行-->
        <tr align="center" >
<!--            把height="45"放在这里不作用，要放到内部table里面的<td>-->
            <td >
                <