用户登录

在文档里添加一个 div 元素,在元素上面加上一个类,名字是 app。在这个元素里再嵌套一个 div 元素,文字是 1,在元素上添加两个类,一个是 box ,一个是 one。

复制一份,再添加一个 div 元素,上面加上 box 还有 two 这两个类,文字改成 2。再复制一份,元素上添加一个 box ,还有一个 three 这个类。文字改成 3。

下面再去设计一下相关的样式,先用 #app 作为选择器写一段样式,把宽度设置成 300 像素,高度设置成 300 像素。background-color 是 #69f0ae。

再用 border 添加 3 个像素的实线边框,边框的颜色是 black。然后用 margin 添加 32 像素的外边距。

下面再用 .box 这个类的名字作为选择器写一段样式,把 min-height 最小高度设置成 72 像素,font-size 是 18 像素,font-weight 设置成 bold。 padding 添加 8 个像素的内边距,再用 border 添加 1 个像素的实线边框,颜色是黑色。然后用 box-shadow 添加一个阴影效果,3px 3px 0 black。

再分别设置一下这两个 .box 的背景颜色,用 .box.one 作为选择器,用一下 background-color 这个样式属性,把元素的背景颜色设置成 #9081f0。

下面再用 .box.two 作为选择器,把元素的 background-color 设置成 #f0dc5d。

然后用 .box.three 作为选择器,把 background-color 设置成 #f06551。

准备项目《 Web 基础:界面布局 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点