用户登录

产品页上的英雄区跟之前我们为首页设计的英雄区的样式有点区别。这块文字会大一点,并且会显示在页面的底部 ..

先找到产品页的英雄区 .. .在这个 item 元素上,再添加一个 css 类 .. big white bottom .. big 是大,white 是白色,bottom 是底部 . 回到英雄区的样式文件 ..

先添加一个 .white ... 设置一下文字的颜色 ... 设置成白色 ..

再添加一个 .big ,里面嵌套一个 header ,先设置一下大号的标题 ... font-size 设置成 56px .. letter-spacing 设置成 8 像素 ...

再去设置一下大号的 .sub.header ... font-size 字号设置成 24px ,letter-spacing 字间距设置成 16px ... 再改一下字体 ... font-family: 'PingFangSC-Ultralight';

然后是 bottom ... 内容要显示在英雄区的底部 .. 里面嵌套一个 content .. 它里面用一个 align-items .. 设置成 flex-end ... 再给它添加一点下边儿的边距 ... padding-bottom: 4% ..

调整一下浏览器的窗口尺寸 .. 再回到样式文件,设置一下英雄区在小尺寸的设备上的样式 ... 找到这个 max-width: 767px 的媒体查询 ..

在内容元素上,用一下 color 设置一下文字的颜色 .. #000 表示黑色 .. align-items 设置成 center ,让内容居中 ..

大标题的字间距可以小一点,把 letter-spacing 设置成 4px ..

再添加一个 .sub.header ... font-size 字号是 16px ... letter-spacing 字间距设置成 8px ..

这样我们的英雄区在产品页面上的样式就做好了 ...

英雄区样式的变化《 网页设计案例:产品页 》

统计

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

社会化网络

关于

微信订阅号

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