面页制作总结（耶曼）

周一时拿到了一份设计稿，版面如下图

鼠标状态

版面分析：

全版宽度1440px，辅助线间的宽度为1000px;整版布局结构大致为

body>div.wrap>(div.top>div.top-middle)+(div.banner>(ul>li*6>img+div.bannerIntro)+div.bannerTab)+(div.bottom>ul.Intro>li*4)+(div.CopyRight),tab一下

div.wrap主要是考虑到版面有个斜纹暗色背景，处理斜纹暗色背景可以通过div.wrap的background设置。

基本样式

*{margin:0;padding:0;}
.wrap{width:100%;}
/*头部白色部分*/
.top{width:100%;position: absolute;}
.top-middle{width:1000px;margin:0 auto;}

/*banner图片轮播*/
.banner{width:100%;position:relative;height:640px;}
.banner li{width:100%;position:absolute;top:0;left:0;}
.banner li .bannerIntro{width:1000px;position: absolute;left:50%;margin-left:-500px;}
.banner .bannerTab{width:1000px;position: absolute;bottom:0px;}
/*底部公司业务介绍*/
.bottom{width:1000px;margin: 0 auto;}
.bottom li{float: left;width:250px;}

/*版权及联系方式*/
.CopyRight{width:1000px;margin:0 auto;}

大致的架构设想好后，开始细节的处理。这里主要记录处理细节上遇到的几个问题。

第一：处理头部白色部分时遇到的垂直margin问题。

头部白色部分的HTML结构如下：(div.languageShare>(ul.share>li*3)+(dl.language>dt+dd))+(div.logoNav>(h1.logo>a)+ul.nav>li*7>p+ul>li*4)，tab一下：

  

白色部分样式表大致如下:

/*languageShare*/
.languageShare{float:right;padding-top:10px;width:}
.language{float:right;}
.share{float: right;}

/*logoNav*/
.logoNav{width:100%;margin-top:52px;}
.logo{float:left;}
.nav{float:right;}
.nav li{float:left;}

在此之前，我没对div.top-middle进行任何的加边框和加内边距处理。当我尝试为用margin-top:52px为div.logoNav定位时，悲剧发生了~

由于div.top-middle(灰色部分)没有padding或者边框，也没有设置overflow:hidden;显示的效果如上所示。

最后参考http://www.w3school.com.cn/css/css_margin_collapsing.asp发现这是由于外边框合并问题所引起的。解决方案是给div.top-middle设置样式overflow:hidden。

PS：如果div.top-middle样式中设置有clear:both;那么，在外边距合并的情况下，显示如下：

div.top-middle的margin-top失效，无论设置任何值都无效。

 

第二：div.bannerIntro位置设定的问题。

由于缺乏处理经验，对于div.bannerIntro的位置的设定，开始是想通过添加一个外层div.AAA; .AAA{width:1000px;margin: 0 auto;}，将外层DIV居中后再对div.bannerIntro进行位置设定，这样banner的HTML结构就变成了div.banner>(ul>li>img+(div.aaa>div.bannerIntro))+div.tab,如下图：

但是这样的设定复杂了html代码的结构，多了无语义的标签div.aaa，而且样式表的设定也很繁琐。最终舍弃了该方法。

在QQ群好友的建议下，在知道了辅助线中间部分的宽度为设定div.bannerIntro的样式为{width:1000px;position:absolute;left:50%;margin-left:-500px;}相对于父级li定位。最终得以解决。

第三：公司业务介绍模块div.bottom>ul.Intro>li*4，li的高度变化问题。

按照对设计稿的理解，设计师的意愿是希望点击该项时,该项升起：

初始的想法是希望通过对li进行绝对定位，{position:absolute;bottom:0px;}当li高度改变时，达到升起的效果。但是，当设置li为position:absolute;时，li的{float:left;}样式无效了，4个li全部重叠了在一起，在第一个li的位置。

最终在网友的指导下，对li的内部结构进行了修改，最终结构如下：li>div.abso>(p.tittle+(div.slideUP>div>img+p))，初始时，将li的高度定为p.tittle的高度，li设置position:relative;  div.abso设置样式{position:absolute;bottom:0px;width:100%;/*相对于li的宽度250px;*/};div.slideUP的关键样式{height:130px;display:none;overflow:hidden;}当鼠标点击时，div.slideUP的高度改变时，撑起div.abso的高度，从而使整个li在视觉上有升起的效果。

HTML代码结构如下:

最终问题解决。

 

总结时，对页面进行了测试，发现在改变浏览器窗口大小时，banner的图片发生了扭曲。

原代码中,div.banner>ul.pic>li*6>img+div.bannerIntro，

对div.banner下的标签进行样式设置：

.banner{width:100%;position:relative;}
.pic li{width:100%;position:absolute;top:0px;left:0px;}
.pic li img{width:100%;position:absolute;}

在浏览器窗口大小改变时，图片变形了.

在知道图片宽度大小为1440px的情况下，最终解决方案是：

.banner{position:relative;width:100%;height:640px;}
.banner .pic li{position:absolute;top:0;left:0;width:100%;overflow:hidden;height:600px;}
.banner .pic img{width:1440px;height:600px;position:absolute;left:50%;margin-left:-720px;}

至此，页面的问题基本完成。

还有个细节是，在语言切换部分，之所以选择了dl>dt+dd是因为考虑到了交互的问题。当用户点击时，改变dt和dd中的html，从而达到视觉上的改变。