项目一：《摄影分享网站开发》首页头部导航总结

文章目录​

目录

文章目录​

前言

一、首页导航栏

1.导航栏效果展示

2.代码展示

 3.效果制作讲解

3.1定位模式

3.2边偏移

总结

---

---

前言

进过两天多的忙碌我完成了项目：《摄影分享网站开发》，给我印象最深刻的就是首页的这个导航栏了，因为他涉及到了二级菜单、元素的显示与隐藏、以及定位。所以我决定来给大家讲讲我是如何制作这个导航栏的。

---

一、首页导航栏

1.导航栏效果展示

效果（1）如下图展示：

 效果（2）如下图展示：

 效果（3）如下图展示：

 

2.代码展示

导航html代码如下（示例）：

<div class="header w clearfix">
        <img src="image/img/logo.png" alt="">
        <div class="search">
            <input type="text" placeholder="请输入搜索内容">
            <button>搜索</button>
        </div>
        <div class="nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="index2.html">风景篇</a>
                    <ul>
                        <li><a href="#">藏区</a></li>
                        <li><a href="#">大海</a></li>
                        <li><a href="#">高山</a></li>
                        <li><a href="#">雪地</a></li>
                    </ul>
                </li>
                <li><a href="food.html">美食篇</a>
                    <ul>
                        <li><a href="#">川菜</a></li>
                        <li><a href="#">粤菜</a></li>
                        <li><a href="#">徽菜</a></li>
                        <li><a href="#">浙菜</a></li>
                    </ul>
                </li>
                <li><a href="person.html">人物篇</a>
                    <ul>
                        <li><a href="#">球星</a></li>
                        <li><a href="#">歌星</a></li>
                        <li><a href="#">演员</a></li>
                        <li><a href="#">名人</a></li>
                    </ul>
                </li>
                <li><a href="联系我们.html">联系我们</a></li>
            </ul>
        </div>
    </div>

 我们的二级菜单是如何实现的呢？其实很简单大家都知道我们导航通常使用的就是无序列表ul来制作，而我们的二级菜单就是在无序列表ul中的li里面在嵌套一个无序列表就可以了。

导航CSS样式代码如下（示例）：

* {
    padding: 0;
    margin: 0;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.w {
    margin: 0 auto;
}


/* header头部 */

.header {
    width: 100%;
    padding-left: 380px;
    position: sticky;
    height: 150px;
    background-color: rgba(255, 255, 255, 1);
    top: 0;
}

.header img {
    float: left;
}

.header .search {
    float: left;
    font-size: 14px;
    line-height: 98px;
    margin-left: 100px;
}

.header .search input {
    width: 322px;
    height: 35px;
}

.header .search button {
    height: 35px;
    width: 45px;
    border-radius: 5px;
}

.header .nav {
    height: 98px;
    float: left;
    margin-top: 40px;
    margin-left: 60px;
}

.header .nav ul li {
    float: left;
    font-size: 18px;
    margin: 0 20px 0 20px;
    color: black;
}

.header .nav ul li ul li {
    margin: 0;
    text-align: center;
    height: 30px;
    width: 50px;
    line-height: 30px;
    display: block;
    background-color: #ff6347;
}

.header .nav ul li ul li a:hover {
    color: #fff;
}

.header .nav ul li:hover ul {
    display: block;
}

.header .nav ul li a {
    color: black;
}

.header .nav ul li a:hover {
    color: #ff6347;
}

.header .nav ul li ul {
    display: none;
}

.header .nav ul li ul li {
    height: 30px;
    clear: both;
}

这是我这个导航的所有样式代码。 

 3.效果制作讲解

首先我们来说一说二级菜单的显示与隐藏，其实我们是为最里面的无序列表添加了一个display属性，display属性里面有了none属性，他就是控制元素是否显示，如果你想让他不显示出来就可以给他的CSS样式上加上一个display：none。当然显示也是使用display属性但是display里面的属性值就会发生改变，注意显示属性一定要加在我们鼠标想要放在上面的地方，比如我图片上展示的我要把鼠标放在风景篇上，那么我就要为风景篇设置：hover属性，在：hover属性里面写上display：block即可。

其次就是如何让导航栏固定在最上方，随着网页的滚动他也在上方固定着，我的这个导航呢实际上是用一个大盒子装载着多个小盒子设计的，所以我只需要这个大盒子固定在上方就可以，在这里我是用的是position属性，这个属性是用来为元素进行定位的，我是用的position中的position: sticky;属性，当然光是用这个属性是不够的，因为定位是定位模式加边偏移组成，想要他固定在最上方我们还需要增加一个top属性，这个属性是和定位属性一起使用的，和定位属性一起使用的还有right、left、bottom这三个属性，这几个属性是设置这个元素的最终位置。这四个元素是配合定位属性position一起使用的，单独使用是没有效果的。

在这里我补充一个知识点就是定位模式和边偏移：

3.1定位模式

定位模式有四种：

1.static：静态定位

2.relative：相对定位

3.absolute：绝对定位

4.fixed：固定定位

3.2边偏移

1.top：顶端偏移量，定义相对元素对于其父元素上边线的距离

2.left：左侧偏移量，定义相对元素对于其父元素左边线的距离

3.right：右侧偏移量，定义相对元素对于其父元素右边线的距离

4.bottom：底部偏移量，定义相对元素对于其父元素下边线的距离

---

总结

以上就是今天我想分享给大家的内容！