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

最新推荐文章于 2024-04-24 21:08:22 发布

An__7

最新推荐文章于 2024-04-24 21:08:22 发布

阅读量1.5k

点赞数 2

文章标签： css html css3

本文链接：https://blog.csdn.net/An__7/article/details/121003622

版权

实现的效果

<!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>

An__7

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
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;..
复制链接

扫一扫