DIV+CSS布局门户网站

最终效果图:

DIV+CSS布局门户网站_第1张图片

首先分析一下网页,了解到整体排版情况,这是网页中比较重要的,因为排好版式内容就可以随意的替换,方便网页的更新等等。

版式分析图:

DIV+CSS布局门户网站_第2张图片

搭好版式后,其他内容就好处理了,不过在做时,容易出现div位置不同情况,所以还是需要注意的。

然后通过外部样式表来建立css,为每一个模块添加内容与版式,像是导航栏就用到了定义列表。

因为大部分css给出了样式,所以排版过程中还是比较顺利的,就是填充文字、图片时,最好是从上往下,从里往外,因为最外面两边的背景一开始添加,可能效果不太明显,容易误判断为自己搞错了,其实只是版式层叠造成的,所以当一面不太顺利时,可以换个方向再继续。还有就是css的多种类型了,所以在不出效果时,多调整下,注意细节就好了。最主要的是调用css是用的,不要少了项目。

第二页效果图:

通过选择内容进入详细页面

DIV+CSS布局门户网站_第3张图片

你可能感兴趣的:(java,web)