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

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

首先看一下效果

网页模板一

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

优酷的官网

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

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

这里就要讲到盒子模型。

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

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

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

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

比如:

每当何老师看到这些网页

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

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

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

对网页进行粗暴的分解

请输入图片的描述

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

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

初步如下

图片名

请输入图片的描述

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

有句mmp不知当讲不当讲。

图片名

没保存没保存,没保存。

图片名

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

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

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

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

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

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

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

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180609G1QBPE00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

同媒体快讯

扫码关注腾讯云开发者

领取腾讯云代金券