用户登录

我已经把这组卡片组件的内容都准备好了 .. 你可以把项目切换到特定的标签上,这样你就会看到这些内容 .. 打开命令行,在项目所在的目录的下面 .. 执行一下 git checkout v8.2.3-start

下面我们去给这些卡片组件设计样式 .. 在项目的 app 目录下面的 styles 这里,创建一个样式文件 .. 名字是 _card.scss

再打开 main.scss ... @import ,导入 card

回到这个 card 样式 .. 每个卡片组件的包装上面都有一个 .ui.card ,表示同时包含 ui 还有 card 这两个类的元素 ..

先用一个 background ,把容器的背景设置成白色 #fff

再把卡片的图像包装里面的图片的宽度设置成 100% ..

.image > img {width: 100%}

然后是内容的样式 .. 内容的包装上面有个 .content 类,用它作为这块样式的选择器 .. 先用一个 padding ,添加点内边距 .. 大小是 40 像素 ..

再让底部的内边距大一些 .. padding-bottom ... 大小是 56 像素 ..

再设置一下大标题 ... 可以把这个样式嵌套在这个 content 里面 .. > .header ... 这个大于号的意思是,这个 header 是 content 的直接子元素 ..

因为这个样式嵌套在了 content 里面,所以大于号的前面就相当于是这个 .content ..

里面用一个 font-size .. 设置一下字号 .. 大小是 24px .. 再用一个 margin ,把外边距设置成 0 .. 大标题的下面可以添加点外边距 .. margin-bottom ,大小是 24像素 ..

再设计一下子标题的样式 .. .sub.header .. 字号设置成 14px .. font-weight 设置成 600 ... 然后添加点字间距,用的是 letter-spacing ,大小是 3 像素 ..

再让它里面的内容变成大写的 .. 把 text-transform 的值设置成 uppercase

.sub.header {
font-size: 14px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
}

在我们的设计里标题的下面有一条小横线 .. 这个小横线的样式我们可以把它放在标题元素的 after 这个伪元素上面 ..

这个样式选择器可以这样写 ..

> .header:after

:after 就是设置一下元素的 after 这个伪元素 .. 里面先用一个 content .. 设置一下这个 after 里的内容 .. 用一个空白的字符 .. 再添加一个 display 属性,把它设置成块级元素 .. block ..

再用一个 border-bottom,在它下面添加一个边框 .. 大小是 2 像素, solid ,表示实线,颜色是 #000,表示的是黑色 ..

再用一个 padding-bottom ,添加一个 8 像素的底边儿的内边距 ..

> .header:after {
content: " ";
display: block;
border-bottom: 2px solid #000;
width: 40px;
padding-bottom: 8px;
}

然后是内容里的描述 ... .description .. 给它添加一个 8 像素的底边儿的外边距 ...

现在我们这个卡片组件的样式,就基本上做好了 ...

卡片组件:样式《 网页设计案例:卡片组件 》

统计

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

社会化网络

关于

微信订阅号

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