WebAPI(part9)--下拉菜单及留言案例

学习笔记，仅供参考，有错必纠

下拉菜单案例

<!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="#">学院建设</a><ul><li><a href="">学科建设</a></li><li><a href="">竞赛举办</a></li><li><a href="">科研成果</a></li></ul></li><li><a href="#">学子风采</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">学院构成</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.循环注册事件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>

发布留言

<!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>发布</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('您没有输入内容');return false;} else {// console.log(text.value);// (1) 创建元素var li = document.createElement('li');// 先有li 才能赋值li.innerHTML = text.value;// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[1]);}}</script>
</body></html>

WebAPI(part9)--下拉菜单及留言案例相关推荐

phpcmsV9 添加内容：如何“增加复选框、下拉菜单”（含案例、截图）- 教程篇
文章目录 phpcmsV9 添加内容:如何"增加多选框.下拉菜单"(含案例.截图)- 教程篇步骤: 效果截图:省略 phpcmsV9 添加内容:如何"增加多选框.下拉菜 ...
js的项目1:世纪佳缘、京东关闭广告、新浪下拉菜单、开关灯案例
1.世纪佳缘用户名显示隐藏内容 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
如何设计下拉菜单（技巧+实例）
下拉菜单可以说是网页设计中令人又爱又恨的元素之一了.下拉菜单有许多优点:不占地方,不需要做输入验证,所有平台都支持,技术门槛低,用户都很熟悉其使用方法.然而与之同时,下拉菜单又是最容易被错误使用的表单 ...
前端常用事件案例——抽名字（抽奖）/搜索下拉菜单/微博文本框
目录抽名字(抽奖) 搜索下拉菜单微博文本框进阶微博案例抽名字(抽奖) 实现效果是:点击开始按钮,则方框不断显示名字,点击停止,抽到的人名就是谁,并且删除,继续直到抽完后禁用按钮 ①点击开始按钮 ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
Axure 9 实战案例，动态面板的应用 4.1，省市区三级联动下拉菜单（重制简易版）
前言 Hello!欢迎来到Axure 9 实战案例教程专栏. 本次课程我们继续来学习一下,动态面板的应用.本篇我们来讲解一下,如何绘制省市区联动下拉菜单(重新撰写简易版). 下拉菜单初稿为了节省时间 ...
jQuery下拉菜单经典案例
jQuery下拉菜单经典案例源码: <!DOCTYPE html> <html lang="en"><head><meta charse ...
实战案例:横向和纵向的三级下拉菜单需要掌握hover
实战案例:横向和纵向的三级下拉菜单需要掌握hover 三级下拉一. 横向三级二.纵向三级 1.两个ul绝对定位做横向(推荐) 2.两个ul相对定位做竖向(推荐) 3.两个ul绝对定位配合li相对定 ...

WebAPI(part9)--下拉菜单及留言案例

下拉菜单案例

发布留言

WebAPI(part9)--下拉菜单及留言案例相关推荐

最新文章

热门文章