中南大学云麓谷高级网页作业：使用Flex布局-优快云博客

本文链接：https://blog.youkuaiyun.com/cyl_csdn_1/article/details/109037118

这篇博客记录了作者CYL在2020年10月12日完成中南大学云麓谷研发部的高级网页作业的过程。作业要求包括使用HTML构建无CSS样式页面，并应用CSS（特别是Flex布局）来实现特定样式。作者提到作业难度递进，建议查阅优快云等资源，理解每一步，并鼓励提前了解微信小程序。尽管作品自评不佳，但分享了代码以供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：CYL（新手上路）

日期：2020-10-12

标签：高级作业

作业要求：

高级任务：
1、写出如下图片中网页不带CSS样式的页面
2、完成带CSS样式的如下图片中的网页（所需图片均在群文件里）
在这里插入图片描述
还给了四条注释

ps1：上面的任务是递进的，如果觉得难度过大可以按照自己的能力完成前面的操作。
ps2：多在优快云等网站上寻找别人的博客以及资料，有搜集资料使用的能力
ps3：最好做一步搞懂一步，到时候面试可能会询问你实现的细节
Ps4：有余力可以提前了解一下微信小程序的编写
这道题隐含的条件是必须使用flex布局

解题思路：

从上到下把每个块都设置成小的分散的块< div >
然后疯狂使用css布局（flex）
核心的有
text-align(如选center居中操作)
flex-wrap:拆行操作
flex-direction:按照行流动
float:浮动
font:一系列关于字体的操作
margin:缩进（left top right bottom）
display:flex 容器变成弹性盒子
color:选择颜色

我个人做的不太好看

在这里插入图片描述

代码：由于是第一次做网页所以结构及其垃圾可能只有我自己能看懂，违背了代码整洁之道，以后改进（复制查看的话里面的图片肯定没有的）

但是还是贴在底下吧：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>高级作业</title>
	<style>
		.first{
			margin: 1px;
		}
		.first_1{
			float: left;
			display = flex;
			flex-wrap:nowrap;
			text-align: left;
			font-size:13px;
			font-weight: 1000;
			flex-direction:row;
			margin-left: 30px;
			margin-top:10px;
		}
		.first_2{
			float: left;
			display = flex;
			flex-wrap:nowrap;
			text-align: left;
			font-size:35px;
			font-weight: 1000;
			flex-direction:row; 
			margin-left: 20px;
			margin-top: 17px;
		}
		.second{
			float: right;
			flex-direction: row;
			font-weight: 1000;
			font-size:13px;
		}
		.second_1{
			float:right;
			margin: 15px;
			margin-top: 23px;
			font-size: 20px;
		}
		
		.third{
			text-align: center;           /*内容在盒子的中间*/
			background:url("image/background.png") ;
			background-size: auto;
			background-position: center;  /*背景在中间*/
			background-repeat: no-repeat; /*背景不平铺*/
			height: 100px;
		}
		
		.fourth{
			flex:center;
			text-align: center;
			float: center ;
			flex-direction: row;
			display: flex;
			flex-wrap: wrap;
		}
		.fourth_4{
			flex : center;
			text-align: center;
			float: center;		
			margin: 25px;background:#ECECEC;
		}
		.fourth_1{
			width:450px;
		}
		.fourth_2{
			font-weight: 1000;
			font-size: 30px;
		}
		.fourth_3{
			font-family:arizonia;
			font-size: 10px;
			color: #C6C2C2;
		}
		.fifth{
			flex = center;
			text-align: center;
		}
		.sixth{
			width: 50px;
			height: 50px;
			border: #E8E8E8 1px solid;
			border-radius: 50%;
			padding: 10px;
			transform: translateY(50px);
			background-color: white;
			
		}
		.sixth_1{
			text-align: center;
		}
		
	</style>
	
	
</head>
	
<body bgcolor>
	
	<nav class="first">
		<div class="first_1"><img src="image/Logo.png" width="60" ></div>
		<div class="first_2">Gratia</div>		
	</nav>
	
	<div class="second">
		<div class="second_1" >Contect</div>
		<div class="second_1" >Gallary</div>
		<div class="second_1" ><span style="color:#D83437">Menu</span></div>
		<div class="second_1" >About</div>
	</div>
	
	<br>
	<br>
	<br>
	<br>
	<hr>
	<br>
	<br>
	
	<div class="third">
		<h1 style="margin-top:60px;margin-bottom:20px; ">MENU</h1>
		<p style="font-family:Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif';font-size:10px;margin-bottom: 20px;color: #AFADAD;">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
	</div>
	
	<br>
	<br>
	<br>
	
	<div class="fourth">
		<div class="fourth_4"> <img src="image/Main Dishes.png" class="fourth_1"/> <p class="fourth_2">MAIN DISHES</p> <p class="fourth_3">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>  </div>
		<div class="fourth_4"> <img src="image/Soups.png" class="fourth_1"/> <p class="fourth_2">SOUPS</p> <p class="fourth_3">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>  </div>
		<div class="fourth_4"> <img src="image/Hamburgers.png" class="fourth_1"/> <p class="fourth_2">HAMBURGERS</p> <p class="fourth_3">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>  </div>
		<div class="fourth_4"> <img src="image/Desserts.png" class="fourth_1"/> <p class="fourth_2">DESSERTS</p> <p class="fourth_3">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>  </div>
		<div class="fourth_4"> <img src="image/Barbecue.png" class="fourth_1"/> <p class="fourth_2">BARBECUE</p> <p class="fourth_3">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>  </div>
		<div class="fourth_4"> <img src="image/Salads.png" class="fourth_1"/> <p class="fourth_2">SALADS</p> <p class="fourth_3">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>  </div>
		
	</div>
	
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	
	<div class="sixth_1">
		<img src="image/Logo.png" width="70" class="sixth"/>
		<hr color="#F5F5F5">
	</div>
	
	
	<br>
	<br>
	
	<div class="fifth">
		<p style="font-size: 20px;font-weight: 1000;margin-bottom: 0px; ">Gratia Restaurant</p>
		<p style="font-size: 15px; color: #999393">Copyright 2016 All rights reserved by symu</p>
		<hr width="30%" color=#EFEFEF>
	</div>
	
	<div style="display: flex;padding-top:15px;">
		<div style="margin:15px;margin-left: 685px;"><img src="image/FB.png" /></div>
		<div style="margin:15px;"><img src="image/TR.png" /></div>
		<div style="margin:15px;"><img src="image/IG.png" /></div>
	</div>
</body>
</html>```

## 注：请不要随意转载