摄影网站项目导航总结

IC-ic.ic

于 2021-09-26 15:30:43 发布

阅读量350

点赞数

文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/weixin_55743273/article/details/120488341

版权

本文总结了摄影网站导航栏的设计，包括导航栏效果、布局及代码展示，特别是使用HTML和CSS实现的二级菜单，通过display:none和hover:block实现鼠标悬停显示下拉菜单的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、导航栏
总结

一、导航栏

1.导航栏效果

在这里插入图片描述

2.导航分布

这一部分分成了3个部分。
1.logo部分
2.文本框和搜索按钮部分
3.网页链接部分。

3.导航部分代码展示

1.html部分

<div class="header w">
        <div class="logo">
            <img src="image/img/logo.png" alt="">
        </div>
        <div class="search">
            <input type="text" value="请输入搜索内容">
            <button>搜索</button>
        </div>
        <div class="nav">
            <ul>
                <li><a href="1.html">首页</a></li>
                <li><a href="2.html">风景篇</a>
                    <ul>
                        <li><a href="">藏区</a> </li>
                        <li