【HTML入门】第十八课 - 【实战】做一个百度顶部导航条

经海路大白狗

于 2024-07-23 16:50:02 发布

阅读量237

点赞数 9

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

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

版权

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

22 篇文章 2 订阅

订阅专栏

我们利用一些章节做了HTML入门的标签学习，其实HTML标签呢，就是一个一个标签，他们都有独自的含义。记住这句话，他们有独自的含义。

他们就像水浒传里的英雄们一样，各自有各自的本领，又像复仇者联盟里的英雄们一样，他们各自有自己的章节。但不得不说，只有运用到实战中，只有把他们组合起来，才能发挥更大的作用。要不然，就只能是零件一样的东西，只有通过实战组合起来，他们才能发挥作用。

这一小节，我们开始运用HTML标签的组合，加深练习，加深对标签们的印象，做一些小例子。不过不得不说啊，光使用HTML标签的时候，页面会很丑，我们就是练习一下子，熟练各种标签的使用。后面我们学习了CSS，再结合起来，网页就会漂亮很多啦。

1 目标样子

2 实战分析

3 实战源码

1 目标样子

这一小节呢，我们希望参照百度顶部的导航条，做出一个大概的样子来，不用CSS样式，只用HTML标签组合来做。目的就是把HTML标签用熟练。大概是这样子：

2 实战分析

我们现在只是做一些最简单的，最基础的开发实战，但是还是要学会分析需求，以后做的项目大了，更得好好分析如何去做，才能让后面的开发少走弯路。

1 这是一个左右结构，我们可以使用table，分开这些内容；

2 左边几乎全是链接；我们之前学了a标签；

3 链接点击后，是新开了一个页面，这用到了我们之前学习target;

4 右边的设置，不是链接，是一个可点按钮，但是呢，他不是按钮的样式；

5 最右边，是一个按钮，具有按钮样式，是“登录”。

3 实战源码

结合上面的分析呢，我们可以写一些纯HTML标签，组合起来，代码如下：。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <table width="800" border="0">
            <tr>
                <td width="500">
                    <a href="https://news.baidu.com/" target="_blank">新闻</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://www.hao123.com/?src=from_pc" target="_blank">hao123</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://map.baidu.com/" target="_blank">地图</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://tieba.baidu.com/" target="_blank">贴吧</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="https://image.baidu.com/" target="_blank">图片</a>
                </td>
                <td width="300" align="right">
                    <span>设置</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button>设置</button>
                </td>
            </tr>
        </table>
    </body>

</html>

看着是不是不太好看，但样子出来了，如果纯写HTML标签来完成，就是这个样子的，后面学了CSS就好多了。

文章底部有VX，光看文章如果觉得生硬，可以加狗哥好友，对吧，拿着葵花宝典练半天，哪有和作者做朋友学的快呢。

经海路大白狗

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
4
评论
【HTML入门】第十八课 - 【实战】做一个百度顶部导航条

我们利用一些章节做了HTML入门的标签学习，其实HTML标签呢，就是一个一个标签，他们都有独自的含义。记住这句话，他们有独自的含义。他们就像水浒传里的英雄们一样，各自有各自的本领，又像复仇者联盟里的英雄们一样，他们各自有自己的章节。但不得不说，只有运用到实战中，只有把他们组合起来，才能发挥更大的作用。要不然，就只能是零件一样的东西，只有通过实战组合起来，他们才能发挥作用。这一小节，我们开始运用HTML标签的组合，，加深对标签们的印象，做一些小例子。
复制链接

扫一扫