导航栏 下拉菜单的制作
导航栏 , 下拉菜单的制作
代码示范 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}#menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}ul{ list-style:none;}ul li{ line-height:40px; text-align:center; position:relative; float:left;}a{ text-decoration:none; color:#000; display:block; width:90px;}a:hover{ color:#FFF; background-color:#666;}ul li ul li{ float:none;margin-top:2px; background-color:#eee; } ul li ul{width:90px; position:absolute;display:none; }
ul li:hover ul{display:block;}
</style>
</head><body>
<div id="menu">
<ul><li><a href="#">首页</a></li><li><a href="#">课程大厅</a><ul><li><a href="#">Javascrip</a> <li><a href="#">Jquery</a> </ul></li><li><a href="#">学习中心</a><ul><li><a href="#">视频学习</a></li><li><a href="#">案例学习</a></li><li><a href="#">交流平台</a></li></ul></li><li><a href="#">经典案例</a></li><li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
显示效果 :
https://www.imooc.com/code/276
知识点:
ul li标签
float:left 属性 横向排列效果
css 设置样式
position: abosolute 绝对定位
其实在这个示范中, 绝对定位和相对定位的含义 还是没有能够理解透彻 。
还有CSS样式的知识 掌握也不是很牢固感觉。
导航栏 下拉菜单的制作相关推荐
- HTML字母导航栏怎么做,html导航栏下拉菜单怎么制作?这里有详细的代码实例
本篇文章介绍了关于html导航栏下拉菜单的制作,文章一开始就给出了全部的导航栏下拉菜单的代码,没看懂的下面都有详细的解释.下面就让我们一起来看这篇文章吧 我们要说的是html导航栏下拉菜单的制作,先看 ...
- html 下拉导航栏源码,html导航栏下拉菜单怎么制作?这里有详细的代码实例
元素来包裹这些元素,并使用CSS来设置下拉内容的样式. html导航栏菜单的CSS部分: .dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用posi ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
- 导航栏下拉菜单效果代码
导航栏,菜单栏下拉简单实现 先看看效果图 <!-- jQuery Drop-down Menu/Navigation bar Copyright 2017-9-21, Jachin QQ: 38 ...
- Layui导航栏下拉菜单不显示问题
1.首先检查自己有没有导入layui.js 2.检查是否已经加载element模块 <ul> ....... </ul> //放到你导航栏代码块的后面 <script&g ...
- Bootstrap导航栏下拉菜单鼠标滑过展开
boostrap的导航栏不提供鼠标滑过展开,通过给类为dropdown的li标签添加和移除open类实现 $(function () {$(".dropdown").mouseov ...
- dw添加下拉菜单_怎样用dw制作导航栏下拉菜单
一.工具:dw工具 二.操作步骤: [1]打开dw软件,新建立一个新的文件. [2]点击常用,选择布局,绘制一个层. [3]再点击层,再绘制一个.可以看到,第一个层是layer1,第二个是layer2 ...
- html纯css实现导航栏下拉菜单(带下拉三级菜单)
本文转载于:https://blog.csdn.net/qq_30449567/article/details/80548720 <!DOCTYPE html> <html lang ...
- html ios导航栏下拉菜单,Flutter -- iOS导航栏TabBar
1 import 'package:flutter/cupertino.dart';2 import 'package:flutter/material.dart';3 4 void main(){5 ...
最新文章
- Tools and Strategies for Long-Read Sequencing and De Novo Assembly of Plant Genomes
- sed和awk的常用实例
- 【Python】Modin,只需一行代码加速你的Pandas
- 微信 SQLite 数据库修复实践
- cdh用户权限_cdh设置hdfs权限
- ejabberd登陆不成功的解决方案
- OpenStack组件
- linux脚本开机挂载,案例七:shell实现开机自动挂载本地YUM仓库程序
- 掌握Java编码规范
- 腾讯云直播流程及腾讯云通讯功能整理
- JavaScript按住鼠标左键选中元素, 实现框选(Rubberband)效果
- HTML常用标签详解
- 计算机音乐谱生曰快乐,原神乐谱(琴谱)生日快乐
- OpenCV像素点邻域遍历效率比较,以及访问像素点的几种方法
- 远程连接华为云服务器上的MySQL
- Lesson 4英语非谓语动词
- 好用的电视盒子软件推荐:无广告看电视我选这两款
- 链栈(Linked Stack)
- 计算机在会计专业的作用论文开题报告,会计电算化对传统会计的影响开题报告.docx...
- echarts下工资收入、五险一金、个人所得税走势图表
热门文章
- 【论文阅读】UntrimmedNets for Weakly Supervised Action Recognition and Detection
- 解决QT接受串口数据时数据更新不及时,串口数据太多导致程序界面崩溃,串口接收数据过快等问题
- Docker学习之三:docker镜像管理
- XML(1)——shema约束之命名空间
- 2006高端IT技术图书点评(首发《中华读书报》)
- 人工智能对商业影响深远,AI可以为中小企业提供五大优势
- 项目销毁主页Attempt to invoke virtual method 'java.lang.Object android.content.Context.getSystemService异常
- 喧嚣之后,元宇宙“凉了”?
- vlan间路由的实现(思科模拟器)
- 步进电机编写单4拍或4-8拍方式的汇编或c语言控制程序.,51单片机C语言和汇编控制28BYJ48步进电机程序...