CSS中实现导航栏和下拉菜单的教程_F11 - 专业站长和开发者的学习网站

分享到

CSS中实现导航栏和下拉菜单的教程

css 来源：互联网搜集作者：酷站发布时间：2018-07-19 08:37:37 人浏览

摘要

今天小编给大家带来CSS中实现导航栏和下拉菜单的教程一、CSS导航栏（2）垂直导航栏代码如下 !doctyre html html head meta charset = utf-8 title 垂直导航栏/ title link rel = stylesheet href = daohanglan1.css / / head body ul li a class = active

今天小编给大家带来CSS中实现导航栏和下拉菜单的教程

一、CSS导航栏

（2）垂直导航栏

代码如下

		
		<!doctyre html>

		<html>

		<head> 

		<meta charset="utf-8"> 

		<title>垂直导航栏</title> 

		<link rel="stylesheet" href="daohanglan1.css"/>

		</head>

		<body>

		<ul>

		<li><a class="active" href="#home">主页</a></li>

		<li><a href="#news">新闻</a></li>

		<li><a href="#contact">联系</a></li>

		<li><a href="#about">关于</a></li>

		</ul>

		<div>

		<h2>垂直导航栏</h2>

		<h3>垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏</p>

		<p>垂直导航栏</p>

		<p>垂直导航栏</p>

		<p>垂直导航栏</p>

		<p>垂直导航栏</p>

		<p>垂直导航栏</p>

		<p>垂直导航栏</p>

		<p>垂直导航栏</p>

		</div>

		</body>

		</html>

		body{

		margin:0;

		}

		ul{

		padding:0;

		margin:0;

		list-style-type:none;

		width:25%;

		background-color:#f1f1f1;

		position:fixed;

		height:100%;

		top:0;

		overflow:auto;

		/* border:1px solid #000; */

		}

		/* ul>li:not(:last-child){

		border-bottom:1px solid #000;

		} */

		ul a{

		display:block;

		text-decoration:none;

		color:#000;

		padding:8px 16px;

		text-align:center;

		}

		li a:hover:not(.active){

		background-color:#555;

		color:white; 

		}

		a.active{

		background-color:#4caf50;

		color:white; 

		}

		div{

		margin-left:25%;

		padding:1px 16px;

		height:100px;

		}

效果图如下：

（3）水平导航栏

代码如下：

		<!doctyre html>

		<html>

		<head> 

		<meta charset="utf-8"> 

		<title>水平导航栏</title> 

		<link rel="stylesheet" href="daohanglan2.css"/>

		</head>

		<body>

		<ul>

		<li><a class="active" href="#home">主页</a></li>

		<li><a href="#news">新闻</a></li>

		<li><a href="#contact">联系</a></li>

		<li style="float:right"><a href="#about">关于</a></li>

		</ul>

		<div class="box">

		<h2>水平导航栏</h2>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		<p>水平导航栏；水平导航栏；水平导航栏；水平导航栏</p>

		</div>

		</body>

		</html>

		body{

		margin:0;

		}

		ul{

		padding:0px;

		margin:0px;

		list-style-type:none;

		background-color:#333;

		overflow:hidden;

		position:fixed;

		top:0px;

		width:100%;

		}

		ul>li{

		float:left;

		border-right:1px solid #fff;

		display:inline;

		}

		ul>li:last-child{

		border-right:none;

		}

		a{

		padding:14px 16px;

		display:block;

		width:60px;

		text-align:center;

		text-decoration:none;

		color:white;

		}

		li a:hover:not(.active) {

		background-color: #111;

		}

		li a.active {

		color: white;

		background-color: #4CAF50;

		}

		.box{padding:20px;

		margin-top:30px;

		background-color:#1abc9c;

		height:1500px;}

		效果图如下：

二、下拉菜单

代码如下：

		<!doctype html>

		<html>

		<head>

		<meta charset="utf-8"/>

		<title></title>

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

		</head>

		<body>

		<div class="dropdown">

		<span>

		下拉菜单

		</span>

		<div class="di">

		<ul>

		<li>你好！</li>

		<li>我好！</li>

		<li>大家好！</li>

		</ul>

		</div>

		</div>

		</body>

		</html>

		body{

		margin:0;

		text-align:center;

		}

		.dropdown{

		background-color:green;

		text-align:center;

		padding:20px;

		display:inline-block;

		cursor:pointer;

		position:relative;

		}

		.di{

		display:none;

		position:absolute;

		top:61px;

		left:0;

		}

		.di ul{

		list-style:none;

		padding:0;

		margin:0;

		background-color: #f9f9f9;

		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

		}

		.di ul li{

		min-width:104px;

		padding:10px 15px;

		}

		.dropdown:hover{

		background-color:#3e8e41

		}

		.dropdown:hover .di{

		display:block;

		}

		.di ul li:hover{

		background-color: #f1f1f1

		}

		效果图如下：

您可能感兴趣的文章 :

原文链接 :

Tag : 下拉菜单(9)CSS教程(10)

CSS元素定位之通过元素的标签或者元素的id、cl

大部分人在使用selenium定位元素时，用的是xpath元素定位方式，因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观，更好
微信小程序纯CSS实现无限弹幕滚动效果

啥也不说，先上效果图实现背景产品：我们需要一个弹幕滚动效果，类似于微博热搜那种实时评论，但是我们的数据是固定的20条，你让他
使用CSS构建强大且酷炫的粒子动画效果

粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。当然，不使用 HTML + CSS 的主要
flex:1的详细介绍

简单的来说一下在别人问你这个问题的时候怎么来回答它前端新人，如有错误求大佬指出~求教???? 情景复现大佬提问：你知道flex: 1;的更深
新的CSS伪类函数 :is 和 :where()示例介绍

在编写 CSS 时，有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如，如果您想对标题中的 b 标签进行颜色调整，我
纯CSS打字动画的实现方法

在一些技术网站中，经常会看到这样一种展示效果：逐个显示一段文本中的字符，模拟出一种打字的效果。通过这种方式可以显著地提升网
实现el-form每行显示两列底部按钮居中效果的教程

el-form 每行显示两列，底部按钮居中问题：以前的解决办法是：el-col,el-row。但是这里只有一个el-form-item的label数据是已知的，其余项都是循
CSS实现六边形的图片效果的代码

前言在CodePen上看到一个有意思的效果: 这个效果的难点在于六边形的绘制, 那么接下来我们就一起来看下作者是怎么实现他的吧实现思路
CSS浮动引起的高度塌陷问题的详细介绍

正常页面布局 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 style *{ margin:0; padding: 0; } .content{ width:400px; border:1px solid #000; } .box{ width:200px;
css中:last-child不生效的解决方法介绍

在产品需求中，总有对第一个或者最后一个同类元素进行特殊的样式处理。如果使用js来判断哪个是第一个、最后一个也并不是不可以。但