收藏
PHPz批改状态：合格
老师批语：
<!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><h3 algn="center">用户注册</h3><form action="" method="get" style="display:grid;gap:0.5em"><fieldset><legend>必填项</legend><div><label for="username">用户名: </label><input type="text" name="username" id="username" autofocus required placeholder="不少于8位"/></div><div><label for="password">设置密码:</label><input type="password" name="password" id="password" required placeholder="不少于6位"/> </div><div><label for="">确认密码:</label><input type="password" name="psw" id="psw" placeholder="不少于6位"/> </div><div><label for="email">邮箱: </label><input type="email" name="email" id="email" required placeholder="demo@email.com" /></div></fieldset><div><label for="male">性别:</label><!-- 所有单选按钮的name必须相同 --><input type="radio" name="gender" value="male" id="male" checked/><label for="">男</label><input type="radio" name="gender" value="female"/><label for="">女</label></div><div><label>爱好:</label><!-- 所有复选框的name属性必须写成数组格式 --><input name="hobby[]" id="game" type="checkbox" checked/><label for="game">游戏</label><input name="hobby[]" id="swim" type="checkbox" /><label for="swim">游泳</label><input name="hobby[]" id="book" type="checkbox" checked/><label for="book">看书</label></div><div><label for="">成分:</label><select name="part" id=""><option value="1">党员</option><option value="2">团员</option><option value="3" selected>群众</option></select></div><div><label for="">搜索关键字:</label><input type="search" name="search" list="keywords"><datalist id="keywords"><option value="html"></option><option value="css"></option><option value="js"></option><option value="php"></option></datalist></div><button type="submit">马上注册</button></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>css样式的模块化</title><link rel="stylesheet" href="css/style.css" /></head><body><header>页眉</header><main>主体</main><footer>页脚</footer></body></html>
footer {height: 5em;background-color: lightgreen;}
header.css
header {height: 3em;background-color: lightblue;}
main.css
main {flex: 1;background-color: aqua;}
reset.css
* {margin: 0;padding: 0;box-sizing: border-box;}a {color: #555;text-decoration: none;}
style.css
@import url("reset.css");@import url("main.css");@import url("header.css");@import url("footer.css");@import url("public.css");
public.css
body {height: 100vh;display: flex;flex-direction: column;}
基本选择器与上下文选择器
基本选择器
<!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>/* 标签 */li {background-color: violet;}/* 属性 */li[id="foo"] {background-color: lightblue;}/* 因为id是通用且高频的属性，所以有一个快捷方式 */#foo {background-color: yellow;}.on {background-color: lightgreen;}</style></head><body><ul><li id="foo">item1</li><li>item2</li><li class="on">item3</li><li class="on">item4</li><li>item5</li></ul></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>/* 上下文选择器，就是根据位置来选择 *//* 1.后代选择器,子子孙孙全选中空格 */ul li {background-color: lightblue;}/* 2.子选择器,只匹配子一级 */body > ul > li {background-color: lightgreen;}/* 3.同级相邻选择器，加号+ */.start + li {background-color: yellow;}/* 4.同级所有选择器 ~波浪线*/.start ~ li {background-color: violet;}</style></head><body><ul><li>item1</li><li class="start">item2</li><li>item3</li><li>item4<ul><li>item-1</li><li>item-2</li><li>item-3</li></ul></li><li>item5</li></ul></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
