WebAPI(part9)--下拉菜单及留言案例
生活随笔
收集整理的這篇文章主要介紹了
WebAPI(part9)--下拉菜单及留言案例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
學(xué)習(xí)筆記，僅供參考，有錯必糾
下拉菜單案例
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}</style> </head><body><ul class="nav"><li><a href="#">學(xué)院建設(shè)</a><ul><li><a href="">學(xué)科建設(shè)</a></li><li><a href="">競賽舉辦</a></li><li><a href="">科研成果</a></li></ul></li><li><a href="#">學(xué)子風(fēng)采</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">學(xué)院構(gòu)成</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li></ul><script>// 1. 獲取元素var nav = document.querySelector('.nav');var lis = nav.children; // 得到4個小li// 2.循環(huán)注冊事件for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block';}lis[i].onmouseout = function() {this.children[1].style.display = 'none';}}</script> </body></html>
發(fā)布留言
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}</style> </head><body><textarea name="" id=""></textarea><button>發(fā)布</button><ul></ul><script>// 1. 獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注冊事件btn.onclick = function() {if (text.value == '') {alert('您沒有輸入內(nèi)容');return false;} else {// console.log(text.value);// (1) 創(chuàng)建元素var li = document.createElement('li');// 先有l(wèi)i 才能賦值li.innerHTML = text.value;// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[1]);}}</script> </body></html> 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的WebAPI(part9)--下拉菜单及留言案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WebAPI(part8)--节点操作
- 下一篇： windows下OpenCV安装教程（小