简单的注册页面
<!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></head><body><form action="check.php"><h2>注册</h2><div><label for="username">用户名：</label><input type="text" id="username" name="username" placeholder="请输入用户名" autofocus></div><div><label for="psd">密码：</label><input type="password" id="psd" name="psd"></div><div><label for="secret">性别：</label><input type="radio" id="male" name="sex" value="male"><label for="male">男</label><input type="radio" id="female" name="sex" value="female"><label for="female">女</label><input type="radio" id="secret" name="sex" value="secret" checked><label for="secret">保密</label></div><div><label for="ball">爱好：</label><input type="checkbox" id="sing" name="hobby[]" value="sing"><label for="sing">唱</label><input type="checkbox" id="jump" name="hobby[]" value="jump"><label for="jump">跳</label><input type="checkbox" id="rap" name="hobby[]" value="rap" ><label for="rap">Rap</label><input type="checkbox" id="ball" name="hobby[]" value="ball" checked><label for="ball">篮球</label></div><div><label for="edu">学历：</label><select name="edu" id="edu"><option value="0" selected disabled>--请选择--</option><option value="1">高中</option><option value="2">大学</option><option value="3">研究生</option></select></div><div><label for="">生日：</label><input type="date" name="" id=""></div><div><button>提交</button></div></form></body></html>
效果：
简单的后台管理系统
<!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>.header {display: flex;align-items: center;background-color: aquamarine;height: 100px;}body .header div {margin-left: auto;}.nav ul {display: flex;list-style: none;}.nav ul li {padding: 1em;}.iframe iframe{width: 100%;height: 600px;}</style></head><body><div class="header"><h2>网站管理后台</h2><div><em>user</em><a href="loginout.html">退出</a></div></div><div class="nav"><ul><li><a href="../0704属性-布局-列表-表格/demo.html" target="content">属性</a></li><li><a href="../0704属性-布局-列表-表格/demo2.html" target="content">列表</a></li><li><a href="../0704属性-布局-列表-表格/demo3.html" target="content">表格</a></li></ul></div><div class="iframe"><iframe src="" frameborder="1" name="content"></iframe></div></body></html>
效果：
