登陆表单代码及实例
代码：
<!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>Document</title></head><body><form action=""><div><label for="username">用户名：</label><input type="text" name="username" id="username"></div><div><label for="psw">密码：</label><input type="password" name="psw" id="psw"></div><div><label for="mymail">邮箱：</label><input type="email" name="mymail" id="mymail"></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>Document</title><style>body {height: 100vh;width: 100vw;display: grid;grid-template-columns: 10em 1fr;grid-template-rows: 6em 1fr;margin: 0;}body .header {grid-column-end: span 2;border-bottom: 1px solid currentColor;background-color: #efe;padding: 2em;display: flex;align-items: center;}body .header div {margin-left: auto;}body .nav {background-color: #efc;margin: 0;padding-top: 1em;list-style: none;}body iframe {width: calc(100vw - 10em);height: calc(100vh - 6em);border-left: 1px solid currentColor;}</style></head><body><div class="header"><h1>管理后台</h1><div><span>admin</span><a href="">退出</a></div></div><ul class="nav"><li><a href="demo1.html" target="content">菜单选项1</a></li><li><a href="demo2.html" target="content">菜单选项2</a></li><li><a href="demo3.html" target="content">菜单选项3</a></li><li><a href="demo4.html" target="content">菜单选项4</a></li><li><a href="demo5.html" target="content">菜单选项5</a></li></ul><iframe srcdoc="<h3>此处显示菜单选项" frameborder="2" name="content"></iframe></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>Document</title><style>body {color: red;}</style></head><body><h1>hello</h1></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>Document</title><style>body {color: red;}</style></head><body><h1 style="color: blue;">hello</h1></body></html>实例图片
