从昨天朱老师的教导下我们首页明白要完成需要用到什么
- HTML 中的 ul li a这样的结构 并且里面下拉的话还在li下面创建ul
- CSS中样式表 需要用到 margin 颜色 等
- 和JavaScript中的 事件监听和代理 PS：有点难理解
个人理解
1. 首先ul+li 是个无序列表 并且还可以在里面套列表 ul 2. ol+li 是一个有序列表 如1 2 3 A B 3. dt dl dd 是一个自定义列表 友联中常有用到 4. a标签可以用来跳转包含各种协议开头的跳转 用herf来配合使用 4.1 还有描点等功能 并且可以在很多Html标签配合使用 如列表 5. 今天CSS讲的一下单词 5.1 position 位置; 方位; 地点; 姿势; 位置安排; 安置方式; 处境; 状况; 观点; 立场; 头寸; 额度; 持有状态; 命题; 原则; 主张 5.2 static static （静态定位）：默认值。没有定位，元素出现在正常的流中 5.3 position:static; 常这样组合使用 5.4 border 边框 solid 样式 border:1px solid #000 这样使用 5.5 height 高度 width 宽度 px像素 ev 可视化窗口高度(viewport) 5.6 相对定位：元素相对于自己在文档流中的原始位置偏移 5.7 position 代表定位 relative 代表相对定位 5.8 top 高度 往下移 left 左边 往右移 5.9 相对于自己进行定位 5.10 position 代表定位 值是绝对定位 absolute 5.11 绝对定位 是相当于当前窗口定位 如body 或者上一级 5.12 body默认就是所有定位的参考 relative 5.13 绝对定位一定要有参照物 上级或者父级 没有默认就是body 5.14 “盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。 5.15 等等等还不是特别明白
htm源码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 边 盒模型 */ * { margin: 0; /* 小圆点消失了 */ /* padding 内边距 */ padding:0; /* 规定两个并排的带边框的框： */ box-sizing: border-box; } /* 设置a元素的颜色 */ a{color: #bbb; /* 设置 元素的文本修饰： */ text-decoration: none;} /* 设置唯一ID属性 */ #nav{ background-color:#000; height:50px; line-height:50px; } li{ /* 把图像设置为列表中的列表项目标记 */ list-style: none; /* 边 盒模型 */ margin: 0 10px; /* 左浮动 */ float: left; } /* 从#nav、定位进去li在定位进a标签加个鼠标效果 */ #nav>li>a:hover { color: white; } /* 定位到nav的第一层li */ #nav>li{ /*position 代表定位 relative 代表相对定位 */ position: relative; } /* 定位到nav的第一层li的里面的ul */ #nav>li>ul{ /*position 代表定位 absolute 代表绝对定位 */ position: absolute; /* top高度 向下移 */ top:50px; /* 宽度 */ width:180px; /* 边框 样式 颜色 */ border: 1px solid #aaa; /* 设置上边框的样式 */ border-top: none; } #nav>li>ul>li a{ display: inline-block; height: 50px; color: #444; } #ul.sub li:hover{ background-color: #eee; } /* 初始化不要显示子菜单 */ #nav>li>ul{ display: none; } </style></head><body> <ul id="nav"> <li> <a href="">首页</a></li> <li> <a href="">视频教程</a></li> <li> <a href="">资源下载</a> <ul> <li> <a href="">PHP工具</a></li> <li> <a href="">在线手册</a></li> <li> <a href="">学习课件</a></li> <li> <a href="">网站源码</a></li> </ul> <li> <a href="">社区问答</a> </li> <li> <a href="">技术文章</a> <ul> <li> <a href="">头条</a> </li> <li> <a href="">博客</a> </li> <li> <a href="">PHP教程</a> </li> <li> <a href="">PHP框架</a> </li> </ul></li></li></body><script> //获取所有的主导航 const navs = document.querySelectorAll("#nav > li"); navs.forEach(function (nav) { // 鼠标移入时，显示子菜单 nav.addEventListener('mouseover',shouwSunMenu); // 鼠标移出时, 关闭子菜单 nav.addEventListener('mouseout',closewSunMenu); }); // 显示子菜单 function shouwSunMenu(ev){ console.log(ev.target); // 当前这个导航栏有没有子菜单 if(ev.target.nextElementSibling !== null){ ev.target.nextElementSibling.style.display = "block"; } } // 关掉子菜单 function closewSunMenu(ev){ if(ev.target.nodeName === "A" && ev.target.nextElementSibling !== null){ ev.target.nextElementSibling.style.display = "none"; } }</script></html>
总结
- CSS能理解 不熟练
- Javascript 还是有点懵 最近还是要加强
