1021——状态伪类和盒模型

1021——状态伪类和盒模型

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; fontweight: 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值语法:上下左右相等

批改老师:PHPz 批改状态:合格 老师批语:总结的不错,优质资源网点我wcqh.cn 实现效果也很好, 以后的作业标题还是不要带有时间, 可以根据作业内容来取标题
作者最新博文
2022-10-15 06:47:07

© 版权声明
THE END
喜欢就支持一下吧
点赞698 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容