1 举例说明状态伪类

<style> form{ margin-left: 36%; } fieldset{ width: fit-content; background: radial-gradient(circle at 50% 0, rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), radial-gradient(circle at 6.7% 75%, rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%); } div{ margin: 10px; } div span{ color: red; } .tijiao{text-align优质资源网点我wcqh.cn: center; }

必填

/* 必填 */ input:required { border:1px solid black;}

效果如下：

被选中

/* 被选中 */ input:focus { border:1px solid silver;}

悬停

/* 鼠标在按钮时悬停切换成手势图标,字体变粗,颜色变成棕色 */ div button:hover{ color: brown; font–weight: bolder; cursor:pointer;}</style>

<formaccept=“register.php”method=“post”><fieldset><legend>用户注册</legend><!– 用户名 —优质资源网点我wcqh.cn><div><labelfor=“username”>用&nbsp;&nbsp;户&nbsp;&nbsp;名: </label><inputid=“username”name=“username”type=“text”required/><span>*</span></div><!– 密码 –><div><labelfor=“password”>密 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码: </label><inputid=“password”name=“password”type=“text”required/><span>*</span></div><!– 确认优质资源网点我wcqh.cn密码 –><div><labelfor=“repwd”>确认密码: </label><inputid=“repwd”name=“repwd”type=“text”required/><span>*</span></div><div><labelfor=“email”> 用户邮箱:</label><inputid=“email”name=“email”type=“email”/><span>*</span></div><divclass=“tijiao”><button>注册</button><button>取消</button></div></fieldset></form>

盒模型

2.1 盒模型优质资源网点我wcqh.cn的五个核心属性：

width —- 宽度 height —- 高度 border —- 边框 margin —- 外边距 padding —-内边距 <style>.box{ width:200px; height:120px; margin:30px; padding:30px; border:5px solid rgb(152,46,46);}</style><divclass=“box”></div>

属性指示如下：

2.2 padding margin 简记规则

1 盒子的顺时针方向；

4值语法:上，右，下，左3值语法:上，左右，下2值语法:上下，左右1值语法:上下左右相等