任务目标

通过CSS盒子模型相关属性美化新云课堂用户注册页面。

任务要求

（1）参考下图所示效果对4.3任务制作的用户注册页面进行美化，在reg.html文件中完成。

（2）表单水平居中；表单背景色#eeeeee，边框宽度为1像素、黑色直线，并设定四角20像素圆角。

（3）添加盒子外阴影效果，向右、向下各偏移2像素，阴影颜色为#666666，扩散范围4像素。

（4）标题文字为白色，背景色为#002752，上下内边距20像素。

（5）表单内容水平居中。

（6）表单内的“注册账户”文本框和“注册密码”“确认密码”密码框高度为字体大小的2倍。

（7）将左侧文字与右侧输入框进行控件绑定。

效果图如下：

任务实施

（1）对已完成的登录页面内容进行备份并修改。

（2）设定登录表单的宽度，并使用外边距属性设定水平居中，设定内部内容水平居中，设定圆角效果等。

（3）设定标题部分相关样式，并使用增加等距上、下内边距的方式实现文本垂直居中。

（4）设定表单内部div标签下外边距的方式实现内容部分垂直间距。

教学微课

教学课件

经验分享

上图开发者工具界面中，styles分页栏和computed分页栏都是显示对应元素的样式内容，不同点是：

style分页栏中显示的时原始的样式内容，并且对应的盒子模型结构图出现在最下方位置；

computed分页栏中的显示的时最终生效的样式内容，并且在最上方显示盒子模型结构图。

能量贴士

居上位而不骄，在下位而不忧。语出《周易》。