HTML界面设计

新建一个web项目，在<body></body>标签中创建一个<div></div>，指定class属性=“header”。在<div></div>中创建一个无序列表<ul></ul>，指定class属性=“header_ul”。在其中添加几个<li></li>作为导航栏的菜单并分别指定class属性

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>导航栏</title></head><body><div class="header"><ul class="header_ul"><li class="header_ul_home">HOME</li><li class="header_ul_pages">PAGES</li><li class="header_ul_portfollo">PORTFOLIO</li><li class="header_ul_blog">BLOG</li></ul></div></body>
</html>

然后为各个菜单添加子菜单

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>导航栏</title><link rel="stylesheet" type="text/css" href="css/style.css" /></head><body><div class="header"><ul class="header_ul"><li class="header_ul_home">HOME<ul class="header_ul_ul"><li>HOME1</li><li>HOME2</li><li>HOME3</li></ul></li><li class="header_ul_pages">PAGES<ul class="header_ul_ul"><li>PAGES1</li><li>PAGES2</li><li>PAGES3</li></ul></li><li class="header_ul_portfollo">PORTFOLIO<ul class="header_ul_ul"><li>PORTFOLIO1</li><li>PORTFOLIO2</li><li>PORTFOLIO3</li></ul></li><li class="header_ul_blog">BLOG<ul class="header_ul_ul"><li>BLOG1</li><li>BLOG2</li><li>BLOG3</li></ul></li></ul></div></body></html>

将其在浏览器运行

可以看到，这和我们需要的导航栏的效果可不同，这就需要我们在css文件中改变它的样式

CSS样式设计

创建一个style.css文件
首先将body的边缘留白设置为0

body {margin: 0px;
}

然后为div设计宽高

.header {width: 100%;height: 100px;
}

接着为一级菜单设置浮动位置，并将列表标点取消

.header_ul {float: left;list-style: none;
}

为<li></li>列表设置浮动及顶部左部留白
设置鼠标滑入变色

.header_ul li {margin-top: 26px;margin-left: 15px;float: left;
}.header_ul li:hover {color: red;
}

为子菜单设置各个属性，主要有宽度，内部位置，固定位置

.header_ul_ul {width: 100px;text-align: center;position: absolute;list-style: none;background: white;color: black;
}.header_ul_ul li {margin: 10px 15px 10px -25px;float: none;
}

将各个子菜单设置为隐藏

.header_ul_home .header_ul_ul {display: none;
}.header_ul_pages .header_ul_ul {display: none;
}.header_ul_portfollo .header_ul_ul {display: none;
}.header_ul_blog .header_ul_ul {display: none;
}

再将其设置为鼠标滑入显示

.header_ul_home:hover .header_ul_ul {display: block;
}.header_ul_pages:hover .header_ul_ul {display: block;
}.header_ul_portfollo:hover .header_ul_ul {display: block;
}.header_ul_blog:hover .header_ul_ul {display: block;
}

然后将css文件引入html文件中

<link rel="stylesheet" type="text/css" href="css/style.css" />

可以看到效果

这样就基本实现了导航栏的效果
完整的css代码如下

body {margin: 0px;
}/*导航栏*/.header {width: 100%;height: 100px;background: #11333333;
}/*一级菜单*/.header_ul {float: left;list-style: none;
}.header_ul li {margin-top: 26px;margin-left: 15px;float: left;
}.header_ul li:hover {color: red;
}/*二级菜单*/.header_ul_ul {width: 100px;text-align: center;position: absolute;list-style: none;background: white;color: black;
}.header_ul_ul li {margin: 10px 15px 10px -25px;float: none;
}.header_ul_home .header_ul_ul {display: none;
}.header_ul_pages .header_ul_ul {display: none;
}.header_ul_portfollo .header_ul_ul {display: none;
}.header_ul_blog .header_ul_ul {display: none;
}.header_ul_home:hover .header_ul_ul {display: block;
}.header_ul_pages:hover .header_ul_ul {display: block;
}.header_ul_portfollo:hover .header_ul_ul {display: block;
}.header_ul_blog:hover .header_ul_ul {display: block;
}

HTML5+CSS设计导航栏及其子菜单相关推荐

html纯css实现导航栏下拉菜单（带下拉三级菜单）
本文转载于:https://blog.csdn.net/qq_30449567/article/details/80548720 <!DOCTYPE html> <html lang ...
HTML+CSS实现导航栏二级下拉菜单图书案例
一.效果图二.内容.要求学习完HTML5+CSS之后,可以考虑设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分法)进行分门别类,其中上面括号中的类别为 ...
利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
css导航栏_使用CSS的导航栏
css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing a user-friendly ...
使用bootstrap搭建pc导航栏手机侧滑菜单
涉及技术bootstrap css html5 项目地址:https://github.com/chenqiao10/webApp/tree/master/bs-project 需求搭建pc导航栏手机 ...
HTML字母导航栏怎么做,html导航栏下拉菜单怎么制作？这里有详细的代码实例
本篇文章介绍了关于html导航栏下拉菜单的制作,文章一开始就给出了全部的导航栏下拉菜单的代码,没看懂的下面都有详细的解释.下面就让我们一起来看这篇文章吧我们要说的是html导航栏下拉菜单的制作,先看 ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...

HTML5+CSS设计导航栏及其子菜单

HTML界面设计

CSS样式设计

HTML5+CSS设计导航栏及其子菜单相关推荐

最新文章

热门文章