赞
踩
使用吸顶定位将header 标签 固定在页面的顶部不随滚动条移动
position: sticky;
top: 0;
header {
position: sticky;
height: 76px;
top: 0;
right: 0;
background-color: white;
z-index: 1;
}
使用浮动将logo与nav在header中两端对齐
float: left;
float: right;
.logo {
background: url("img/logo.8e6b0dc.png") no-repeat;
background-size: contain;
width: 140px;
height: 50px;
float: left;
margin-top: 13px;
}
.nav {
float: right;
}
给与父元素banner 相对定位 给与子元素 text绝对定位 将子元素固定于父元素中心位置。
父 position: relative;
子 position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.banner { background: url("https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/top-banner.3daf51a.png") no-repeat; width: 1000px; height: 445px; background-size: cover; float: left; position: relative; } .text { width: 690px; height: 150px; color: white; font-size: 54px; font-weight: bold; letter-spacing: 15px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
使用固定定位将页面的下载专区固定于页面右下角,不随滚动条变化
position: fixed;
bottom: 0;
right: 0;
.download {
width: 84px;
height: 150px;
position: fixed;
bottom: 0;
right: 0;
box-shadow: -3px 0px 17px rgba(0, 0, 0, 0.1);
background-color: white;
}
使用弹性布局将service > container 内的item进行两端对齐
.service>.container {
display: flex;
justify-content: space-between;
}
display: flex;
默认情况下弹性布局会将内容元素拍成一排,不自动换行,超出盒子宽度后会自动减小盒子大小
可使用设置自动换行
flex-wrap: wrap;
可设置弹性布局的主轴方向使其横行或纵向排列
flex-direction: row; 行 横向
flex-direction: column; 列 纵向
可设置主轴的排列方式
justify-content: 主轴横向内容的排列方式 flex-end 整体靠右排列,不会颠倒顺序 flex-start 默认值 整体靠左 center 整体水平居中 space-between 左右两端对齐,其他元素平分 space-evenly 均分剩余空间 space-around 等分剩余空间 左右两侧为中间空隙一半 align-items: 主轴纵向内容的排列方式 flex-start 默认值 整体靠上 flex-end;整体靠下 center 整体垂直居中
使用背景bg固定将背景设置在footer>container的右侧
.footer > .container > .bg {
width: 506px;
height: 464px;
background: url("https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/line.040249c.png") no-repeat;
background-size: contain;
position: absolute;
top: 0;
right: 0;
}
使用高级选择器设置banklist的div中的背景图 减少类选择器的命名
直接选中第n个div元素
div:nth-child(n)
.partner > .container > .banklist > div:nth-child(1) {
background:url("img/bank1.a87d4d7.png") no-repeat;
background-size: contain;
}
...
...
...
.partner > .container > .banklist > div:nth-child(10) {
background:url("img/bank10.2e45cd8.png") no-repeat;
background-size: contain;
}
使用高级选择器选中link中的最后一个a链接清除右侧的边框
选中第5个a元素 清除边框
a:nth-child(5)
.footer > .container > .reght > .link > a:nth-child(5) {
border-right: 0px;
}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。