1、表单与后台框架轻量级开发演示
1.1、效果图
1.2、代码演示
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title></head><body> <form action="check.php" method="post" onsubmit="return false"><div><!--for和id属性值相同，进行绑定，展示为一行--><label for="uname"> 用户名： </label><input type="text" id="uname" autofocus></div><div><label for="psw">密 码： <input type="password" id="psw" name="password"> <button onclick="showpassword">查看密码</button></label></div><!--文本框--><div><label for="sercit">性 别：</label> <input type="radio" id="male" name="sex" value="male" checked> <label for="male">男</label> <input type="radio" id="female" name="sex" value="female"> <label for="female">女</label> <input type="radio" id="sercit" name="sex" value="sercit"> <label for="sercit">保密</label></div><div> <label for="sercit">爱 好：</label> <input type="checkbox" id="male" name="hobby[]" value="male" checked> <label for="male">语文</label> <input type="checkbox" id="female" name="hobby[]" value="female"> <label for="female">数学</label> <input type="checkbox" id="sercit" name="hobby[]" value="sercit" checked> <label for="sercit">化学</label> </div> <div> <label for="">搜索来源：</label> <select name="" id=""> <option value="1">百度</option> <option value="2">谷歌</option> <option value="3">搜狗</option> <option value="4" selected>360搜索</option> </select> </div> <div><label for="mail">电子邮箱：</label><input type="text" name="mail"> </div><div> <button type="submit">提交</button></div> </form> <div> <video src="https://v.youku.com/v_show/id_XNTIwMTQzOTM4NA==.html?spm=a2ha1.14919748_WEBHOME_GRAY.drawer7.d_zj4_1&s=fcdd382e1d1f40ba8572&scm=20140719.manual.29095.show_fcdd382e1d1f40ba8572" width="400px" height="300px" controls autoplay poster="https://img.php.cn/upload/aroundimg/000/000/001/62b2806382aa1939.png"></video> </div><hr><!----通过name属性和target进行标签绑定srcdoc支持html标签--> <a href="https://map.baidu.com/@12609384.2,2631450.58,12z" target="map">深圳市地图</a> <br> <iframe src="https://map.baidu.com/@12609384.2,2631450.58,12z" name="map" width="400px" height="300px" frameborder="0"></iframe></body></html>
2、网站后台框架结构演示
2.1、后台框架图片展示效果
2.2、后台框架图片展示代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网站后台内容管理系统演示</title> <style>body{weight:auto;width:auto} </style></head><body bgcolor="#fff"><p><h1>网站后台内容管理系统演示</h1></p> <a href="https://www.php.cn/static/images/new/logo.png" target="menu"> <img src="https://www.php.cn/static/images/new/logo.png" height="15px" alt="logo"></a> <a href="https://www.php.cn/" target="menu">首页</a> <a href="https://www.php.cn/course.html" target="menu">视频教程 </a> <a href="https://www.php.cn/course/type/3.html" target="menu">学习路径</a> <a href="https://www.php.cn/k.html" target="menu">PHP培训</a> <a href="https://www.php.cn/xiazai/" target="menu">资源下载</a> <a href="https://www.php.cn/article.html" target="menu">技术文章</a> <a href="" target="menu">社区</a> <a href="https://www.php.cn/app/" target="menu">APP下载</a><br> <iframe src="" frameborder="1" name="menu" height="100px" width="500px"></iframe><p><img src="https://www.php.cn/static/images/bg-teacher.png" height="50px" alt=""></p> <p>用户名：西门瑶雪 <span>退出登录</span></p><hr><ul> <li><a href="https://www.php.cn/" target="nav">主页</a></li> <li><a href="https://www.php.cn/course.html" target="nav">课程</a></li> <li><a href="https://www.php.cn/member/1043975/asks.html" target="nav"> 社区</a></li> <li><a href="https://www.php.cn/blog/rankyun.html" target="nav">博客</a></li> <li><a href="https://www.php.cn/user/order.html" target="nav">订单</a></li> <li><a href="https://www.php.cn/user/wages.html" target="nav">赚钱</a></li> <li><a href="https://www.php.cn/user/vip/" target="nav">会员</a></li></ul><iframe src="" frameborder="1" name="nav" height="100px" width="500px"></iframe></body></html>
