页面制作的知识点总结

页面制作的知识点总结

在页面的顶部用到了吸顶定位将顶部固定

header {
	/* 吸顶定位 */
	position: sticky;
	height: 76px;
	top: 0;
	right: 0;
	background-color: white;
	z-index: 1;
}

同时顶部左边的logo图片与右边的导航栏用到了浮动并进行了两端对齐

				<div class="logo"></div>
				<div class="nav">
					<ul>
						<li><a href="#" class="active">首页</a></li>
						<li><a href="#">产业金融服务</a></li>
						<li><a href="#">金融科技服务</a></li>
						<li class="menuitem"><a href="#">个人金融服务</a></li>
						<li><a href="#">经营证照</a></li>
						<li><a href="#">关于我们</a></li>
					</ul>
				</div>

.logo {
	background: url("./logo.png") no-repeat;
	background-size: contain;
	width: 140px;
	height: 50px;
	float: left;
	/* 左浮动 */
	margin-top: 13px;
}
.nav {
	float: right;
	/* 右浮动 */
}

在这一部分中，运用到了css中的相对定位与绝对定位的知识将中间的文字部分进行水平垂直居中

	<div class="banner">
		<div class="text">
			<p>数字科技服务实体经济</p>
			<p>开放连接践行普惠金融</p>
		</div>
	</div>

.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;
}

此处用到了固定定位将其固定在页面的右下角不会因滚轮滑动而改变位置

<div class="download">
	<div class="header">下载专区</div>
			<div class="body">
				<div class="content">
					<div class="downloadLogo">

					</div>
					<div class="downloadText">
						天星金融
					</div>
				</div>
			</div>
</div>

.download {
	width: 84px;
	height: 150px;
	position: fixed;
	bottom: 0;
	right: 0;
	box-shadow: -3px 0px 17px rgba(0, 0, 0, 0.1);
}

在这一部分中运用到了flex弹性布局从而解决各个盒子间间距的问题

<section class="service">
			<div class="servicemain">
				<div class="servicebox box1">
					<div class="boxlogo blogo1"></div>
					<div class="title">行稳致远</div>
					<div class="subtitle">立足长远、敬畏风险</div>
				</div>
				<div class="servicebox box2">
					<div class="boxlogo blogo2"></div>
					<div class="title">开放连接</div>
					<div class="subtitle">践行普惠、服务实体</div>
				</div>
				<div class="servicebox box3">
					<div class="boxlogo blogo3"></div>
					<div class="title">技术立业</div>
					<div class="subtitle">科技为先、安全高效</div>
				</div>
				<div class="servicebox box4">
					<div class="boxlogo blogo4"></div>
					<div class="title">服务为重</div>
					<div class="subtitle">用户第一、优化体验</div>
				</div>
			</div>
</section>

.service>.servicemain {
	width: 1002px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.service>.servicemain>.servicebox {
	background: #eef5ff;
	width: 241px;
	height: 224px;
	color: #333;
	font-size: 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

在这一部分运用弹性布局时也运用到了弹性布局中的换行从而实现如图效果

.bank>.bankmain>.banklist {
	width: 1000px;
	height: 200px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/*换行 */
	align-items: center;
}

在页面的底部也是运用了绝对定位以及相对定位的知识进行定位

	/* 父属性中运用了相对定位 */
.footer>.footermain {
	width: 1000px;
	margin: 0 auto;
	padding: 90px 0;
	position: relative;
}
/* 其子属性中运用绝对定位进行位置的固定 */
.footer>.footermain>.right {
	position: absolute;
	z-index: 100;
	top: 0;
	right: 0;
}

同时在制作的过程中也运用到了背景图的插入以及高级选择器的知识

		<section class="bank">
			<div class="bankmain">
				<div class="banktitle">合作伙伴</div>
				<div class="banklist">
					<div class="banklogo"></div>
					<div class="banklogo"></div>
					<div class="banklogo"></div>
					<div class="banklogo"></div>
					<div class="banklogo"></div>
					<div class="banklogo"></div>
					<div class="banklogo"></div>
					<div class="banklogo"></div>
					<div class="banklogo"></div>
					<div class="banklogo"></div>
				</div>
			</div>
		</section>

.bank>.bankmain>.banklist>div:nth-child(1) {
	background: url("./bank1.png") no-repeat;
	background-size: contain;
}

.bank>.bankmain>.banklist>div:nth-child(2) {
	background: url("./bank2.png") no-repeat;
	background-size: contain;
}

.bank>.bankmain>.banklist>div:nth-child(3) {
	background: url("./bank3.png") no-repeat;
	background-size: contain;
}

...

.bank>.bankmain>.banklist>div:nth-child(10) {
	background: url("./bank10.png") no-repeat;
	background-size: contain;
}