【如何进行div划分】云麓谷信息技术中心研发部中级作业【HTML+CSS静态页面】

最新推荐文章于 2024-07-12 20:49:16 发布

新参者-tangent

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量330

点赞数 1

分类专栏：云麓谷研发部中南大学前端文章标签： css html html5 css3 flex

本文链接：https://blog.csdn.net/weixin_51877075/article/details/120632512

版权

中南大学同时被 3 个专栏收录

13 篇文章 6 订阅

订阅专栏

云麓谷研发部

5 篇文章 2 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

introduction

这是中南云麓谷信息技术中心2021年招新的中级作业的详细解析。

考察的技术点

考察 HTML 知识点：div/span ,class/id ，图片，超链接等。
考察 CSS 知识点： flex 布局，盒子模型，fixed 定位，background 背景图片，box-shadow 阴影，元素圆角的控制等。

就照着这个图做：
在这里插入图片描述

技术挑战

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。如下图所示：
由图中我们不难发现，整个盒子模型主要就包括四个部分：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
盒子模型用得这么广泛，是因为它可以通过调整margin、border、padding等值，达到对整体布局自定义的效果。
它的难点主要应该是在div的划分上，到底把多大的容器当作一个盒子来操作会比较好呢？

div划分

首先，确定div，这个永远是任何前端工作的基础，只有合理划分div，才能更方便地使用各种布局达到想要的样式。比如就拿这道题为例吧：
我们很容易通过各类逻辑相关找出一个个不大不小的div，这应该是最容易思考的一部分，划分之后可能是这个样子：
经过上面的那一步，是不是整个骨架更清楚了一些呢？于是我们可以从更大的宏观范围来看，这些第一次被划分的div，能否再被一个父div包裹起来呢？也就是这样：

好像有点眼花是不是😂，那我们去掉红色的线框，只保留父div的蓝色线框，就变成了这样：
看起来已经很不错了，对吧，但其实我们还可以再做一次划分，注意，这次划分是按照功能来划分的，最顶上那一层div因为要做成fixed导航栏样式，所以单独分为一类，而下面的所有文本和图片内容都可以全部归属于一个大类，所以就是这样：
至此，我们的宏观划分就结束了，不过这样子就可以开始做了吗？显然好像还缺了点啥，就比如之前的红色框线包裹的小div，它们内部也有元素呀？这些div的大体样式倒是出来了，它内部这些元素的排列怎么办呢？于是，我们可以从更微观的角度来看：
比如说顶部在红色div之内还可以这样划分：

中间的小盒子可以怎么划分呢？或许可以这样：

那底部呢？相信聪明的读者已经不需要我再赘述了，大家可以按照上述方法划分着尝试一下哦！

flex布局

说起这个flex布局，不得不说这个是真的非常的方便呀！特别是和盒子模型的操作结合起来之后，基本上就是所想即所得，各种布局样式都可以随心应手的展现了。
这里强推阮一峰大佬的flex讲解，通俗易懂，适合新手入门。
阮一峰大佬的flex布局

参考代码

<!DOCTYPE html>
<html>
<head>
	<title>10.7第二次面试作业</title>
	<style type="text/css">
	/* CSS代码等面试结束之后才能看哦 */
	</style>
</head>
<body>
	<div id="head">
		<span><img src="image\Logo.png" alt="logo">Cratia</span>
		<ul>
			<li><a href="#About">About</a></li>
			<li><a href="#Menu">Menu</a></li>
			<li><a href="#Callery">Callery</a></li>
			<li><a href="#Contact">Contact</a></li>
		</ul>
	</div>
	<div id="menu">
		<h1>MENU</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	<div id="pics">
		<div class="img">
			<img src="image\Main Dishes.png" alt="Main Dishes">
			<div>
				<h1>MAIN DISHES</h1>
			</div><hr width="30px" color="#F5F5F5">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
		<div class="img">
			<img src="image\Soups.png" alt="Soups">
			<div>
				<h1>SOUPS</h1>
			</div><hr width="30px" color="#F5F5F5">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
		<div class="img">
			<img src="image\Hamburgers.png" alt="Hamburgers">
			<div>
				<h1>HAMBURGERS</h1>
			</div><hr width="30px" color="#F5F5F5">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
		<div class="img">
			<img src="image\Desserts.png" alt="Desserts">
			<div>
				<h1>DESSERTS</h1>
			</div><hr width="30px" color="#F5F5F5">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
		<div class="img">
			<img src="image\Barbecue.png" alt="Barbecue">
			<div>
				<h1>BARBECUE</h1>
			</div><hr width="30px" color="#F5F5F5">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
		<div class="img">
			<img src="image\Salads.png" alt="Salads">
			<div>
				<h1>SALADS</h1>
			</div><hr width="30px" color="#F5F5F5">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
	</div>
	<div id="foot">
		<img src="image\Logo.png" alt="Logo">
		<hr color="#F5F5F5">
		<p id="footp">Gratia Restaurant</p>
		<p>Copyright 2016. All rights reserved by symu</p>
	</div>
	<div id="contact">
		<ul>
			<li><a href="http://www.facebook.com" target="_blank"><img src="image\FB.png" alt="facebook"></a></li>
			<li><a href="http://www.twitter.com" target="_blank"><img src="image\TR.png" alt="twitter"></a></li>
			<li><a href="http://www.instagram.com" target="_blank"><img src="image\IG.png" alt="instagram"></a></li>
		</ul>
	</div>
</body>
</html>

看完讲解，还有代码骨架在此，整个作业完成是不是很容易呢？来，试试看吧！😉

新参者-tangent

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【如何进行div划分】云麓谷信息技术中心研发部中级作业【HTML+CSS静态页面】

introduction这是中南云麓谷信息技术中心2021年招新的中级作业的详细解析。考察的技术点考察 HTML 知识点：div/span ,class/id ，图片，超链接等。考察 CSS 知识点： flex 布局，盒子模型，fixed 定位，background 背景图片，box-shadow 阴影，元素圆角的控制等。参考标准就照着这个图做：技术挑战盒子模型所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒子模型
复制链接

扫一扫