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

最新推荐文章于 2024-01-15 01:40:35 发布

原创

最新推荐文章于 2024-01-15 01:40:35 发布 · 1.6k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

实现的效果

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