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. Mysql 使用存储过程添加新字段

    -- 1, 注意SQL 语句开始处不要空格 -- 2, 在使用 [--] 进行注释时,后面请加空格 USE `test`; -- lastUpdateTime drop procedure if ex ...

  2. Virnish使用

    缓存基础原理 程序具有局部性 时间局部性 空间局部性 key-value 形式存储数据 key 访问路径.URL.hash value web content 命中率 hit/(hit+miss) 文 ...

  3. 测试开发系列之Python开发mock接口（二）

    上一篇咱们已经把开发前的环境准备好了,还需要再做一点准备,你的账户信息是存在哪的呢,当然是存在数据库里的,咱们在去支付,扣钱的时候,肯定是从数据库里面操作的,去更新账户表里面的数据,所以咱们先要把数据 ...

  4. Adding an Exception Breakpoint － Terminating app due to uncaught exception 'NSRangeException', reason: '*** -[__NSArrayM objectAtIndex:]: index 25 bey

    用如下的方法可以非常方便停留到具体crash的某行代码 Adding an Exception Breakpoint Add an exception breakpoint to your proje ...

  5. gdb生成的core文件位置

    gdb可以生成core文件,记录堆栈信息,core文件名字是下面这种格式 :core.9488,其中9488是PID 文件位置是当前目录

  6. 【Lucene】具体解释Lucene全文检索的信息写入与读取

    Lucene的大致结构图: 信息写入索引库的过程: 读取信息的过程: 以下是一个向索引库写入信息与读取信息的样例: public void testCreateIndex() throws Excep ...

  7. 数据结构与算法之贪心算法 C++实现

    1.基本思路:从问题的某一个初始解触发逐步逼近给定的目标,以尽可能快的求得更好的解. 当达到算法中某一步不能再继续前进时.就停止算法,给出近似值.也就是说贪心算法并不从总体最优考虑,它所作出的选择仅仅 ...

  8. opencvSGBM半全局立体匹配算法的研究(1)

    转载请说明出处:http://blog.csdn.net/zhubaohua_bupt/article/details/51866567 这段时间对opencvSGBM半全局立体匹配算法进行了比較仔细 ...

  9. 标准C头文件

    ISO C标准定义的头文件: POSIX标准定义的必须的头文件: POSIX标准定义的XSI可选头文件: POSIX标准定义的可选头文件:

  10. linux输入子系统（6）-input子系统介绍及结构图

    注:本系列转自: http://www.ourunix.org/post/290.html input子系统介绍         输入设备(如按键,键盘,触摸屏,鼠标,蜂鸣器等)是典型的字符设备,其一 ...