任务目标

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

任务要求

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

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

（3）溢出部分隐藏处理；添加盒子外阴影效果，向右、向下各偏移2像素，阴影颜色为#666666，扩散范围4像素。

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

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

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

（7）表单内的“登录”、“密码”与其右侧对应的输入框进行控件绑定。

效果图如下：

任务实施

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

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

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

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

教学微课

教学课件

经验分享

IE盒子模型和标准盒子模型都十分重要，并不是只有标准模型会用到。当我们在一些情况下，如元素的内容宽高不确定的，而对于元素的完整盒子宽高需要确定时，使用标准盒子模型的话，需要计算每个部分的宽高，如果内容宽高有变化，就需要通过对应的内边距或边框去补偿对应的变化；而如果时IE盒子模型的话，则只要去指定元素宽高即可，内边距的宽高会自动补偿，使得元素宽高 = 内容宽/高 + 左右/上下内边距 + 左右/上下边框公式成立。

能量贴士

穷则变，变则通，通则久。语出《周易》。