计算机科学学院静态网页

用HTML+CSS编写一个计科院网站首页的静态网页

一、布局流程

　　1.页面CSS+DIV式外层布局

　　先分析网页的框架结构，根据CSS+DIV布局方式可以将网页分为Head头，导航栏、宣传图片、展示新闻内容、页脚等五个部分。即页面上存在最外层从上往下的五个DIV。设置相应的背景颜色，部分对应的背景图片以及固定或者自适应的宽度与高度，DIV之间的间距等，然后在游览器上观察展示效果。

　　2.填充内容

　　从上往下一次分析每一个DIV的内容结构，为里面的DIV采用相对、绝对或者固定式布局，并设置浮动效果，然后为每一个DIV填充内容，修改字体颜色、大小、样式、内外边距等，使得页面更加和谐。

　　3.发现网页存在的bug

　　在每一个DIV和大多数标签采用CSS设置样式后，第一时间达不到理想中的效果，特别是相同标签在不同地方进行设置后的权重问题。所以都尽量采用类选择器加标签以及字标签等设置属性的方法，如#div-coontent>ul、#div-content ul li等,防止属性设置之间的冲突。

　　4.尚存问题

　　导航栏获取焦点的时候下拉标题内容时，会撑大ul破坏原本导航栏各标签之间的间距，暂时还未得到解决。(除了固定每一个ul的宽度这样的方法)

 

二、效果图

 

百度云盘链接：链接: https://pan.baidu.com/s/1W60KJzETPNvfV1YJa2ZLIw 提取码: qmvi 

转载于:https://www.cnblogs.com/xjtsh/p/10545951.html