计算机科学学院静态网页
用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