第十六篇：制作公告展示页面
依据设计计划，首页已经完成，框架基本完工，其他的功能完善，需要其他页面的共同参与，所以接下来，就开始设计公告展示页面。
首先分析，公告展示页面需要展示的是公告文件，由于公告文件的性质，要求公告不能格式混乱，又严格定义，所以大多数公告都是展示的图片，或者PDF文档，然后下方提供下载连接。
这是设计稿中的公告页面的样式，包含了标题栏，公文列表，公文标题，还有一个可以快速回到首页的侧浮标。
基于之前的设计思路，我们要继承首页的标题栏1。
所以就需要使用首页的部分代码。
首先是新建页面文件夹，用来存放除首页外的其他页面文件，然后公告页的命名是：gonggao的首字母大写加上第二个字母小写。GoGa.html。
复制完首页代码后，需要把文件的引用位置做一个更改。添加一个“../”即可。
进行简单的代码修改，样式文件的引用位置，然后是注释的修改，如果没有特别的说明，建议所有的页面都添加相应的注释，对于后期的修改和更新有很好的帮助。因为页面多或者开发时间长，就会导致自己忘了自己当时为什么这么写这一段了，再去思考非常费时间。
然后就是尽量把功能都写成一个个的模块，后期方便升级和修改样式。
修改完代码，前往主页修改下公告的超连接，添加首页的超链接。
添加href地址超链接。然后就可以在主页通过单击文字来链接到公告页面了。
学院公告的样式发生了改变，说明连接已经添加了，单击学院公告，查看是否正常跳转。
跳转正常，页面只显示头部标题栏1。
这里，还要为标题栏1添加首页的超链接，用来返回首页。把学院直播位置，修改为学院首页。然后添加超链接。
首页也做相应的更改。
首页自己连接自己，单击时，类似于刷新页面了。
动作是添加成功了，但是样式改变了这就不符合我们的设计效果了。查看如何更改。
这是个继承样式书写方式，“.bt1-aa{}”含义就是在“.bt1-a”样式中包含的标签“a”的样式。除了颜色和下划线，其他的样式还是按照“.bt1-a”中的执行。
接着需要添加的是公告页面的页面主要内容。
为了便于展示，需要设计个公告的演示页。
这是一个关于社保的公告通知，上方使用文档进行了文字展示，下部给出了附件作为原件下载连接。
从页面结构上可以看出，这是从数据库抓取的页面，我们暂不采用这种，就采用图片的样式。
引入图片公告文件，查看下效果。
哎呦，为什么是个缩略图？仔细回去看看代码。
嗯，书写中忘记写“..”了，系统在寻找文件时，没有到上层文件夹，所以没有找到文件。修改后查看。
过于居左，与设计不符。
下拉过程中出现图片阶段现象，设计的图稿中，没有背景图片，此处也取消背景图片。然后公告的图片隐藏再了标题中一部分，而且图片上方还有公告的标题。
对标题1框添加固定模型位置，这样，在所有页面中，都是位置固定不动的。
添加后，出现了顶部位置空缺。下方元素上移，导致内容显示不全。
添加后，首页样式页发生了改变，嗯，为了防止首页变化，在样式中需要进行适当变化，来补充标题栏一空出的位置。
添加一个占位用的空盒子，用来顶替标题1的位置
样式采用标准，只设置高宽即可。
内容框，为了防止出现问题，将距离顶部的距离设置为45,避开标题栏，双层保险。
首页显示正常
接下来，去除公告页背景即可。然后是设计侧边栏和顶部底部的信息栏。