2020年中南大学云麓谷研发部面试高级作业

最新推荐文章于 2024-07-19 15:32:49 发布

中南大学苹果实验室

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量969

点赞数 5

分类专栏：云麓谷的作业们文章标签： html css css3 flex 云麓谷

本文链接：https://blog.csdn.net/cyl_csdn_1/article/details/109037118

版权

云麓谷的作业们专栏收录该内容

3 篇文章 1 订阅

订阅专栏

作者：CYL（新手上路）

日期：2020-10-12

标签：高级作业

作业要求：

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

ps1：上面的任务是递进的，如果觉得难度过大可以按照自己的能力完成前面的操作。
ps2：多在CSDN等网站上寻找别人的博客以及资料，有搜集资料使用的能力
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>```

## 注：请不要随意转载

中南大学苹果实验室

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
4
评论
2020年中南大学云麓谷研发部面试高级作业

作者：CYL（新手上路）日期：2020-10-12标签：高级作业作业要求：高级任务：1、写出如下图片中网页不带CSS样式的页面2、完成带CSS样式的如下图片中的网页（所需图片均在群文件里）还给了四条注释ps1：上面的任务是递进的，如果觉得难度过大可以按照自己的能力完成前面的操作。ps2：多在CSDN等网站上寻找别人的博客以及资料，有搜集资料使用的能力ps3：最好做一步搞懂一步，到时候面试可能会询问你实现的细节Ps4：有余力可以提前了解一下微信小程序的编写这道题隐含的条件是必须使用
复制链接

扫一扫