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

最新推荐文章于 2022-05-13 15:15:05 发布

中南大学苹果实验室

最新推荐文章于 2022-05-13 15:15:05 发布

阅读量483

点赞数 1

分类专栏：云麓谷的作业们

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

版权

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

3 篇文章 1 订阅

订阅专栏

作者：CYL

日期：2020-10-26

标签：HTML CSS 论命名的规范性

虽然第一次培训被我鸽了，但是还是开挂作弊，找专人问了问这个网页的界面布置怎么样才好。之前听人说让我不要用那么多div，后期会很麻烦，所以在第一次作业中我乱七八糟的罗列了一番。这次得到的建议却是：尽量用div这种不带默认属性的玩意嵌套堆叠，然后自己使用flex布局设置会简单很多。当然还有命名规范问题，像我上次就是first second…这种傻子才能懂的命名当时这次改成了nav、content、topic、footer、left、logo这种（以后肯定会用专有名词，这次先按语义来的）。
总之，这次的改进就是：1、改用div嵌套(划分盒子是一门艺术) 2、命名更加规范

题目再重新描述一次吧

在这里插入图片描述
ps1：上面的任务是递进的，如果觉得难度过大可以按照自己的能力完成前面的操作。
ps2：多在CSDN等网站上寻找别人的博客以及资料，有搜集资料使用的能力
ps3：最好做一步搞懂一步，到时候面试可能会询问你实现的细节

啦啦啦，屁话不说了，我就贴一下我的代码

（我知道阅读者没有里面的图片引用，所以没法复现，看别人代码也狗的要死，所以也不费劲具体打注释介绍了）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>高级任务</title>
	<style type="text/css">
		.nav{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 30px 30px 0px 30px;
		}
		.nav_left{
			display: flex;
			flex-direction: row;
			font-size: 2.5em;
			font-weight: 900;
			flex-grow: 5;
			align-items: center;
		}
		.Logo{
			height: 40%;
			margin-right: 15px;
		}
		.nav_right{
			display: flex;
			flex-direction: row;
			font-size: 2em;
			font-weight: 600;
			flex-grow: 2;
			justify-content: space-around;
			align-items: center;
		}
		.header-title-box{
			display: flex;
			flex-direction: column;
			height: 200px;
			background: url("image_高级/background.png");
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% 100%;
			align-items: center;
			margin: 100px 30% 0 30%;
		}
		.header-title{
			font-size: 2em;
			font-weight: 900;
			margin-top: 50px
		}
		.header-content{
			margin-top: 20px;
			color:lightgray;
		}
		.content{
			display: flex;
			flex-direction: column;
			margin: 60px 2% 30px 2%;
		}
		.content-UpAndDown{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			
		}
		.content-boxs{
			display: flex;
			flex-direction: column;
			margin: 1%;
			box-shadow:0 0 50px 10px lightgray;
			justify-content: space-around;
			width:33%;
			align-items: center;
		}
		.content-img{
			justify-content: space-around;
			width: 100%;
		}
		.content-name{
			font-size: 2.5em;
			font-weight: 900;
			margin: 50px 0;
		}
		.content-discribe{
			font-size: 1.2em;
			color: lightgray;
			margin-bottom: 60px;
		}
		.footer-Logo-box{
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		.footer-Logo{
			border: #E2E2E2 1px solid;
			padding: 10px;
			border-radius: 50%;
			transform:translateY(60px);
			background-color: white;
		}
		.footer-content{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 80px 0 40px 0;
		}
		.footer-content-title{
			font-size: 1.5em;
			font-weight: 900;
			margin: 10px;
		}
		.footer-content-discribe{
			font-size: 1.2em;
			color:#D8D8D8;
		}
		.footer-share{
			display: flex;
			position:relative;
			flex-direction: row;
			justify-content: space-around;
			width:20%;
			text-align: center;
			margin: 0 auto;
		}
	</style>

</head>
<body>
	<div class="nav">
		<div class="nav_left">
			<img class="Logo" src="image_高级/Logo.png">
			<div>Gratia</div>
		</div>
		<div class="nav_right">
			<div>About</div>
			<div style="color:brown;">Menu</div>
			<div>Gallery</div>
			<div>Contact</div>
		</div>
	</div>

	<hr>

	<div class="header-title-box">
		<div class="header-title">MENU</div>
		<div class="header-content">Lorem ipsum dolor sit amet,consectetur adipiscing elit</div>
	</div>
	<div class="content">
		<div class="content-UpAndDown">
			<div class="content-boxs">
				<img class="content-img" src="image_高级/Main Dishes.png">
				<div class="content-name">MAIN DISHES</div>
				<div class="content-discribe">lorem ipsum doloor sit amet,consectetur adipiscing elit</div>
			</div>
			<div class="content-boxs">
				<img class="content-img" src="image_高级/Soups.png">
				<div class="content-name">SOUPS</div>
				<div class="content-discribe">Lorem ipsum dolor sit amet,consectetur adipiscing elit</div>
			</div>
			<div class="content-boxs">
				<img class="content-img" src="image_高级/Hamburgers.png">
				<div class="content-name">HAMBURGERS</div>
				<div class="content-discribe">Lorem ipsum dolor sit amet,consectetur adipiscing elit</div>
			</div>
		</div>
		<div class="content-UpAndDown">
			<div class="content-boxs">
				<img class="content-img" src="image_高级/Desserts.png">
				<div class="content-name">DESSERTS</div>
				<div class="content-discribe">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</div>
			</div>
			<div class="content-boxs">
				<img class="content-img" src="image_高级/Barbecue.png">
				<div class="content-name">BARBECUE</div>
				<div class="content-discribe">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</div>
			</div>
			<div class="content-boxs">
				<img class="content-img" src="image_高级/Salads.png">
				<div class="content-name">SALADS</div>
				<div class="content-discribe">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</div>
			</div>
		</div>
	</div>
	
	<div class="footer-Logo-box">
		<img class="footer-Logo" src="image_高级/Logo.png">
	</div>
	
	<hr color="#E2E2E2">
	
	<div class="footer-content">
		<div class="footer-content-title">Gratia Restaurant</div>
		<div class="footer-content-discribe">Copyright 2016.All rights reserved by symu.</div>
	</div>
	<hr width="20%" color="#E2E2E2">
	<div class="footer-share">
		<img src="image_高级/FB.png">
		<img src="image_高级/TR.png">
		<img src="image_高级/IG.png">
	</div>
	
	
</body>
</html>

中南大学苹果实验室

关注

1
点赞
踩
2

收藏

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

作者：CYL日期：2020-10-26标签：HTML CSS 论命名的规范性虽然第一次培训被我鸽了，但是还是开挂作弊，找专人问了问这个网页的界面布置怎么样才好。之前听人说让我不要用那么多div，后期会很麻烦，所以在第一次作业中我乱七八糟的罗列了一番。这次得到的建议却是：尽量用div这种不带默认属性的玩意嵌套堆叠，然后自己使用flex布局设置会简单很多。当然还有命名规范问题，像我上次就是first second…这种傻子才能懂的命名当时这次改成了nav、content、topic、footer、left
复制链接

扫一扫