一 小米商城页面的分析
目前市面上主流的布局为float布局 , 本人通过flex布局实现了一遍
其中轮播图使用了swiper插件 图标使用了iconfont 尽可能的不使用定位
此为自我规划的结构分析 , 如图所示
二 小米商城搭建的细节
1 清楚整个页面的整体布局,先整体再局部,先把整体内容规划好,再自上而下的布置每一块内容。
2 明确每个模块要实现怎样的效果,并且自外而内的设置好每个标签的样式。
3 不清楚某个样式怎么设置,可以去浏览器控制台中做相应的调整,调整合适后将样式写到文件中。
4 flex布局最好在父级元素添加display:flex; flex布局写完可以在新版本的浏览器里调,然后代码直接可以复制粘贴
5 在浏览器里hover可以点完:hov 可以查看
6 如果使用浮动布局,要善于使用伪元素清除浮动
.clear::after {
content: '';
display: block;
clear: both;
}
7 em单位为一个相对的度量单位,它通过寻找父标签的font-size(注:若父元素也是em则会继续往上找,1em相对于浏览器是16px)。然后通过计算得出自身的font-size。利用em单位设置便签的width或者height等属性原理也一样。
8 改变font-size的值。height、width的值也需要重新计算。
9 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
注:轮廓线不会占据空间,也不一定是矩形。
input元素 outline:0; 或 outline:none;
可以去掉轮廓,便于自定义样式
10 box-sizing: border-box; 边框不纳入计算范围
11 伪类:hover 过渡效果
.header .header_search #search_btn:hover {
background-color: #ff6700;
color: white;
transition: all .2s linear;
}
12 文字超出父级后显示…
.span16 .product_show p {
padding: 0 20px;
overflow: hidden;
/*超出部分隐藏*/
white-space: nowrap;
/*不换行*/
text-overflow: ellipsis;
/*超出部分文字以...显示*/
}
13 鼠标悬浮阴影和上浮效果
.box-bd ul li:hover{
z-index: 2;
-webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
-webkit-transform: translate3d(0,-2px,0);
transform: translate3d(0,-2px,0);
}
14
:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。
:nth-child(2) 匹配的是某父元素的第二个子元素
:nth-child(odd)匹配的是某父元素的第奇数个子元素
:nth-child(even) 匹配的是某父元素的第偶数个子元素
/*除了第一个a之外其余的都应用如下样式 俩个代码都可以实现,任选其一即可*/
.footer .footer-service ul li:not(:first-child) a::before{
content: "";
position: absolute;
background: #e0e0e0;
width: 1px;
height: 1.2em;
margin-top: 4px;
margin-left: -60px;
}
/* .footer .footer-service ul li a::before{
content: "";
position: absolute;
background: #e0e0e0;
width: 1px;
height: 1.2em;
margin-top: 4px;
margin-left: -60px;
} */
/* .footer .footer-service ul li:first-child a::before{
display: none;
} */
15 vertical-align 属性
在行内元素的基线相对于该元素所在行的基线的垂直对齐 , 允许指定负长度值和百分比值
在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
16 伪类操控相邻元素
<div class="consumer-region">
关注小米:
<a href="https://weibo.com/xiaomishangcheng" target="_blank">
<em class="iconfont">em>
a>
<span href="#">
<em class="iconfont">em>
span>
<img src="img/section/wx-img.png" alt="