小米盒子 前端综合案例
简述
如果我们想实现这样一个小米盒子案例,我们应该怎么做呢?
首先我们来了解一下它的结构
它首先肯定是由一个大盒子包含起来的,这里用div实现,我们起名叫box
然后我们准备一张图片放在盒子上方,使用img标签即可
图片下面有一个文字评论,我们这里用段落标签即可,起名叫review
文字评价下面还有一个评价模块,我们这里用div实现,起名叫appraise
最后下方有产品信息和价格,我们也用一个div实现,起名叫info
步骤
经过测量,我们知道这个大盒子的宽度是298,高度是415像素
然后我们想让这个盒子水平居中,我们就使用到外边距的知识——设置左右外边距为auto
然后我们给整个body设置一个灰色的背景颜色,给盒子设置为白色
然后我们导入这张图片,让宽度设置为父元素的百分之百
然后我们加入评价的段落标签,因为这个盒子是可以复用的,下面还有一个评价模块,我们要给这个段落标签设置高度便于给下面的评价模块固定位置
我们给段落设定宽度为70像素,设置字体大小为14像素,给它设置一个左右padding值为28,因为段落没有width属性,所以不会撑开盒子
然后设置一下上边距为30px
现在的效果是这样的
然后我们开始写下面的灰色的评价信息,我们用div盒子装起来
给他设定12的文字大小,20的上边距,28的左右边距
效果是这样的
然后我们来写下面的info信息,同样我们用div装着
左边的文字我们用h4标签装起来,右边我们用span装起来
这会产生一个问题,h4是行内标签,自己单独一行,但现在我们又想让他们在同一行实现——我们可以把h4转为行内块元素
同时我们给info类指定14的字体大小,15的上边距,上下0,左右28的的内边距,同时让h4的文字不加粗
最后我们设置一下99元的颜色
最终我们的效果就是这样的啦