初学Web开发----尽可能的模仿BAIDU的搜索页面（只用HTML书写）

最新推荐文章于 2024-05-25 19:27:14 发布

m0_74299308

最新推荐文章于 2024-05-25 19:27:14 发布

阅读量427

点赞数

分类专栏： web开发文章标签：前端 html

本文链接：https://blog.csdn.net/m0_74299308/article/details/132792101

版权

web开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

实验代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，你就知道</title>
</head>
<body>
    <table border="0" width="100%">
        <tr>
            <td><a href="https://news.baidu.com/">新闻</a></td>
            <td><a href="https://www.hao123.com/?src=from_pc">hao123</a></td>
            <td><a href="https://map.baidu.com/@11868550,3422849,13z">地图</a></td>
            <td><a href="https://tieba.baidu.com/index.html">贴吧</a></td>
            <td><a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a></td>
            <td> <a href="https://image.baidu.com/">图片</a></td>
            <td><a href="https://pan.baidu.com/?from=1026962h">网盘</a></td>
            <td width="1000"><a href="https://www.baidu.com/more/">更多</a></td>
            <td>AI</td>
            <td>设置</td>
            <td>
                <form action="https://www.baidu.com">
                    <input type="button" value="登录">
                </form>
            </td>
        </tr>
    </table>

    <table border="0" width="100%">
        <tr>
            <td width="600"></td>
            <td>
                <div>
                    <div class="center">
                        <img src="baidu.jpg" alt="baidu">
                    </div>
                    <div class="box search">
                        <form action="https://www.baidu.com">
                            <input type="text" name="wd" id="key" size="50"><input type="button" value="百度一下">
                        </form>
                </div>
                <div class="box hotkey">
                    <div class="title">
                        <a href="#" class="baidu-hot-search" size="5">百度热搜 ></a>
                        <a>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</a>
                        <a>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</a>
                        <a href="#"> 换一换 </a>
                    </div>
                    <table border="0">
                        <tr>
                          <td>⬆"必须自觉拜人民为师"</td>
                          <td>3.火炬传递看“浙”里</td>
                          
                        </tr>
                        <tr>
                            <td>1.香港极端情况至少维持至今晚12时</td>
                            <td>4.深圳一商贩激流中淡定卖炒饭</td>
                        </tr>
                        <tr>
                            <td>2.1207名缅北涉电诈嫌疑人移交中方</td>
                            <td>5.加媒:加军舰遭解放军“激光照射”</td>
                          </tr>
                    </table>
                </div>
            </td>
            <td width="300"></td>
        </tr> 
    </table>   
</body>
</html>

实验效果

在这里插入图片描述

实验总结

1）实验思路：最初的思路将百度页面划分为3部分，蓝色区域为页面内容（如图1），搭好框架后填充内容，把基本内容写完后调整位置，发现1，3区域处的内容始终不能置顶只能在中间（如图2），通过网上查找答案也没得到解决，遂决定换个框架。

在这里插入图片描述

新的思路是将百度页面划分为2个部分，蓝色区域为页面内容（如图3），搭好框架后填充内容，上下做两个表格，3的内容居中，把基本内容写完后调整位置，此时1.2区域内容置顶（如图4）。

在这里插入图片描述

2）未解决问题：如何将热搜内容的位置也居中而不是和搜素框对齐？中间这部分怎样调整看起来更还原？

在这里插入图片描述

3）收获:div是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。我们可以使用 form标签来创建表单。
链接的语法是a href="url"是链接文本。