天星数科首页CSS布局回顾

天星数科首页CSS布局回顾

主要使用的CSS技术

1. 吸顶定位
2. 两端对齐
3. 绝对定位相对定位
4. 固定定位
5. 弹性布局
6. 背景定位
7. 高级选择器

实现效果

吸顶定位

使用吸顶定位将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;
  }