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. android 布局之LinearLayout（学习一）

    一,View localView = mRadioGroup_content.getChildAt(i);指定自定义菜单栏的点击格,如child3 其中:mRadioGroup_content = ( ...

  2. Controller配置汇总

    1.通过Url对应Bean <bean class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping ...

  3. HDU 4341 Gold miner（分组背包）

    题目链接 Gold miner 目标是要在规定时间内获得的价值总和要尽可能大. 我们先用并查集把斜率相同的物品分在同一个组. 这些组里的物品按照y坐标的大小升序排序. 如果组内的一个物品被选取了,那该 ...

  4. P1111 修复公路 洛谷

    https://www.luogu.org/problem/show?pid=1111 题目背景 A地区在地震过后,连接所有村庄的公路都造成了损坏而无法通车.政府派人修复这些公路. 题目描述 给出A地 ...

  5. T3054 高精度练习-文件操作 codevs

    http://codevs.cn/problem/3054/ 题目描述 Description   输入一组数据,将每个数据加1后输出 输入描述 Input Description 输入数据:两行,第 ...

  6. 单片机C51串口发送、接收寄存器

    所以,发送和接收寄存器可使用同一地址,编写验证程序(发送和接收是独立空间):读取一个数(1)->发送一个数(2)->再读取得1则是独立空间 不知道STM32串口寄存器和C51串口寄存器是否 ...

  7. (入门SpringBoot)SpringBoot项目数据源以及整合mybatis(二)

    1.配置tomcat数据源: #   数据源基本配置spring.datasource.url=jdbc:mysql://localhost:3306/shoptest?useUnicode=true ...

  8. Python资料大全

    说明:以下文章为转载,有英文原文和中文整理翻译,对原作者和译者的工作表示极大感谢!!! 英文原文:https://github.com/vinta/awesome-python 中文译文:https: ...

  9. Jquery表单序列化和json操作

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Python的未来和Python的意义 & pypy & JIT

    今天在读关于Lisp的文章,感概于这门语言的生命力(Link).同时也读到了关于python的文章,Python之父谈Python的未来(Link) 文章中拿Python和Javascript作比较, ...