前端学习总结（五）-导航栏练习

本次练习是跟着慕课上的导航视频完成的。https://www.imooc.com/learn/174

首先，看到一个页面，我们要对他进行逻辑上的分类。如果可以做到画出逻辑树的地步，那就大功告成了。但是目前对我来说，只能一点点分开。

先对图片的布局进行分析。

我们可以看出，图片中的部分是一个整体。这个整体下面包含很多分类。因此，整个结构可以通过一个无序列表来实现。

导航的上部分“全部商品分类”是一个title。因此，

        <ul class="topmenu">
            <div class="toptitle">
                全部商品分类
            </div>

在ul的首部定义一个div块，用来显示全部商品分类。

 

将鼠标放在首个分类标签上，会显示出一个相应细分类页面。对这个页面进行分析，我们可以将其分为左右两部分。

            <li>
                <a href="#">图书</a>
                <div class="submenu">
                    <div class="leftdiv">
                    </div>
                    <div class="rightdiv">
                    </div>
                </div>
            </li>

如上述代码所示。

通过上述分析，我们基本完成了html代码的布局。

接下来要进行css即表现的代码。

从图一可以看出，整个导航栏有一个边框。

css的规定可以通过class选择器完成，class选择器的语法是.class。

将整个导航栏类命名为topmenu

在topmenu中对boder进行规定。

    .topmenu{
        display: block;
        width: 220px;
        border: 2px solid #e4393c;
        margin:0;
        padding: 0;
    }

可以按照以下格式对border进行设置

• border-width
• border-style
• border-color
  其中border-style可能的值为：

 接下来对“全部商品分类”这个头部进行设置。

从图片可以看出，

①它的背景颜色和边框颜色相同。通过测量，其宽度为40px。

②文字的颜色为白色。还要规定字体大小。和下面分类的字体比较，我们可以看出，这几个字进行了加粗。font-size设置字体大小，font-wieght设置自己加粗。font-weight的其他属性：normal，bolder，lighter。

③同时，还可以观察到字体靠左的时候留有空隙。设置文字左对齐的同时，设置padding-left。

④ 文字垂直居中显示。 通过设置行高和高度一致，可以让文字垂直居中显示。

为什么可以实现https://blog.csdn.net/zhuanyemanong/article/details/81266172，参照此文（不过我还没看懂）

    .toptitle{
        height: 40px;
        line-height: 40px;
        text-align: left;
        font-size: 11pt;
        font-weight: bold;
        color: white;
        background: #e4393c;
        padding-left: 20px;
    }

观察小分类“图书”，可以看出：

① 字体大小

② 字体垂直居中显示

③ 作为li，没有显示前面的小圆点。通过list-style-type修改。可能值为：https://baijiahao.baidu.com/s?id=1625794069034781447&wfr=spider&for=pc。太多就不罗列了。

④ 文字左边有空隙

⑤文字右边有一个小按钮。通过background显示。

    .topmenu li{
        height: 30px;
        line-height: 30px;
        font-size: 11pt;
        list-style-type: none;
        text-align: left;
        padding-left: 8px;
        z-index: 3;
        background-image: url(arrow.jpg);
        background-repeat: no-repeat;
        background-position: right;
    }

作为链接标签<a>，其自带下划线，我们要通过text-decoration属性消除下划线。

    .topmenu li a{
        text-decoration: none;
        color: #313131;
    }

当将鼠标放到小分类上时，小分类文字会变红并出现下划线，我们可以通过hover来实现：

    .topmenu li a:hover{
        text-decoration: underline;
        font-weight: bold;
        color: #e4393c;
    }

除了通过定义css实现事件以外，我们也可以通过js来对css进行操控：

对设置.lihover

    .topmenu .lihover{        
        border: 1px solid #DDD;
        border-right: 0;
        box-shadow: 0 0 8px #DDD;
        background-image: none;
        height: 60px;
    }
    /* 二级导航显示 */
    .topmenu .lihover .submenu{
        display: block;
    }
    /* 白色小方块 */
    .topmenu .lihover span{
        background: white;
        display: inline-block;
        z-index: 20;
        width: 20px;
        height: 60px;
        float: right;
        position: relative;
    }

在js调用时：

                Lis[i].onmouseover = function (){
                    this.className  = "lihover";}

定义onmouseover，https://www.cnblogs.com/daijing/p/10388008.html js事件的汇总。

js改变css的几种方法：https://blog.csdn.net/weixin_38182209/article/details/81629863

此处采用的是第三种方法。

绑定事件的方法有三种：

1。html行内绑定

在html中添加js代码，不利于后期维护，破坏了行为、结构、样式 相分离的原则。

2。 在<script>中获取dom元素绑定事件on[event]事件

缺点：每个DOM元素只能绑定一个同类事件。例如绑定onclick，当你想在绑定onclick会发现他被覆盖了。

3. 事件监听

https://www.cnblogs.com/lyraLee/p/11840466.html

https://blog.csdn.net/weixin_40122996/article/details/82533223

对submenu中的leftdiv进行样式设定。

通过dl dt dd进行完成。

    .leftdiv dl{
        display: block;
        border-bottom: 1px solid #EEE;
        padding-bottom: 6px;
        overflow: hidden;  /*？*/
    }

先对dl整体进行限制。添加下划线。

对dt头部进行更改。

    .leftdiv dl dt {
        display: block;
        float: left;
        width: 60px;
        text-align: right;
        height: 22px;
        line-height: 22px;
        padding-right: 6px;
    }

对dt内的字体进行更改。

    .leftdiv dl dt a{
        color: #e4393c;
        font-weight: bold;
        text-decoration: underline;
        font-size: 10pt;
    }

通过dd进行更改内部内容。

    .leftdiv dl dd{
        display: block;
         overflow: hidden;   /*这里应用了bfc的相关定义 */
         /* margin: 4px 0; */
    }
    .leftdiv dl dd a {
        display: block;
        float: left;
        border-left: 1px solid #CCC;
        color: #737373;
        font-size: 9pt;
        padding: 0 8px;
        height: 14px;
        line-height: 14px;
        margin: 4px 0;
    }

其中令人难以理解的部分是overflow的作用。https://www.jianshu.com/p/fdcc92914a3e

还有margin和padding使用时候。

https://www.jianshu.com/p/99f3e3c93f08

 

基本上剩下的都是一些重复性的内容了。