网页设计期末作业模板分解

本着分享的心态，和各位分享两个期末作业的模板。同样想通过这个模板来和各位小结一下盒子模型。

首先看一下效果

网页模板一

这是我一个同学发给我的一张图片。让我帮她做按照这张图做出对应的效果图。因为她们是学习美术的。就真的至给了一张图片。

优酷的官网

今天随手收的。其实这样的对于现在的我们可能有一定难度，不过做出他的大模型还是可以的。今天以这一个为例，可是在调整的时候花了太多时间，我放弃了，之做了一小部分。

就以这两个为例来分享一下吧。

这里就要讲到盒子模型。

老规矩，忘记书本上那些“科学”的定义。用自己的话去理解这些东西，只有这样，他们才是真的有用的。

既然叫盒子模型的，那就把他想成像一个盒子一样的容器，在这个容器中，可大可小，还可以改变颜色。反正啊就是有很多属性，所以啊这个盒子真的是很有意思了。

下面就直接开始制作吧。就以后面那个图片为例吧。

首先看到一个网页，我们需要有一种想去分析的欲望。

比如：

每当何老师看到这些网页

“看，这里看作一个盒子，里面放图片。这里居中，下面这个盒子浮动起来。加一个背景。这里是无序列表。。。。”

我们需要的就是看到一张图片，就要将具体的内容忽略掉，提取这其中的框架。

比如你看完之后有种想把图片分成几个部分的冲动。

对网页进行粗暴的分解

请输入图片的描述

这里做最粗糙的处理把，这张网页看出三个盒子。

因为要对盒子进行相应的属性修改规定，所以这里用到css来搭建框架。

初步如下

图片名

请输入图片的描述

初步分成三个部分。然后再对具体的进行分析。

有句mmp不知当讲不当讲。

图片名

没保存没保存，没保存。

图片名

算了。直接上第一个盒子做好的效果吧。

不过我不想做下去了。直接把第一个模板的代码给给出吧。反正记住一点。

分析分析然后再开始堆砌。这些其实都还好，最烦的后面的调整。

这个通过网页的检查可以慢慢调。

上面第二个模板。完成第一个大盒子的效果。

效果图可以自行复制在对应的软件打开。

上面第一个模板的代码：（这个其实是我一个同学拜托我做的，我做的非常粗糙，只是希望她自己更加的去补充。）

看上去是会有一点多可是，你会发现很多都是重复的。只要抓住核心，一切都会简单起来的。

您看此文用·秒，转发只需1秒呦~