本文摘自PHP中文网,作者Guanhui,侵删。
第一步:确定 HTML 代码结构
在创建 HTML 代码前,你首先应该想象它的结构。当你有一个好的模型时,应该第一时间把你想象的页面结构或者你的 CSS 模块及时地在纸上罗列出来。一个设计合理、结构良好的 HTML 页面会让你在接下来的工作过程中变的一异常轻松。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | < a id = "case-title" href = " http://www.loveo.cc/using-css-to-make-cards-ui.html" >
利用css制作卡片UI -- 墨丶水瓶
</ a >
< div class = "card" >
< a href = "#." >
< div class = "card-image" >
< img src = "http://www.loveo.cc/wp-content/uploads/2017/02/card-image.jpg"
alt = "Orange" />
</ div >
< div class = "card-body" >
< div class = "card-date" >
< time >
20 Novembre 1992
</ time >
</ div >
< div class = "card-title" >
< h3 >
Lorem Ipsum
</ h3 >
</ div >
< div class = "card-exceprt" >
< p >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam voluptatibus
autem consectetur voluptate facere at, omnis ab optio placeat officiis!
Animi modi harum enim quia veniam consectetur unde autem inventore.
</ p >
</ div >
</ div >
</ a >
</ div >
|
第二步:定义 Css 规则
一旦确立了 Html 结构,接下来我们将开始为它编写 Css 样式。我将在下面分别贴出每一部分的 Css 代码。
.card
阅读剩余部分
相关阅读 >>
css如何让a标签不可点击
css怎么写圆形
css如何清除下划线?css清除下划线有哪些方法
css如何添加下划线
浅谈css实现毛玻璃效果的方法
网页布局的时候先写html还是先写css
css怎么设置字体倾斜样式
css box-direction属性怎么用
css animation-duration属性怎么用
p的css初始属性是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » CSS3实现卡片效果