小米布局案例1:产品模块布局分析
类似于这样的产品模块,使用css+html布局来完成.
MI
*{
margin: 0;
padding: 0;
}
body{
background-color: #f5f5f5;
}
.box{
width:1100px;
height:400px;
margin: 200px auto;
}
.box1{
width:200px;
height:350px;
background-color: white;
margin: 10px 10px 10px 20px;
display:inline-block;
padding: 10px;
overflow: hidden;
transition: all 1s;
}
.box1:hover{
transform: scale(1.07);
}
.box1 img{
width: 100%;
}
.box1 h5{
text-indent: 25px;
}
.box1 p{
font-family: 宋体;
font-size: 10px;
color: #9e9494;
margin-top: 20px;
}
.box1 h4{
font-family: 微软雅黑;
color:red;
margin-top: 20px;
text-indent: 2em;
float: left;
}
#lgprice{
margin-top: 20px;
color: #9e9494;
}
圆角边框
border-radius:length;//数值越大,越圆.可以跟四个值,顺时针方向.
border-top-left-radius:xxpx;//设置左上角.
盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;//严格按照顺序来写
值
描述
h-shadow
必须,水平阴影的部分,可以是负值.
v-shadow
必须,垂直阴影的部分,可以是负值.
blur
可选,模糊距离.
spread
可选,阴影尺寸的位置.
color
可选,阴影的颜色.
inset
可选,可将外部阴影改为内部阴影,但是默认outset但是没必要写 .
小米布局案例2:增加阴影效果
box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
很明显阴影的效果会出来.
浮动
为什么需要浮动?
使用行内块会出现空隙.
网页布局的第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动.
什么是浮动?
float属性用于创建浮动窗,将其移到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘.
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery