前端面试实操题一：导弹头导航

        这篇博客主要是记录听到的一道前端面试实操题，用简单的html和css实现一个导弹头导航。

        效果图如下图所示：

        我用的是css里面的伪元素选择器来实现这个导航的前后两个异形。

        首先讲解一下伪元素是什么？？

        我的理解是它其实一个元素，但他不写在html的body，而是写在css里面，在查看网页源代码时也只会找到::before或者::after这样的一行，所以它是假的元素，所以叫伪元素。

        比较官方的讲解： 伪元素是一个附加在选择器末尾的关键词，通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。

        然后这次做的导弹头导航主要用的就是::after和::before这两个伪元素。

        首先用div写一个正方形的盒子：（不对，首先请用我说的快捷键创建一个html的结构骨架~）

<div class="nav">导弹头导航</div>

        用css对它进行一些设计，规定一下他的宽高，以及一些文本属性和背景属性；

        最后一行需要注意，用到了一个相对定位，不过没有设置偏移量，所以这个盒子不产生定位效果。

.nav{

            background-color: skyblue;

            width: 120px;

            height: 30px;

            line-height: 30px;

            margin-left: 100px;

            text-align: center;

            position: relative;

        }

        这样子出现的效果图如下：

         然后通过使用伪元素选择器，增加收尾的的异形。先看左侧的两个小尖尖怎么出来的。

         这种尖尖，其实可以看成四个三角形合在一起，然后让左边的三角形变成白色或者透明色，就可以变成效果图那样。

         如果使用html和css，一般是设置一个宽高为0的盒子，然后给盒子加边框，就可以实现四个三角形合成的正方形。下图就是宽高为0的盒子加上边框后形成的四个三角形。

 

        所以我们只要在::before中写一个第二个样子的正方形就可以了。

.nav::before{
            content:" ";
            display: block;
            border: 15px solid skyblue;
            border-left: 15px solid transparent;
            left: -30px;
            position: absolute;
        }

         第一行是设置伪元素中没有内容，第二行是将伪元素转为块级元素，第三行与第四行则是画一个左边颜色为透明的正方形了。

        最后一行是给这个伪元素开绝对定位，倒数第二行则是相对开了相对定位的父元素往左移动30px。

        到这里，左侧的异形就设计好了，看一下效果图。

        右边的异形其实就是左边的异形变成，左边三角形有颜色，其他三块呈透明色，然后也开绝对定位定位到中间盒子的右侧；这里就不展开讲了 ，直接看代码和最终效果图。

.nav::after{
            content:" ";
            display: block;
            border: 15px solid transparent;
            border-left: 15px solid skyblue;
            right:-30px;
            bottom: 0;
            position: absolute;
        }

 

        好啦，以上就是如何用简单的html和css写出一个导弹头样式的导航，一般导航里面是个链接或者锚点，只要在文字那里加上a标签就可以了。

        当然方法有很多种哈，我只是写了这一种而已；毕竟我目前还是菜狗一只。。。