门户网站系统架构图门户网站构成

转载

月光倾城美 2023-11-10 10:28:48

门户网页一般分为三部分，头部、内容区、尾部；一般为头部和尾部设置绝对高度。

0 . 全局样式

一般会设置全局margin、padding、字体（样式与大小）、全局背景（在body部分写）、去除列表li的样式、<a>标签样式改变、为input标签添加的outline：0（清除光标点击内容区边框变色问题）。

1、1头部结构

　　根据设计图获取高度值,设置宽度为100%，头部区又可分为headcenter、（有时为了调间距会增一个headline，加一个background-color）headmain、headtitle三部分，在headcenter中包含logo区和headuser区，headuser中由列表项和搜索框组成。headmain中为背景大图区。headtitle位于headmain上，通过在有相对定位的head上绝对定位得到（两张背景图片层叠，却可以看到两张图是因为前面的一张图的背景是透明）。

1.2头部样式

　　head部分宽度取100%,并设置头部高度。设置背景图片，background的left、top值实现定位。

　　headcenter确定绝对宽度,再用margin：0 auto实现区域居中。

　　　　logo部分<a>标签包裹一个<div>,为div设置宽高，再引入背景图片。左浮动。

　　　　headuser部分无序列表ul float:right;li float:left;设置li的margin值及li下的<a>的padding值实现定位。（在headuser下有搜索框的情况，应该用包裹曾包裹ul及searchbox，整体float：right;)

　　　　搜索框的一般做法：<div>里由<input>和<button>标签组成，

　　　　为input设置宽高后，由于其自带border和background，为和button融合的更好，可以为其设置border：0；background：0；一般会为其设置outline：0；（全局样式已介绍），text-indent:3px

　　　 button设置宽高，去除边框，border：0；换上想要的背景图；想要变成手形就是cursor：pointer；

　　headline部分就是div宽度为100%，高度较小的盒子，看着像分割图

　　headmain部分一般用来放大图，设置width：100%，高度，用背景图的方式载入，！！因为图片大小和屏幕大小不一致，图片过大正常排列会使得图片部分出露，因此！必须为background是指left top值，水平居中则left值为center，顶上则是top.

若在以headmai为背景，并也有自己的背景可以设置宽高后绝对定位，覆盖后透明效果是因为图片本身是透明，z-index值也可以用。

2.1内容区结构

内容区在有大背景图的情况下会设置一个大div包含内容区，内容区div一般具有具体宽度（无高度，由于其内部元素也会有浮动，导致其背景图片可能消失，这时仅需要对其也进行float即可），其下content若是相同样式图片的排列(无搜索框情况)，则是用无序列表的形式在html中img的方式引入图片。li元素下大体上分为两部分，上部为图片区<div>,下部为解释区<div>。

　　<div>中包括装图片img及图片上文字图片的div,（用绝对定位及z-index上去）

　　下部解释区，用p标签写

2.2 内容区样式

为大背景mainbodybg设置宽度100%及把bg设置到想要的位置，为mainbody部分设置宽度使其居中（margin：0 auto;）,设置margin-top可间距。

　　现在开始为每一个列表设置。为li元素设置宽度。margin-bottom及margin-right;

　　为装img的盒子设置高度，同时也要在img上设置宽高以保证图片不超过盒子。至于图片上的文字，样式为绝对定位（前提是装img的盒子相对定位），可以设置width：x%，left：(100-x)/2,top值50%，再margin-top:-一半大小即可实现上下左右居中。需要说明的是需要设置z-index值。图片上文字的z-index值大于插入图片的值。一排小图片的居中设置用到的是首先整体居中，然后依次float,小图片的引入用<i>标签，内联元素要可以设置高度只需要对其设置float即可。

　　为解释内容设置宽度（li宽度的百分数）padding值的设置也可以实现居中。可以为p标签设置line-height来实现行间距。

　　其他li元素排列时，发现需要改间距再就近调