当前位置:   article > 正文

天星数科首页CSS布局回顾_天星数科首页源代码

天星数科首页源代码

天星数科首页CSS布局回顾

主要使用的CSS技术

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

实现效果

在这里插入图片描述

吸顶定位

使用吸顶定位将header 标签 固定在页面的顶部不随滚动条移动

position: sticky;

top: 0; 
  • 1
  • 2
  • 3
 header {
 	position: sticky;
 	height: 76px;
 	top: 0;
 	right: 0;
 	background-color: white;
 	z-index: 1;
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

两端对齐

使用浮动将logo与nav在header中两端对齐

float: left;

float: right;
  • 1
  • 2
  • 3
 .logo {
 	background: url("img/logo.8e6b0dc.png") no-repeat;
 	background-size: contain;
 	width: 140px;
 	height: 50px;
 	float: left;
 	margin-top: 13px;
 }

 .nav {
 	float: right;
 }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

父相子绝定位

给与父元素banner 相对定位 给与子元素 text绝对定位 将子元素固定于父元素中心位置。

父 position: relative;

子  position: absolute;

 	left: 0;

 	right: 0;

 	top: 0;

 	bottom: 0;

 	margin: auto;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
 .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;
 }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

固定定位

使用固定定位将页面的下载专区固定于页面右下角,不随滚动条变化

position: fixed;

bottom: 0;

right: 0;
  • 1
  • 2
  • 3
  • 4
  • 5
 .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;
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

弹性布局

使用弹性布局将service > container 内的item进行两端对齐

 .service>.container {
	display: flex;
	justify-content: space-between;
}
  • 1
  • 2
  • 3
  • 4

弹性布局设置

display: flex;
  • 1

默认情况下弹性布局会将内容元素拍成一排,不自动换行,超出盒子宽度后会自动减小盒子大小

可使用设置自动换行

flex-wrap: wrap;
  • 1

可设置弹性布局的主轴方向使其横行或纵向排列

flex-direction: row; 行 横向

flex-direction: column; 列 纵向
  • 1
  • 2
  • 3

可设置主轴的排列方式

justify-content: 主轴横向内容的排列方式

			flex-end 整体靠右排列,不会颠倒顺序
			
			flex-start 默认值 整体靠左
			
			center 整体水平居中
			
			space-between 左右两端对齐,其他元素平分
			
			space-evenly 均分剩余空间
			
			space-around 等分剩余空间 左右两侧为中间空隙一半
			
align-items: 	主轴纵向内容的排列方式

			flex-start 默认值 整体靠上
			
			flex-end;整体靠下
			
			center 整体垂直居中
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

背景固定

使用背景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;
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

高级选择器

使用高级选择器设置banklist的div中的背景图 减少类选择器的命名

直接选中第n个div元素

div:nth-child(n)
  • 1
 .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;
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

使用高级选择器选中link中的最后一个a链接清除右侧的边框

选中第5个a元素 清除边框

a:nth-child(5)
  • 1
  .footer > .container > .reght > .link > a:nth-child(5) {
  	border-right: 0px;
  }
  • 1
  • 2
  • 3
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/345650
推荐阅读
相关标签
  

闽ICP备14008679号