8.6 百度首页编写-导航栏

最新推荐文章于 2023-03-16 22:45:16 发布

dhl879850

最新推荐文章于 2023-03-16 22:45:16 发布

阅读量894

点赞数

本文链接：https://blog.csdn.net/dhl879850/article/details/81463118

版权

看到百度首页，首先对网页内容进行大致的分类，一般网页都可分为导航栏，页面主题，页脚，页面主题有根据其内容继续细分。

大致的分类：

    <body> <!-- 百度导航列表 -->
    <div class="header-box"> <!-- 页面导航栏 -->

         <div class="search"> <!-- 页面内容 -->

        <div class="footer"> <!-- 页面底部 --> 

        </div>

    </body>

碰到的错误:使用floa方法但导航栏不在同一行内：

原因：惯性思维，对ul 和li使用浮动方法，但由于兄弟元素拥有高度，无法并到同一行。

<body> <!-- 百度导航列表 -->
        <div class="header-box"> <!-- 页面头部，导航栏 -->
            <div class="header-news">
                <div>杭州</div>
            </div>
            <div class="header-contain">
                <div>
                    <ul class="header-titles ls">
                        <li>新闻 </li>
                        <li>hao123</li>
                        <li>地图</li>
                        <li>视频 </li>
                    </ul>
                </div>
            </div>  
        </div>

更正：互换左右标题栏的先后顺序。

<body> <!-- 百度导航列表 -->
        <div class="header-box"> <!-- 页面头部，导航栏 -->
            <div class="header-contain">
                <div>
                    <ul class="header-titles ls">
                        <li>新闻 </li>
                        <li>hao123</li>
                        <li>地图</li>
                        <li>视频 </li>
                    </ul>
                </div>
            </div>
            <div class="header-news">
                <div>杭州</div>
            </div>
        </div>