小刘同学的第三十三篇博文

2018-06-24 01:25:21来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  一天了,都下着很冷很冷的雨啊...气温下降了很多哟,小伙伴们要照顾好自己( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ

  今天还是没有能坚持2个小时的学习时间,每天晚上拿出2个小时来学前端很难么?不难啊,真的不难啊,为什么做不到呢???总是被各种各样的事情耽误,自己没有跳脱一种状态的环境,明明知道应该来图书馆自习了,可还是在和学弟聊天侃大山……

  今天把昨天那个右键菜单的题目写完了,果然自己看一遍别人的代码,自己再敲一遍的时候就。。。很伤。。。还是得一边看着别人的代码,一边自己写一点,这样才行。。。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>homework2</title>
  6     <style>
  7         #menu {
  8             padding: 0;
  9             margin: 0;
 10             list-style: none;
 11             border: 1px solid #ccc;
 12             height: 200px;
 13             width: 150px;
 14         }
 15         #menu li {
 16             height: 39px;
 17             border-bottom: 1px solid #ccc;
 18             line-height: 39px;
 19             text-align: center;
 20         }
 21         #menu li:hover{
 22             background-color: #abcdef;
 23         }
 24         #menu li:hover a {
 25             color: white;
 26         }
 27         #menu li a {
 28             text-decoration: none;
 29             color: #000;
 30             font-size: 14px;
 31         }
 32         /*子菜单样式*/
 33         #rightMenu {
 34             padding: 0;
 35             margin: 0;
 36             list-style: none;
 37             border: 1px solid #ccc;
 38             height: 120px;
 39             width: 90px;
 40             display: none;
 41             position: absolute;
 42             background-color: gray;
 43         }
 44         #rightMenu li {
 45             height: 23px;
 46             border-bottom: 1px solid #ccc;
 47             line-height: 23px;
 48             text-align: center;
 49         }
 50         #rightMenu li:hover{
 51             background-color: #badcfe;
 52         }
 53         #rightMenu li:hover a {
 54             color: white;
 55         }
 56         #rightMenu li a {
 57             text-decoration: none;
 58             color: #000;
 59             font-size: 10px;
 60         }
 61     </style>
 62 </head>
 63 <body>
 64 <!-- 
 65 /**
 66  * 
 67  * @author: xiaoliu
 68  * @type: NO.17-homework2
 69  * @data: 2018-01-23
 70  * @finished: 2018-01-25
 71  * 
 72  */
 73  -->
 74 <ul id="menu">
 75     <li><a href="#">角色授权</a></li>
 76     <li><a href="#">数据字典管理</a></li>
 77     <li><a href="#">菜单管理</a></li>
 78     <li><a href="#">资源管理</a></li>
 79     <li><a href="#">系统管理</a></li>
 80 </ul>
 81 <ul id="rightMenu">
 82     <li><a href="#">子角色</a></li>
 83     <li><a href="#">子字典</a></li>
 84     <li><a href="#">子菜单</a></li>
 85     <li><a href="#">子资源</a></li>
 86     <li><a href="#">子系统</a></li>
 87 </ul>
 88 <script>
 89     window.onload = function () {
 90         var rMenu = document.getElementById("rightMenu");
 91         document.getElementById("menu").oncontextmenu = function (event) {
 92             //首先,把右键菜单显示出来
 93             rMenu.style.display = "block";
 94             //再用event对象中的值,把菜单的定位值计算出来
 95             //event.pageX 能定位鼠标的left值
 96             //event.pageY 能定位鼠标的top值
 97             //像素的赋值一定要注意单位啊啊啊啊啊啊啊 + "px" + "px" + "px"
 98             rMenu.style.left = event.pageX + "px";
 99             rMenu.style.top = event.pageY + "px";
100             //最后,把browser自带的右键禁止掉
101             return false;
102         }
103         //在最后的最后,也就是点击看到rMenu之后,当再次点击时,再把rMenu隐藏
104         //这里其实没想到是直接dom.onclick.....
105         document.onclick = function () {
106             rMenu.style.display = "none";
107         }
108     }
109 </script>
110 </body>
111 </html>

   "px"肯定特别的容易漏掉,自己觉得要是没有看别人写的代码应该是漏了,但是现在没办法,我只想快速的学好,就没有自己的思考了,ε=(′ο`*)))唉

  只能是边看边记这些属性的用法和逻辑思路,虽然有点儿囫囵吞枣的感觉,但如果完完全全自己去想不看别人写的代码,虽然很能锻炼自己的逻辑思维能力,但是无奈我太笨,每次自己想时间都不够啊啊啊啊啊╮(╯▽╰)╭

  10点从图书馆回来,处理了一些事情,已经是23:36了,时间过得真的很快。。。

  晚安,朋友们,好梦(|3[▓▓] 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【JavaScript】轮播图

下一篇:使用原生JS实现简单的ajax