收藏
PHPz批改状态：合格
老师批语：
<form action="" method="post"><div><label for="username">用户名:</label><input type="text" name="username" id="username" value="" placeholder="至少8位" required autofocus /></div><div><label for="email">邮箱：</label><input id="email" type="email" name="email" value="" placeholder="输入用邮箱" autofocus required/></div><div><label for="pas">密码：</label><input id="pas" type="password" name="password" value="" placeholder="输入密码" autofocus required/></div><div><label for="secret">性别:</label><input type="radio" name="gender" id="male" value="male" /><label for="male">男</label><input type="radio" name="gender" id="female" value="female" /><label for="female">女</label></div><div><label>爱好:</label><input type="checkbox" name="hobby[]" id="game" value="game" /><label for="game">游戏</label><input type="checkbox" name="hobby[]" id="trave" value="trave" /><label for="trave">旅游</label><input type="checkbox" name="hobby[]" id="shoot" value="shoot" /><label for="shoot">摄影</label></div><div><select name="level"><option value="1">铜牌会员</option><option value="2">银牌会员</option><option value="3">金牌会员</option><option value="4">永久会员</option></select></div><div><label for="">搜索关键字:</label><input type="search" name="search" list="keywords" /><datalist id="keywords"><option value="html">html</option><option value="css">css</option><option value="js">js</option><option value="javascript">javascript</option></datalist></div><div><button>提交</button><button type="reset">重置</button></div></form>
<!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>iframe小后台</title><style>body{background:lightblue;}.header{text-align: center;}.main{display: flex;}.main iframe {width: calc(100vw - 10em);height: calc(100vh - 6em);border-left: 1px solid currentColor;}.foot{text-align: center;}</style></head><body><!-- 头部 --><div class="header"><h3>小后台</h3></div><!-- 主要内容 --><div class="main"><!-- 左侧导航 --><ul><li><a href="demo5.html" target="content">菜单1</a></li><li><a href="demo5.html" target="content">菜单2</a></li><li><a href="demo5.html" target="content">菜单3</a></li><li><a href="demo5.html" target="content">菜单4</a></li></ul><!-- 右侧内容区 --><iframe src="https://www.php.cn/" frameborder="2" name="content"></iframe></div><!-- 底部 --><div class="foot"><a href="https://www.php.cn/">Copyright ICP备2020058653号-1</a></div></body></html>
（1）样式来源
<!-- 1.代理样式/浏览器样式/默认样式 --><h3>nihao</h3><!-- 2: 自定义样式, 会覆盖默认样式 --><h3 style="color: red;">nihao</h3><!-- 3.书写顺序,写在后面的同名属性会覆盖前面的 --><div><a href="">nihao</a></div>
（2）样式优先级
<!-- 样式优先级 --><div>普通没设样式：<span>hello</span></div><div>class样式：<span class="test">hello</span></div><div>id样式：<span class="test" id="test">hello</span></div><div>行内样式：<span style="color: chartreuse;" class="test" id="test">hello</span></div><div>!important样式：<span style="color: chartreuse;" class="test test2" id="test">hello</span></div>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
