收藏
PHPz批改状态：合格
老师批语：很好，总结的不错，效果也很好，下次在“我的课程作业”中提交作业。
css中的状态伪类很多，在表单中，常用的主要有：
:focus——-元素获得焦点:checked——-元素被选择，或者默认选择:disabled——-元素被禁用:required——-元素被强制要求必须填写:hover——-鼠标悬停在元素上时候，适合于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><link rel="stylesheet" href="form-fake.css"></head><body><form action="" method="post" enctype="multipart/form-data" name="" ><fieldset><legend style="color:blue"><b>基本信息</b></legend><br><div><label for="uname">姓 名: </label><input type="text" maxlength="30" name="username" id="uname" required></div><br><div><label for="secret">性 别: </label>男<input type="radio" name="gender" id="male" value="male">女<input type="radio" name="gender" id="female" value="female">保密<input type="radio" name="gender" id="secret" value="secret" checked></div><br><div><label for=""pwd">密 码: </label><input type="password" name="" id="pwd" required></div><br><div><label for="jg">籍 贯: </label><input type="text" name="jg" id="jg" disabled></div><br><div><label for="tel">手机号：</label><input type="number" name="tel" id="tel"></div><br><div><label for="qq">QQ 号: </label><input type="number" name="qq" id="qq" min="3" max="30"></div><br><div><label for="birth">生 日：</label><input type="date" name="birthday" id="birth" value="2022-10-19" min="1900-01-01" max="2099-12-31"></div><br><div><label for="email">邮 箱：</label><input type="email" name="email" id="email"></div><br><div><label for="url">博 客： </label><input type="url" name="url" id="url"></div><br></fieldset><br><br><fieldset><legend style="color:blue"><b>附加信息</b></legend><div><label for="">兴趣爱好：</label><input type="checkbox" name="hobby[]" value="sport" id="sport">体育<input type="checkbox" name="hobby[" id="read" value="read">读书<input type="checkbox" name="hobby[]" id="music" value="music">音乐<input type="checkbox" name="hobby[]" id="art" value="art">艺术<input type="checkbox" name="hobby[]" id="eat" value="eat">美食<input type="checkbox" name="hobby[]" id="other" value="other">其他</div><br><div><label for="edu">最高学历</label><select name="edu" id="edu"><option value="" disabled selected>--请选择--</option><optgroup label="义务教育">义务教育<option value="幼儿园">幼儿园</option><option value="小学">小学</option><option value="初中">初中</option></optgroup><optgroup label="中等教育"><option value="高中">高中</option><option value="中专">中专</option></optgroup><optgroup label="高等教育"><option value="大专">大专</option><option value="本科">本科</option><option value="硕士">硕士</option><option value="博士">博士</option></optgroup></select></div><br><div><label for="lang">精通语言</label><input type="search" name="search" id="search" list="details"><datalist id="details"><option value="php">php</option><option value="html">html</option><option value="javascript">javascript</option><option value="css">css</option><option value="python">python</option><option value="java">java</option><option value="c++">c++</option><option value=".net">.net</option></datalist></div></fieldset><br><br><fieldset><legend style="color:blue"><b>其他信息</b></legend><div><label for="avatar">上传头像：</label><input type="file" name="avatar" id="avatar"></div><br><div><label for="sfzzm">身份证正面：</label><input type="file" name="sfzzm" id="sfzzm"></div><br><div><label for="sfzfm">身份证反面：</label><input type="file" name="sfzzm" id="sfzfm"></div><br><div><textarea name="jianjie" id="jianjie" cols="30" rows="10" placeholder="请输入个人简介"></textarea></div></fieldset><br><div><button type="submit" value="提交">提交</button></div></form></body></html>
上例中用到的状态伪类css代码如下
input:focus {background-color: lightgreen;cursor:pointer;transition:0.4s;}input:checked {background-color: lightblue;}input:hover {color:red;font-size:large;}input:required {border-radius:1px 2px 2px;}input:disabled {background-color: lightcyan;font-weight: bold;}
margin\border\padding\width\height;border;margin\padding;box-sizingbox-sizing:content-box,如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。box-sizing:border-box,告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。margin来表示；margin会出现塌陷的问题，两个元素之间的距离不是margin-bottom与margin-top之间的和，而是选择他们之中的最大的，如果两个相等，则等于其中的一个值margin\border\padding常用的有以下4种方式，以顺时针方向为准padding为例padding: 5px 10px 15px 20px;——分别表示：上、右、下、左四个方向的内边距。padding: 5px 10px 15px;——分别表示：上、左右、下方向的内边距padding: 5px 10px;—— 分别表示上下、左右方向的内边距padding: 10px;等价于padding: 10px 10px 10px 10px;，表示上下左右四个方向的内边距全部相等。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
