Web前端第二次作业

不到断气不罢休  论坛元老 | 2024-11-10 22:45:01 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1705|帖子 1705|积分 5115

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x

作业要求：制作带有下拉悬停菜单的导航栏


  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <style>
  7.                         body{
  8.                                 height: 1000px;
  9.                         }
  10.                         *{
  11.                                 margin: 0;
  12.                                 padding: 0;
  13.                         }
  14.                         #menu{
  15.                                 background-color: #0c2374;
  16.                                 width: 100%;
  17.                                 height: 50px;
  18.                         }
  19.                         #container{
  20.                                 background-color: #0c2374;
  21.                                 width: 100%;
  22.                                 height: 50px;
  23.                                
  24.                         }
  25.                         .item{
  26.                                 /* 浮动属性可以让块标签，处在同一行 */
  27.                                 float: left;
  28.                                 width: 100px;
  29.                                 height: 50px;
  30.                                 line-height: 50px;
  31.                                 text-align: center;
  32.                                 position: relative;
  33.                                 color: white;
  34.                         }
  35.                         .item:hover{
  36.                                 background-color: steelblue;
  37.                         }
  38.                         #container{
  39.                                 width: 800px;
  40.                                 margin: auto;
  41.                         }
  42.                         .down_meun>div{
  43.                                 color: white;
  44.                                
  45.                         }
  46.                         .down_meun{
  47.                                 background-color: steelblue;
  48.                                 display: none;
  49.                                 position: absolute;
  50.                                
  51.                         }
  52.                         .item:hover>.down_meun{
  53.                                 display: block;
  54.                                 width: 100px;
  55.                         }
  56.                        
  57.                         #ding{
  58.                                 width: 90px;
  59.                                 height: 50px;
  60.                                 border: 2px solid #0c2374;
  61.                                 text-align: center;
  62.                                 line-height: 50px;
  63.                                 position: fixed;
  64.                                 right: 0px;
  65.                                 bottom: 0px;
  66.                                 color: steelblue;
  67.                                
  68.                                
  69.                                 border-radius: 30px;
  70.                                 font-size: 1.25rem;
  71.                                 line-height: 50px;
  72.                                 text-align: center;
  73.                                 color: #64c09B;
  74.                                 font-weight: bolder;
  75.                         }
  76.                         #ding:hover{
  77.                                 background-color: #64c09B;
  78.                                 color: aliceblue;
  79.                                 text-shadow: 7px 4px 2px seagreen;
  80.                                 box-shadow: 5px 5px 1px green;
  81.                                 transition: 2s;
  82.                         }
  83.                        
  84.                 </style>
  85.         </head>
  86.         <body>
  87.                         <div id="menu">
  88.                                 <div id="container">
  89.                                         <div class="item">游戏1
  90.                                                 <div class="down_meun">
  91.                                                         <div>游戏下载</div>
  92.                                                         <div>游戏交易</div>
  93.                                                         <div>游戏外挂</div>
  94.                                                         <div>游戏攻略</div>       
  95.                                                 </div>
  96.                                                
  97.                                         </div>
  98.                                         <div class="item">游戏2
  99.                                                 <div class="down_meun">
  100.                                                         <div>游戏mod1</div>
  101.                                                         <div>游戏mod2</div>
  102.                                                         <div>游戏mod3</div>
  103.                                                         <div>游戏mod4</div>
  104.                                                        
  105.                                                 </div>
  106.                                         </div>
  107.                                        
  108.                                         <div class="item">游戏3</div>
  109.                                         <div class="item">游戏4
  110.                                                 <div class="down_meun">
  111.                                                         <div>商学院</div>
  112.                                                         <div>土木与工程</div>
  113.                                                         <div>艺术与传媒</div>
  114.                                                         <div>信息工程学院</div>
  115.                                                         <div>文理学院</div>
  116.                                                         <div>大数据与人工智能</div>
  117.                                                         <div>马克思主义</div>
  118.                                                        
  119.                                                        
  120.                                                 </div>
  121.                                         </div>
  122.                                         <div class="item">游戏5</div>
  123.                                         <div class="item">游戏6</div>
  124.                                         <div class="item">游戏7</div>
  125.                                         <div class="item">游戏8</div>
  126.                                 </div>
  127.                         <div id="ding">
  128.                                 <a href="#menu" >
  129.                                         回到顶部
  130.                                 </a>
  131.                         </div>
  132.                        
  133.                 </body>
  134.         </html>
复制代码
页面效果：


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

不到断气不罢休

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表