html 二级菜单

最新推荐文章于 2024-05-06 21:05:10 发布

相信奇迹的人，本身就是奇迹！

最新推荐文章于 2024-05-06 21:05:10 发布

阅读量672

点赞数 6

分类专栏：网页设计文章标签： html二级菜单

本文链接：https://blog.csdn.net/weixin_44925606/article/details/101038867

版权

网页设计的一级菜单和二级菜单

一级菜单的应用
- table 布局
- css样式设置
二级菜单
- heml代码
- 主要css设置
效果展示![在这里插入图片描述](https://img-blog.csdnimg.cn/20190919222504252.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDkyNTYwNg==,size_16,color_FFFFFF,t_70)
全部代码

一级菜单的应用

在网站首页经常有导航页面而一级菜单主要应用于导航页面

table 布局

一级菜单主要用table表格进行布局
在这里插入图片描述
每一个一级菜单都是一个表格

<body>
    <div class="nav">
        <ul>
            <li><a href="#">一级菜单</a>
               
            </li>
            <li><a href="#">一级菜单</a>
               </li>
            <li><a href="#">一级菜单</a>
                
            </li>
            <li><a href="#">一级菜单</a></li>
            <li><a href="#">一级菜单</a></li>
        </ul>
    </div>

css样式设置

float设置成left使表格能够横向排列
display设置为blok使a标签块状显示

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 100%;
            height: 50px;
            background-color:#999999;
        }
        .nav ul{
            margin: auto;
            width: 1000px;
            height: 100%;
            
        }
        .nav ul li a:link,.nav ul li a:visited{

            display: block;
            width: 200px;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            font-size: 30px;
            color: wh

最低0.47元/天解锁文章

相信奇迹的人，本身就是奇迹！

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
html 二级菜单

网页设计的一级菜单和二级菜单一级菜单的应用table 布局css样式设置二级菜单heml代码主要css设置效果展示![在这里插入图片描述](https://img-blog.csdnimg.cn/20190919222504252.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly...
复制链接

扫一扫