【css笔记】电商平台静态页面导航栏制作

最新推荐文章于 2024-08-08 08:29:05 发布

咖喱盖饭真的香

最新推荐文章于 2024-08-08 08:29:05 发布

阅读量848

点赞数

本文链接：https://blog.csdn.net/weixin_48391379/article/details/114887728

版权

本文记录了在学习CSS过程中制作电商平台导航栏的过程。内容包括确定nav布局，编写HTML结构，设置CSS样式，以及在制作中应注意的几点细节，如不设li宽度，下拉菜单的空隙处理，箭头图标和文字颜色变化等。

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

在跟着视频学css的时候，发现自己制作电商平台的静态网页也还是不熟练，因此在看过视频后对网页的导航栏进行重写并作此笔记，如有错误，还请指正。

1.确定导航栏nav的布局

整个nav的内容部分是包含在版心里的，内容分为左右两部分，左边是nav_hd，右边是nav_bd，而左边的nav_hd还包括一个下拉列表，因此可以再分为头部dt和下拉列表dd。

    <div class="nav">
        <div class="w">
            <div class="nav_hd fl">
                <div class="dt"></div>
                <div class="dd"></div>
            </div>
            <div class="nav_bd fl"></div>
        </div>
    </div>

2.完整html

    <div class="nav">
        <div class="w">
            <div class="nav_hd fl">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li class="dd_item"><a href="#">家用电器</a><i></i></li>
                        <li class="dd_item"><a href="#">手机、数码、通信</a><i></i></li>
                        <li class="dd_item">