html5--6-60 阶段练习7-下拉菜单

学习要点

  • 综合运用所学过的知识完成一个下拉菜单的小练习，加深对学过知识点的综合应用能力。

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>下拉菜单</title>

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

 </head>

 <body>

 <body>

     <nav>

         <ul class="ul1">

             <li>

                 <a href="">首页</a>

                 <ul class="ul2">

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

                     <li><a href="">科技</a></li>

                     <li><a href="">财经</a></li>

                     <li><a href="">读书</a></li>

                 </ul>

             </li>

             <li>

                 <a href="">首页</a>

                 <ul class="ul2">

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

                     <li><a href="">科技</a></li>

                     <li><a href="">财经</a></li>

                     <li><a href="">读书</a></li>

                 </ul>

             </li>

             <li>

                 <a href="">首页</a>

                 <ul class="ul2">

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

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

                 <ul>

                     <li><a href="">IT</a></li>

                     <li><a href="">创投</a></li>

                     <li>

                         <a href="">探索</a>

                         <ul>

                             <li><a href="">航天</a>

                                 <ul>

                                     <li><a href="">技术前沿</a></li>

                                     <li><a href="">理论研究</a></li>

                                 </ul>

                             </li>

                             <li><a href="">考古</a></li>

                             <li><a href="">医学</a></li>

                         </ul>

                     </li>

                 </ul>

             </li>

             <li><a href="">财经</a></li>

             <li><a href="">读书</a></li> -->

         </ul>

     </nav>

 </body>

 </body>

 </html>
 @charset="UTF-8";

 *{

     margin:;

     padding:;

 }

 .ul1{

     margin:50px;

 }

 ul{

     list-style-type: none;

 }

 a{

     text-decoration: none;

 }

 .ul1>li{

     width: 150px;

     height: 2em;

     text-align: center;

     background: rgba(30,80,200,0.8);

     border-radius: 0.5em 0.5em 0 0  ;

     font-size: 20px;

     line-height: 2em;

     float: left;

     margin-left: 1px;

 }

 .ul2{

     background: rgba(80,80,160,0.6);

     border-radius: 0 0  0.5em 0.5em;

     display: none;

 }

 .ul2>li>a:hover{

     background: rgba(40,180,40,0.8);

     width: 85%;

     height: 1.5em;

     line-height: 1.5em;

     display: inline-block;

     border-radius: 0.5em;

     font-weight: bold;

     padding: 3px 3px;

 }

 .ul1>li:hover{

     background:rgba(30,80,250,0.8);

 }

 .ul1>li:hover>ul{

     display: block;

 }

html5--6-60 阶段练习7-下拉菜单的更多相关文章

  1. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  2. CSS实现下拉菜单的几种方法

    PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...

  3. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  4. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

  6. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  7. 10个优秀的 HTML5 &amp; CSS3 下拉菜单制作教程

    下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...

  8. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

  9. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...

  10. Html5+Mui前端框架,开发记录（四）：下拉菜单绑定数据、搜索、时间控件

    1.下拉菜单绑定数据,选择后回传值 1)html: <div class="mui-input-row"> <label>xxx:</label> ...

随机推荐

  1. net3：Calendar控件的使用

    原文发布时间为:2008-07-29 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  2. Idea基本讲解、常用配置以及快捷键设置

    IDEA官网学习文档:https://www.jetbrains.com/idea/documentation/ IDEA官网入门教程:https://www.jetbrains.com/help/i ...

  3. linux下查看cpu使用情况

    1.在终端输入top 2.ubuntu系统自带有system monitor 3.sudo apt-get install sysstat 然后在终端输入:mpstat

  4. Spark学习(一) Spark初识

    一.官网介绍 1.什么是Spark 官网地址:http://spark.apache.org/ Apache Spark™是用于大规模数据处理的统一分析引擎. 从右侧最后一条新闻看,Spark也用于A ...

  5. 浅谈Heatmap

    在自然界之中,蛇的眼睛有夜视功能,即便是茫茫黑夜,它也能轻而易举的找到猎物,这是因为任何物体都会辐射热红外,且辐射的高低和温度成正比,由于生命体的体温会明显高于周围环境的温度,所以在蛇眼面前便无处遁形 ...

  6. 消息列队 php 基于redis 实现

    说明 消息列队 基于PHP 实现. 之前 用python 的 flower 实现了 列队. 今天这里我们用的是 PHP 来实现: 在实际的业务环境中 PHP 用的多些: PHP 实现列队 最重要的是用 ...

  7. linux下ndk编译命令行程序及配置

    1.在http://developer.android.com/tools/sdk/ndk/index.html下载Android-ndk-r8e-linux-x86.tar.bz2,解压后把andr ...

  8. 日常方便使用的Python脚本实现

    目录 文件批量重命名 bin文件合并 正文 1.python根据不同条件批量实现文件重命名 因为下载的电视剧名字比较乱,但却按照下载时间顺序依次排列,而手动重命名或者找软件太麻烦,我就自己实现了个: ...

  9. Json实现异步请求（提交评论）

    主要将代码粘贴,通过阅读代码理解当中的相关逻辑. html代码: <form id="form1" runat="server"> <p> ...

  10. Androidproject文件下assets目录与res目录的差别

    1. assets : 不会在R.java文件下生成对应的标记,assets目录能够自己创建目录,必须使用AssetsManager类进行訪问,存放到这里的资源在执行打包的时候都会打入程序安装包中, ...