700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 【博主推荐】html下拉框树形(附好看的登录界面)

【博主推荐】html下拉框树形(附好看的登录界面)

时间:2019-06-28 14:10:18

相关推荐

【博主推荐】html下拉框树形(附好看的登录界面)

文章目录

【博主推荐】html下拉框树形(附好看的登录界面)下拉框示例下拉框代码登录1示例登录1代码登录2示例登录2代码资源下载

【博主推荐】html下拉框树形(附好看的登录界面)

【博主推荐】html下拉框树形(附好看的登录界面),完善的树形下拉框功能,根据自定义层级规则展开,可以直接嵌入项目,还附带两个漂亮的登录界面

下拉框示例

下拉框代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><HTML><HEAD><TITLE>【博主推荐】html下拉框树形(附源码)</TITLE><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="dtreeck.css"><SCRIPT language="Javascript" type="text/javascript" src="dtreeck.js"></SCRIPT><SCRIPT language="Javascript" type="text/javascript" src="jquery.js"></SCRIPT><style type="text/css">body,td,th {font-size: 12px;font-family:STSong,华文宋体;}</style></HEAD><BODY><div style="margin:50px 0 0 50px;"><dl><dd style="float:left; line-height:28px; margin:0 5px 0 0;">部门名称:</dd><dt><form method="post" id="regform"><input type="text" id="menu_parent_name" style="width:200px; cursor:pointer; background:url(imgmenu/ico1.png) no-repeat center right; border:solid 1px #A0A0A0; height:24px; text-indent:0.5em;"> <input type="hidden" id="menu_parent" name="menu_parent"><input type="hidden" id="oprate" name="oprate"><input type="hidden" id="menu_id" name="menu_id"></form></dt></dl></div><div id="treediv" style="display: none; margin:-1px 0 0 0; position:absolute;overflow:auto; width:190px; height:200px; padding: 5px;background: #fff;color: #fff;border: 1px solid #cccccc"></div></BODY></HTML>

登录1示例

登录1代码

<!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录页面</title><link rel="stylesheet" type="text/css" href="css/normalize.css" /><link rel="stylesheet" type="text/css" href="css/demo.css" /><link rel="stylesheet" type="text/css" href="css/component.css" /><!--[if IE]><script src="js/html5.js"></script><![endif]--></head><body><div class="container demo-1"><div class="content"><div id="large-header" class="large-header"><canvas id="demo-canvas"></canvas><div class="logo_box"><h3 style="font-family:STSong,华文宋体;">树形管理系统后台</h3><form action="#" name="f" method="post"><div class="input_outer"><span class="u_user"></span><input name="logname" class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入账户"></div><div class="input_outer"><span class="us_uer"></span><input name="logpass" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="password" placeholder="请输入密码"></div><div class="mb2"><a class="act-but submit" href="javascript:;" style="color: #FFFFFF">登录</a></div></form></div></div></div></div><script src="js/TweenLite.min.js"></script><script src="js/EasePack.min.js"></script><script src="js/rAF.js"></script><script src="js/demo-1.js"></script></body></html>

登录2示例

登录2代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="/1999/xhtml"><HEAD><META content="IE=11.0000" http-equiv="X-UA-Compatible"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITLE>登录页面</TITLE> <SCRIPT src="js/jquery-1.9.1.min.js" type="text/javascript"></SCRIPT><META name="GENERATOR" content="MSHTML 11.00.9600.17496"></HEAD> <BODY><DIV class="top_div"></DIV><DIV style="background: rgb(255, 255, 255); margin: -100px auto auto; border: 1px solid rgb(231, 231, 231); border-image: none; width: 400px; height: 200px; text-align: center;"><DIV style="width: 165px; height: 96px; position: absolute;"><DIV class="tou"></DIV><DIV class="initial_left_hand" id="left_hand"></DIV><DIV class="initial_right_hand" id="right_hand"></DIV></DIV><P style="padding: 30px 0px 10px; position: relative;"><SPAN class="u_logo"></SPAN> <INPUT class="ipt" type="text" placeholder="请输入用户名或邮箱" value=""> </P><P style="position: relative;"><SPAN class="p_logo"></SPAN> <INPUT class="ipt" id="password" type="password" placeholder="请输入密码" value=""> </P><DIV style="height: 50px; line-height: 50px; margin-top: 30px; border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;"><P style="margin: 0px 35px 20px 45px;"><SPAN style="float: left;"><A style="color: rgb(204, 204, 204);" href="#">忘记密码?</A></SPAN> <SPAN style="float: right;"><A style="color: rgb(204, 204, 204); margin-right: 10px;" href="#">注册</A> <A style="background: rgb(0, 142, 173); padding: 7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold;" href="#">登录</A> </SPAN> </P></DIV></DIV></BODY></HTML>

资源下载

【博主推荐】html下拉框树形(附好看的登录界面)

———— 相关资源

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。