HTML+CSS实现下拉菜单导航栏

实现的效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"/><title>wen an qi</title><style type="text/css">*{margin: 0px; padding: 0px;}.nav{width: 310px;height:480px; margin: 0px auto;/*使整个菜单栏置顶并居中*/}.kuai{border-bottom:1px solid gray;/*设置灰色横线*/height: 92px;padding: 5px;margin: 0px 20px; }.h{display: inline;/*使块级元素变为行级元素：让“综合新闻”和“媒体天下”并排显示*/list-style:none;/*去掉无序列表自带的小圆点*/text-align: center;line-height: 60px;}.h1{background-color: white;color: orange;height: 60px;padding: 15px 46px 20px 46px;border-top: 10px solid #685479;}.h2{background-color: #685479;color: white;margin: -6.5px;width: 310px;padding: 20px 46px;}.dh{height: 420px;width: 310px;background-color: white;}.time{font:lighter 13px 宋体;color: gray;list-style:none;padding: 10px 0px;}.t{list-style:none;}.t:hover/*鼠标略过时字体颜色改变*/{color: orange;}</style></head><body bgcolor="#eee"><div class="nav"><ul><li class="h h1">综合新闻</li><li class="h h2">媒体天下</li><ul class="dh"><div class="kuai"><li class="time">2018.12.21</li><li class="t">同光大学召开2018年就业工作会议</li></div><div class="kuai"><li class="time">2018.12.21</li><li class="t">【组图】2019同光大学国际学生学者新年晚会异彩纷呈</li></div><div class="kuai"><li class="time">2018.12.20</li><li class="t">同光大学召开2018年第三次院长（系主任）会议</li></div><div class="kuai"><li class="time">2018.12.20</li><li class="t">同光大学服务经济与公共政策研究院揭牌成立</li></div></ul>                 </ul></div></body>
</html>

HTML+CSS实现下拉菜单导航栏相关推荐

纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul ...
html下拉菜单触摸显示,CSS导航：纯CSS触碰式下拉菜单
[破洛洛教学网] 纯CSS触碰式下拉菜单 /* 整体设置*/ .navigation { margin:0; padding:0; width:610px; list-style-type:none; ...
随着滚动条下拉，导航栏置顶
随着滚动条下拉,导航栏置顶想做一个这样的效果,当我们下拉滚动条时,写的导航栏置顶. 这是效果图先学习用到的基本知识 jQuery CSS 操作 - scrollTop() 方法 scrollTop ...
使用CSS制作下拉菜单样式
CSS制作下拉菜单制作tooltip显示形式代码示例实现原理 HTML 部分 CSS 部分制作可点击的下拉菜单实现原理代码示例 Appdex 制作tooltip显示形式代码示例 < ...
兼容IE各版本的纯CSS二级下拉菜单
这是一个标准的CSS下拉菜单制作教程,有针对目前流行的IE6/IE7/IE8不同版本的CSS代码,因此可以在IE之间完全兼容,不过其它的浏览器像火狐/GG浏览器之类的没有测试,如果兼容IE8的话,那么 ...
Android：有关下拉菜单导航的学习（供自己参考）
Android:有关==下拉菜单导航==的学习因为先前的学习都没想着记录自己的学习历程,所以该博客才那么迟才开始写. 内容: ==下拉菜单导航== 学习网站:android Spinner控件详解 ...
ios 上滑隐藏导航下拉显示导航栏实现
为了最大限度的利用手机屏幕,出现了上滑隐藏导航下拉显示导航栏. 先看看效果(代码:http://download.csdn.net/detail/gx_wqm/9771247), 把代码跑一下看一下是 ...
动态导航多级下拉菜单 html,css3实现的多级渐变下拉菜单导航效果代码
本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于css3实现的下拉菜单导航,是非常漂亮的动画菜单,而且是多级菜单的形式,测试时发现可支持5级,估 ...
css表格中下拉菜单怎么设置,css如何实现下拉菜单？css实现下拉菜单的方法（完整代码）...
本篇文章给大家带来的内容是关于css如何实现下拉菜单?css实现下拉菜单的方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. /*盒子,相对定位*/ .dropdown{ ...

HTML+CSS实现下拉菜单导航栏

HTML+CSS实现下拉菜单导航栏相关推荐

最新文章

热门文章