投稿
  1. 首页
  2. html-js-css

2022年5月15号学成网初稿设计的内容。

code•2022-5-17•html-js-css•阅读27

2022年5月15号学成网初稿设计的内容。,第1张

2022年5月15号学成网初稿设计的内容。 效果图如下所示：

上面的案例算是一个综合的网页设计吧！如果是你你会咋整呢？用代码去实现！会不会有点难呢？ 这里运用到的知识点有 布局 定位  浮动  流失布局  也又是你要思考这个网页交给你你会如何去做呢？上面的项目是 基础在日后的工作中算是最简单的了.因为学校是带你去入这个门，剩下的要靠自觉去钻研。

 

上面为两个部分设置为@1 @2

 上面的部分身为@3 @4 @5

 

第一步设计框架在任何网页设计中我们要做的第一步都是建立页面的布局.

 

 如何让@5 浮动到@3里面自觉思考一下。 



	
	
	
	
	
	
	项目主体布局


	@1
	@2
	
	@5
	@4
第二部分完成导航栏和第二部分的内容

 




	
	
	
	Document
	


	
		
			
			
首页

			
课程

			
职业规划

			

			
			
个人中心

			
			

			
qq:lesstome

		
	
	
	
	
		
			
		
		
			
前端开发

			
前端开发

			
移动端开发

			
人工智能

			
商业预算

			
月计算&大数据

			
运维&测试

			
Ul设计

			
产品
代码初稿有很多地方不是很完善。

 



	
		
		
		
		Document
		
		
		
		
		
	
	
		
		
			
				
				
首页

				
课程

				
职业规划

				

				
				
个人中心

				
				

				
qq:lesstome

			
		
		
		
			
				
前端开发

				
前端开发

				
移动端开发

				
人工智能

				
商业预算

				
月计算&大数据

				
运维&测试

				
Ul设计

				
产品

			
		
		
		
			精品推荐
			jquery
			Spang
			Mysql
			JavaWeb
			MSql
			JavaWeb
			修改兴趣
		
		
		
			精品推荐
			查看全部
		

		
		
		
			
				
				
Think PHP 5.0 博客系统实战

				
项目实 *** 

				
高级

				
.1125人在学习

			

			
				
				
Think PHP 5.0 博客系统实战

				
高级

				
.1125人在学习

			

			
				
				
Angular 2 最新框架+主流技术+项目实战

				
高级

				
.1125人在学习

			

			
				
				
Android Hybrid App 开发实战hH5+原生

				
高级

				
.1125人在学习

			

			
				
				
Cocoos 博客系统实战 

				
项目实 *** 

				
高级

				
.1125人在学习

			
			
				
				
Android Hybrid App 开发实战hH5+原生

				
项目实 *** 

				
高级

				
.1125人在学习

			
			
				
				
Think PHP 5.0 博客系统实战

				
高级

				
.1125人在学习

			
			
				
				
Angular 2 最新框架+主流技术+项目实战

				
高级

				
.1125人在学习

			
			
				
				
Android Hybrid App 开发实战hH5+原生

				
高级

				
.1125人在学习

			
			
				
				
Coccom博客系统实战

				
项目实 *** 

				
高级

				
.1125人在学习

			
		

		

		

		
			编程入门
			热门
			初级
			中级
			高级
			查看全部
		
		
		
			
			
				
				
					
						
						
UGUL源深度的创建

						
项目实 *** 

						
高级

						
.1125人在学习

					


					
						
						
Coccom博客系统实战

						
项目实 *** 

						
高级

						
.1125人在学习

					


					
						
						
Conns图解/p>
						
高级

						
.1125人在学习

					

					
						
						
UNITY入门/p>
						
高级

						
.1125人在学习

					



				

			
		




		
			数据分析师
			热门
			初级
			中级
			高级
			查看全部

		



		
			
			
				
				
					
						
						
UGUL源深度的创建

						
项目实 *** 

						
高级

						
.1125人在学习

					


					
						
						
Coccom博客系统实战

						
项目实 *** 

						
高级

						
.1125人在学习

					


					
						
						
Conns图解/p>
						
高级

						
.1125人在学习

					

					
						
						
UNITY入门/p>
						
高级

						
.1125人在学习

					



				

			
		






		
			机械学习工程师
			热门
			初级
			中级
			高级
			查看全部
		


		
		
			
				
				
UGUL源深度的创建

				
项目实 *** 

				
高级

				
.1125人在学习

			

			
				
				
Conns图解/p>
				
高级

				
.1125人在学习

			

			
				
				
UNITY入门/p>
				
高级

				
.1125人在学习

			

			
				
				
KAMI2首页界面切块效果

				
高级

				
.1125人在学习

			

			
				
				
微软人工智能一数分析平台

				
项目实 *** 

				
高级

				
.1125人在学习

			
		
		
		
		
		
			前端开发工程师
			热门
			初级
			中级
			高级
			查看全部
		
		
		
		
		
			
				
				
微软人工智能一数分析平台

				
项目实 *** 

				
高级

				
.1125人在学习

			
		
		
			
				
				
Kamiz首页页面切换效果<< /p>
						
高级

						
.1125人在学习

			
		
			
				
				
Kamiz首页页面切换效果

				
高级

				
.1125人在学习

			
		
			
				
				
UNITY入门

				
高级

				
.1125人在学习

			
		
			
				
				
Android Hybrid App 开发实战hH5+原生

				
高级

				
.1125人在学习

			
		
		
		


		
		
			牛人推荐
LESS 
body {
	width: 100%;
	min-width: 900x;
	max-width: 960px;
	margin: 0 auto;
	font-size: 10px;
	border: 1px solid black;
	font-family: -apple-system, Helvetica, sans-serif;
	color: #666;
	line-height: 1.5;
	background-color: #f3f5f7;
	height: 100%;
	border: 1px solid black;
}

.header {
	background-color: #f3f5f7;
	width: 100%;
	height: 100px;
	border: 1px solid green;
	text-align: center;
	display: flex;
	padding-top: 2%;
	background-color: #f3f5f7;
}

.header1 {
	background-color: #f3f5f7;
	width: 90%;
	height: 80%;
	justify-content: center;
	border: 1px solid red;
	margin: 0 auto;
}

.header1 img {
	padding-top: 3%;
	float: left;
	width: 101px;
	height: 26px;
	display: flex;
}

.header1 p {
	padding-top: 3%;
	float: left;
	line-height: 80%;
	justify-content: space-around;
	margin: 2%;
	margin-right: 0%;
	border-bottom: 2px solid #00a4ff;
}

.p1 {
	/* border: 2px red solid; */
	border-bottom: 2px solid #00a4ff;

}

.p2 {
	width: 180px;
	height: 19px;
	border: 1px solid #00a4ff;
}

/* 上面为第一部份内容 */


.header4::after {
	content: "123456";
	display: block;
	width: 60%px;
	height: 250px;
	background: url("../images/banner.png") no-repeat;
	box-sizing: 50px
}

.header3 {
	float: left;
	width: 80%;
	height: 256px;
	margin: 0 auto;

}

/*  */

/* 父代 */
.mode1 {
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	display: flex;
}

.mode1 ul {
	padding-top: 1%;
	font-size: 18px;
	line-height: 50px;
	margin: 1px;
	margin-bottom: 0px display: block;
	justify-content: space-around;
	height: 50px;
	width: 12.5%;
	background-color: #ffffff;
	border-right: 2px solid #a5a5a5;

}

/*  */

/* d性布局 */
.mode2 {
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	background-color: #FFF2E2;
	display: flex;

}

.mode2 ul {
	font-weight: 600;
	font-size: 1.375rem;
	flex: 9;
	justify-content: flex-start;

}

.mode2 ul:nth-child(2) {
	flex: 1;
}




/*  */


/* 方案一 */
.parent {
	display: block;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: lavender;

}


.parent div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 20%;
	border: 1px solid #FFFF;
	height: 16rem;
	color: red;
}


.parent div img {
	width: 100%;
}

/* 方案二 */
/* .p{
	display: block;
	width: 100%;
	background-color: black;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
} */


/* .p div {
	border: 1px solid red;
	text-align: center;
	display: inline-block;
	will-change: 20%;
	margin: 0.625rem;
} */


/*  */

/* 与上面的模块相同 */

.mode3 {
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	background-color: lavenderblush;
	display: flex;

}

.mode3 ul {
	flex: 9;
	justify-content: flex-start;

}

.mode3 ul:nth-child(2) {
	flex: 1;
}

/* 插入一个模块 */
.acc1 {
	width: 100%;
	height: 22rem;
	background-color: paleturquoise;
	display: flex;
}

/* d性布局x y */
/* 思路先X Y X */
.acc1 img {
	width: 20%;
}

.notcss img {
	width: 100%;
	flex: 1;
}

.parentdiv1 {
	display: block;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: lavender;

}


.parentdiv1 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 25%;
	border: 1px solid #FFFF;
	height: 16rem;
	color: red;
}


.parentdiv1 div img {
	width: 100%;
}











.mode4 {
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	background-color: peachpuff;
	display: flex;

}


.mode4 ul {
	flex: 9;
	justify-content: flex-start;

}

.mode4 ul:nth-child(2) {
	flex: 1;
}


/* 插入一个模块 2*/

.acc2 {
	width: 100%;
	height: 22rem;
	background-color: paleturquoise;
	display: flex;
}

/* d性布局x y */
/* 思路先X Y X */
.acc2 img {
	width: 20%;
}

.notcss1 img {
	width: 100%;
	flex: 1;
}

.parentdiv2 {
	display: block;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: lavender;

}


.parentdiv2 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 25%;
	border: 1px solid #FFFF;
	height: 16rem;
	color: red;
}


.parentdiv2 div img {
	width: 100%;
}





.mode5 {
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	background-color: lightblue;
	display: flex;

}

.mode5 ul {
	flex: 9;
	justify-content: flex-start;

}

.mode5 ul:nth-child(2) {
	flex: 1;
}




.parent1 {
	display: block;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: lavender;

}


.parent1 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 20%;
	border: 1px solid #FFFF;
	height: 16rem;
	color: red;
}


.parent1 div img {
	width: 100%;
}



.mode6 {
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	display: flex;
	background-color: gainsboro;


}

.mode6 ul {
	flex: 9;
	justify-content: flex-start;

}

.mode6 ul:nth-child(2) {
	flex: 1;
}






.aparent1 {
	display: block;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: pink;

}


.aparent1 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 20%;
	border: 1px solid #FFFF;
	height: 16rem;
	color: red;
}


.aparent1 div img {
	width: 100%;
}













/* 模块 */

.mode7 {
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	display: flex;
	background-color: lightcyan;


}

.mode7 ul {
	flex: 9;
	justify-content: flex-start;

}

.mode7 ul:nth-child(2) {
	flex: 1;
}



/* 倒数第3模块 */
.parent2 {
	display: block;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: skyblue;

}


.parent2 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 20%;
	border: 1px solid #FFFF;
	height: 18rem;
	color: red;
}


.parent2 div img {
	width: 100%;
}
/* 定位解决 */
.one{
	margin: 0;
	padding: 0;
	// background-color: #9d9fa6;
	opacity: 0.9;
	width: 100%;
	height: 10px;
	
}
#one::before {
	content: "崔老师";
	display: block;
	width: 60%px;
	height: 250px;
	background: url("../images/teacher1_03.png") no-repeat;
	box-sizing: 50px
}

	













/* 倒数第二模块*/
.parent3 {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: lavender;

}


.parent3 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 20%;
	border: 1px solid #FFFF;
	height: 18rem;
	color: red;
}


.parent3 div img {
	height: 18rem;
}


.parent3 div img {
	width: 100%;
}

/* 最后的一个模块 */

footer {
	width: 100%;
	height: 100px;
}

body {
  width: 100%;
  min-width: 900x;
  max-width: 960px;
  margin: 0 auto;
  font-size: 10px;
  font-family: -apple-system, Helvetica, sans-serif;
  color: #666;
  line-height: 1.5;
  background-color: #f3f5f7;
  height: 100%;
  border: 1px solid black;
}
.header {
  width: 100%;
  height: 100px;
  border: 1px solid green;
  text-align: center;
  display: flex;
  padding-top: 2%;
  background-color: #f3f5f7;
}
.header1 {
  background-color: #f3f5f7;
  width: 90%;
  height: 80%;
  justify-content: center;
  border: 1px solid red;
  margin: 0 auto;
}
.header1 img {
  padding-top: 3%;
  float: left;
  width: 101px;
  height: 26px;
  display: flex;
}
.header1 p {
  padding-top: 3%;
  float: left;
  line-height: 80%;
  justify-content: space-around;
  margin: 2%;
  margin-right: 0%;
  border-bottom: 2px solid #00a4ff;
}
.p1 {
  /* border: 2px red solid; */
  border-bottom: 2px solid #00a4ff;
}
.p2 {
  width: 180px;
  height: 19px;
  border: 1px solid #00a4ff;
}
/* 上面为第一部份内容 */
.header4::after {
  content: "123456";
  display: block;
  width: 60%px;
  height: 250px;
  background: url("../images/banner.png") no-repeat;
  box-sizing: 50px;
}
.header3 {
  float: left;
  width: 80%;
  height: 256px;
  margin: 0 auto;
}
/*  */
/* 父代 */
.mode1 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
}
.mode1 ul {
  padding-top: 1%;
  font-size: 18px;
  line-height: 50px;
  margin: 1px;
  margin-bottom: 0px display: block;
  justify-content: space-around;
  height: 50px;
  width: 12.5%;
  background-color: #ffffff;
  border-right: 2px solid #a5a5a5;
}
/*  */
/* d性布局 */
.mode2 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: #FFF2E2;
  display: flex;
}
.mode2 ul {
  font-weight: 600;
  font-size: 1.375rem;
  flex: 9;
  justify-content: flex-start;
}
.mode2 ul:nth-child(2) {
  flex: 1;
}
/*  */
/* 方案一 */
.parent {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parent div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parent div img {
  width: 100%;
}
/* 方案二 */
/* .p{
	display: block;
	width: 100%;
	background-color: black;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
} */
/* .p div {
	border: 1px solid red;
	text-align: center;
	display: inline-block;
	will-change: 20%;
	margin: 0.625rem;
} */
/*  */
/* 与上面的模块相同 */
.mode3 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: lavenderblush;
  display: flex;
}
.mode3 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode3 ul:nth-child(2) {
  flex: 1;
}
/* 插入一个模块 */
.acc1 {
  width: 100%;
  height: 22rem;
  background-color: paleturquoise;
  display: flex;
}
/* d性布局x y */
/* 思路先X Y X */
.acc1 img {
  width: 20%;
}
.notcss img {
  width: 100%;
  flex: 1;
}
.parentdiv1 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parentdiv1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 25%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parentdiv1 div img {
  width: 100%;
}
.mode4 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: peachpuff;
  display: flex;
}
.mode4 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode4 ul:nth-child(2) {
  flex: 1;
}
/* 插入一个模块 2*/
.acc2 {
  width: 100%;
  height: 22rem;
  background-color: paleturquoise;
  display: flex;
}
/* d性布局x y */
/* 思路先X Y X */
.acc2 img {
  width: 20%;
}
.notcss1 img {
  width: 100%;
  flex: 1;
}
.parentdiv2 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parentdiv2 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 25%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parentdiv2 div img {
  width: 100%;
}
.mode5 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: lightblue;
  display: flex;
}
.mode5 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode5 ul:nth-child(2) {
  flex: 1;
}
.parent1 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parent1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parent1 div img {
  width: 100%;
}
.mode6 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
  background-color: gainsboro;
}
.mode6 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode6 ul:nth-child(2) {
  flex: 1;
}
.aparent1 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: pink;
}
.aparent1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.aparent1 div img {
  width: 100%;
}
/* 模块 */
.mode7 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
  background-color: lightcyan;
}
.mode7 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode7 ul:nth-child(2) {
  flex: 1;
}
/* 倒数第3模块 */
.parent2 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: skyblue;
}
.parent2 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 18rem;
  color: red;
}
.parent2 div img {
  width: 100%;
}
/* 定位解决 */
.one {
  margin: 0;
  padding: 0;
  opacity: 0.9;
  width: 100%;
  height: 10px;
}
#one::before {
  content: "崔老师";
  display: block;
  width: 60%px;
  height: 250px;
  background: url("../images/teacher1_03.png") no-repeat;
  box-sizing: 50px;
}
/* 倒数第二模块*/
.parent3 {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parent3 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 18rem;
  color: red;
}
.parent3 div img {
  height: 18rem;
}
.parent3 div img {
  width: 100%;
}
/* 最后的一个模块 */
footer {
  width: 100%;
  height: 100px;
}
这又是上面代码运行的效果图。

 

在上面的基础上我进行了改进。结果如下图。

 



	
		
		
		
		Document
		
		
		
		
		
	
	
		
		
			1234567
		
			
			
				
				
首页

				
课程

				
职业规划

				

				
				
个人中心

				
				

				
qq:lesstome

			
		
		
		
			
				
			
			
				
前端开发

				
前端开发

				
移动端开发

				
人工智能

				
商业预算

				
月计算&大数据

				
运维&测试

				
Ul设计

				
产品

			

			
			
				精品推荐
				jquery
				Spang
				Mysql
				JavaWeb
				MSql
				JavaWeb
				修改兴趣
			
			
			
				精品推荐
				查看全部
			

			
			
			
				
					
					
Think PHP 5.0 博客系统实战

					
项目实 *** 

					
高级

					
.1125人在学习

				

				
					
					
Think PHP 5.0 博客系统实战

					
高级

					
.1125人在学习

				

				
					
					
Angular 2 最新框架+主流技术+项目实战

					
高级

					
.1125人在学习

				

				
					
					
Android Hybrid App 开发实战hH5+原生

					
高级

					
.1125人在学习

				

				
					
					
Cocoos 博客系统实战 

					
项目实 *** 

					
高级

					
.1125人在学习

				
				
					
					
Android Hybrid App 开发实战hH5+原生

					
项目实 *** 

					
高级

					
.1125人在学习

				
				
					
					
Think PHP 5.0 博客系统实战

					
高级

					
.1125人在学习

				
				
					
					
Angular 2 最新框架+主流技术+项目实战

					
高级

					
.1125人在学习

				
				
					
					
Android Hybrid App 开发实战hH5+原生

					
高级

					
.1125人在学习

				
				
					
					
Coccom博客系统实战

					
项目实 *** 

					
高级

					
.1125人在学习

				
			

			

			

			
				编程入门
				热门
				初级
				中级
				高级
				查看全部
			
			
			
				
				
					
					
						
							
							
UGUL源深度的创建

							
项目实 *** 

							
高级

							
.1125人在学习

						


						
							
							
Coccom博客系统实战

							
项目实 *** 

							
高级

							
.1125人在学习

						


						
							
							
Conns图解/p>
							
高级

							
.1125人在学习

						

						
							
							
UNITY入门/p>
							
高级

							
.1125人在学习

						



					

				
			




			
				数据分析师
				热门
				初级
				中级
				高级
				查看全部

			



			
				
				
					
					
						
							
							
UGUL源深度的创建

							
项目实 *** 

							
高级

							
.1125人在学习

						


						
							
							
Coccom博客系统实战

							
项目实 *** 

							
高级

							
.1125人在学习

						


						
							
							
Conns图解/p>
							
高级

							
.1125人在学习

						

						
							
							
UNITY入门/p>
							
高级

							
.1125人在学习

						



					

				
			






			
				机械学习工程师
				热门
				初级
				中级
				高级
				查看全部
			


			
			
				
					
					
UGUL源深度的创建

					
项目实 *** 

					
高级

					
.1125人在学习

				

				
					
					
Conns图解/p>
					
高级

					
.1125人在学习

				

				
					
					
UNITY入门/p>
					
高级

					
.1125人在学习

				

				
					
					
KAMI2首页界面切块效果

					
高级

					
.1125人在学习

				

				
					
					
微软人工智能一数分析平台

					
项目实 *** 

					
高级

					
.1125人在学习

				
			



			
				前端开发工程师
				热门
				初级
				中级
				高级
				查看全部
			


			
			
				
					
					
微软人工智能一数分析平台

					
项目实 *** 

					
高级

					
.1125人在学习

				


				
					
					
Kamiz首页页面切换效果<< /p>
							
高级

							
.1125人在学习

				

				
					
					
Kamiz首页页面切换效果

					
高级

					
.1125人在学习

				

				
					
					
UNITY入门

					
高级

					
.1125人在学习

				

				
					
					
Android Hybrid App 开发实战hH5+原生

					
高级

					
.1125人在学习

				
			




			
			
				牛人推荐
			



			
				
					
				
				
					
				
				
					
				
				
					
				
				
					
				
			

			
			

			

			
				
					
				
				
					
				
				
					
				
				
					
				
			

			
				
					
					
学成网在线致力于普及中国最好的教育他与中国一流大学和机构合作提供在线教程。


					。2017年XTCG INC 保留所有权利。一户ICP配15025210
					
						下载App
					
				
				
					
						

							关于学成网
						

						

						关于
						

						工作机会
						

						客户服务
						

						帮助
					
				
				
					
						

							新手指导
						

						

						如何注册
						

						如何选课
						

						如何到拿毕业证
						

						学分是什么
						

						考试未通过咋办
					
				
				
					
						

							合作伙伴
						

						

						合作机构
						

						合作导师
					
				
			


		 -->

	


body {
	width: 100%;
	min-width: 900x;
	max-width: 960px;
	margin: 0 auto;
	font-size: 10px;
	padding: 2px;
	border: 2px solid black;
	font-family: -apple-system, Helvetica, sans-serif;
	color: #666;
	line-height: 1.5;
	background-color: #f3f5f7;
	height: 100%;
}

.header {
	z-index: 99;
	background-color: #f3f5f7;
	width: 100%;
	height: 100px;
	border: 1px solid black;
	text-align: center;
	display: flex;
	padding-top: 2%;
	background-color: #f3f5f7;
}

.header1 {
	z-index: 98;
	background-color: #f3f5f7;
	width: 90%;
	height: 80%;
	justify-content: center;
	border: 1px solid black;
	margin: 0 auto;
}

.header1 img {
	z-index: 97;
	padding-top: 3%;
	float: left;
	width: 101px;
	height: 26px;
	display: flex;
}

.header1 p {
	padding-top: 3%;
	float: left;
	line-height: 80%;
	justify-content: space-around;
	margin: 2%;
	margin-right: 0%;
	border-bottom: 2px solid #00a4ff;
}

.p1 {
	/* border: 2px red solid; */
	border-bottom: 2px solid #00a4ff;

}

.p2 {
	width: 180px;
	height: 19px;
	border: 1px solid #00a4ff;
}

/* 上面为第一部份内容 */
.header3 {

	width: 60%;
	height: 256px;
	margin: 0 auto;

}

.header4 {
	z-index: 99;
	/* 相对定位 */
	position: relative;

}

.header3 {

	/* float: left; */
	/* 绝对定位 */
	position: absolute;
	top: 0 0 0 0;
	height: 100%;
}

.cssdf {
	width: 100%;
	height: 100%;
	/* float: left; */
	position: absolute;
	/* top: 0 0 0 0; */

}


/*  */

/* 父代 */
.mode1 {
	position: relative;
	top: 400px;
	/* background-color: #00a4ff; */
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	display: flex;
}

.mode1 ul {
	padding-top: 1%;
	font-size: 14px;
	line-height: 50px;
	margin: 1px;
	margin-bottom: 0px display: block;
	justify-content: space-around;
	height: 50px;
	width: 12.5%;
	background-color: #f3f5f7;
	border-right: 2px solid #a5a5a5;

}

/*  */

/* d性布局 */
.mode2 {
	position: relative;
	top: 400px;
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	background-color: #f3f5f7;
	display: flex;
	opacity: 0.99;

}

.mode2 ul {
	font-weight: 600;
	font: size 12px;
	flex: 9;
	justify-content: flex-start;

}

.mode2 ul:nth-child(2) {
	flex: 1;
}




/*  */


/* 方案一 */
.parent {
	position: relative;
	top: 400px;
	display: block;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: #f3f5f7;

}


.parent div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 20%;
	border: 1px solid #FFFF;
	height: 16rem;
	color: red;
}


.parent div img {
	width: 100%;
}

/* 方案二 */
/* .p{
	display: block;
	width: 100%;
	background-color: black;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
} */


/* .p div {
	border: 1px solid red;
	text-align: center;
	display: inline-block;
	will-change: 20%;
	margin: 0.625rem;
} */


/*  */

/* 与上面的模块相同 */

.mode3 {
	position: relative;
	top: 400px;
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	background-color: #f3f5f7;
	display: flex;

}

.mode3 ul {
	flex: 9;
	justify-content: flex-start;

}

.mode3 ul:nth-child(2) {
	flex: 1;
}

/* 插入一个模块 */
.acc1 {
	position: relative;
	top: 400px;
	width: 100%;
	height: 22rem;
	background-color: #f3f5f7;
	display: flex;
}

/* d性布局x y */
/* 思路先X Y X */
.acc1 img {
	width: 20%;
}

.notcss img {
	width: 100%;
	flex: 1;
}

.parentdiv1 {
	display: block;
	top: 200px;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: #f3f5f7;

}


.parentdiv1 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 25%;
	border: 1px solid #FFFF;
	height: 16rem;
	color: red;
}


.parentdiv1 div img {
	width: 100%;
}











.mode4 {
	position: relative;
	top: 400px;
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	background-color: #f3f5f7;
	display: flex;

}


.mode4 ul {
	flex: 9;
	justify-content: flex-start;

}

.mode4 ul:nth-child(2) {
	flex: 1;
}


/* 插入一个模块 2*/

.acc2 {
	position: relative;
	top: 400px;
	width: 100%;
	height: 22rem;
	background-color: #f3f5f7;
	display: flex;
}

/* d性布局x y */
/* 思路先X Y X */
.acc2 img {
	width: 20%;
}

.notcss1 img {
	width: 100%;
	flex: 1;
}

.parentdiv2 {
	display: block;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: #f3f5f7;

}


.parentdiv2 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 25%;
	border: 1px solid #FFFF;
	height: 16rem;
	color: red;
}


.parentdiv2 div img {
	width: 100%;
}


.mode5 {
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	background-color: #f3f5f7;
	display: flex;

}

.mode5 ul {
	flex: 9;
	justify-content: flex-start;

}

.mode5 ul:nth-child(2) {
	flex: 1;
}




.parent1 {
	display: block;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: #f3f5f7;

}


.parent1 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 20%;
	border: 1px solid #FFFF;
	height: 16rem;
	color: red;
}


.parent1 div img {
	width: 100%;
}



.mode6 {
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	display: flex;
	background-color: #f3f5f7;

}

.mode6 ul {
	flex: 9;
	justify-content: flex-start;

}

.mode6 ul:nth-child(2) {
	flex: 1;
}






.aparent1 {
	position: relative;
	top: 4rem;
	display: block;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	background-color: #f3f5f7;

}


.aparent1 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 20%;
	border: 1px solid #FFFF;
	height: 16rem;
	color: red;
}


.aparent1 div img {
	width: 100%;
}





/* 模块 */

.mode7 {
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 50px;
	/* background-color: #CCE8CF; */
	display: flex;
	background-color: #f3f5f7;


}

.mode7 ul {
	flex: 9;
	justify-content: flex-start;

}

.mode7 ul:nth-child(2) {
	flex: 1;
}

/* 模块 */

.mode8 {
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 30px;
	/* background-color:; */
	display: flex;
	background-color: #f3f5f7;


}

.mode8 ul {
	flex: 9;
	justify-content: flex-start;

}



/* 倒数第3模块 */
.parent2 {
	display: block;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	/* background-color: #f3f5f7; */

}


.parent2 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 20%;
	border: 1px solid #FFFF;
	height: 18rem;
	color: red;
}


.parent2 div img {
	width: 100%;
}

/* 倒数第二模块*/
.parent3 {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin: 1px;
	/* background-color: #f3f5f7; */

}


.parent3 div {
	border: 2px solid black;
	box-sizing: border-box;
	border-left: 1px solid red;
	flex: 0 0 20%;
	border: 1px solid #FFFF;
	height: 18rem;
	color: red;
}


.parent3 div img {
	height: 18rem;
}


.parent3 div img {
	width: 100%;
}

/* 最后的一个模块 */

.mode9 {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	border-top: 6px solid #ffffff;
	width: 100%;
	height: 280px;
	/* background-color: #CCE8CF; */
	display: flex;
	background-color: #ffffff;
	opacity: 0.7;


}

.mode9 ul {
	flex: 1;
	justify-content: space-around;
	border-right: 1px solid black;

}

.mode9 ul:nth-child(1) {
	flex: 2;
}
要求你在学完了前端的HTML CSS  布局   流失布局 这些知识的基础上才能看懂上面的代码初稿。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/939569.html

赞 (0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
codecode管理员组
00
上一篇 2022-05-17
下一篇2022-05-17

发表评论

登录后才能评论

评论列表（0条）

    保存