首先，我们先看看制作出来的页面效果：
在这个页面框架中，涉及到的有背景图片，插图，以及各种文字的排版，另外添加了一个水平导航栏。我相信这肯定是做页面最基础的几个元素了。但是在设计的过程中，我们将会遇到哪些问题和新的编程思路呢？
（1）第一步，我们平铺背景图，可以使用到的方法是：1.在css设计中直接使用body{}来对图片进行设置。2.在<body>中也可以通过url的方式导入图片。在这里我采用的是第一种方式：
（2）背景设置成功后，我们可以去下载好所需要的图片和新闻内容，进行排版。在排版过程中，我们可以先通过<p>标签，<br>标签和<hr/>标签来囊括全局。这样我们会看到一份全部居左浮动的效果。当我们想快速的将内容全部居中显示的时候，就可以用到css进行调整。
·在排版的过程中，我认为是可以有三种方式的。我们可以很明显的看到我们的新闻布局中是垂直分布，文字+图片+图注的格式。所以我们有三种方式可以去用。1.直接法：将所有的内容排列好，然后对于每个内容使用居中排列，采用css或h5调整文字/图像居中。如：text-align:center;如图：
。2.使用块级元素<div>将整个页面作为上下两个板块。上版块做导航栏，下版块做内容，同时设置两个板块之间的间距，另外调整盒子的内边距和外边距。例如：将第二盒子的整体调整距顶部的距离。如图：
。3.可以使用表格标签<table>来完成。我们可以先将内容一段文字+一张图片+一张图注分为一纵列。则为一行三列的格式。然后将内容以表单的形式写入。（这里不做展示，可自行研究）
（3）当整体排版完成后，插入导航栏，这里使用的水平导航，我们可以先将导航内容设置为跳转链接，然后再对导航栏的格式做个整体优化。如图：
h5内容：
当完成这几个内容时，基本效果就成功了。但是，如果想要实现一个动态的情况，我认为还可以通过js来实现元素浮动，或者将导航链接换成按钮的形式。再采用js实现图片点击即放大或跳转的形式会更好，以及更加美观。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
