计算机科学学院静态网页

系统管理员 2021-12-24 14:39 231阅读 0赞

# 用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的宽度这样的方法)

## 二、效果图 ##

![1266199-20190317105830455-560944437.png][]![1266199-20190317105838039-1682760528.png][]

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

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

[1266199-20190317105830455-560944437.png]: https://img2018.cnblogs.com/blog/1266199/201903/1266199-20190317105830455-560944437.png
[1266199-20190317105838039-1682760528.png]: /images/20211223/e064ad20cb244f699ddc1dc00bb5c23a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

还没有评论，来说两句吧...

相关阅读

相关中山大学新华学院计算机,中山大学新华学院信息科学学院电子信息科学与技术、计算机科学与技术、软件...

![5cd8e7a3c8bbe91b14c7bfa4e7c54a67.png][] 7月14日下午，中山大学新华学院信息科学学院电子信息科学与技术、计算机科学与技术、软件工程

ゝ一纸荒年。/ 2022年10月13日 02:34/ 0 赞/ 279 阅读

相关计算机学院名师风采,教师风采 | 信息科学与技术学院

原标题：教师风采 | 信息科学与技术学院专业课教师高敬阳个人简介高敬阳，博士，教授，博士生导师，北京市教学名师。信息学院计算机系系主任，担任计算机专业负责人、

川长思鸟来/ 2022年10月12日 02:00/ 0 赞/ 289 阅读

相关苏州大学计算机科学学院院长,李凡长——苏州大学计算机科学与技术学院院长...

李凡长：奋战计算机前沿　缔造科技新时代 ——记苏州大学计算机科学与技术学院院长李凡长及团队当我们享受互联网时代的种种便捷时，有一群正在为网络信息技术的飞速发展默默奉献的学

深碍√TFBOYSˉ_/ 2022年10月12日 01:56/ 0 赞/ 1327 阅读

相关蚌埠学院计算机网络,蚌埠学院计算机科学与技术系介绍

蚌埠学院计算机科学与技术系现有教职员工69人，包括师资59人(其中专任教师57人),专职管理人员4人、实验教辅人员6人。师资中硕士研究生以上人员42人，占师资比例为71.2%。

Dear 丶/ 2022年10月11日 03:53/ 0 赞/ 248 阅读

相关赤峰计算机专业学校,数学与计算机科学学院 _ 赤峰学院

《计算机组成原理》实验教学大纲一、实验课程基本信息课程编号：080605210 课程名称：计算机组成原理实验课程类型：专业必修课适用专业：计算机科学与技术专业

朴灿烈づ我的快乐病毒、/ 2022年10月10日 09:27/ 0 赞/ 226 阅读

相关山大计算机科学与技术学院官网,冯好娣-山大计算机科学与技术学院

![97be618dde58da34b7f97029ccdbdc8b.png][] 冯好娣教授山东大学计算机科学与技术学院、软件学院山东省济南市舜华路1500号

你的名字/ 2022年10月09日 14:22/ 0 赞/ 250 阅读

相关宿迁学院计算机科学与技术,2016年宿迁学院计算机科学与技术专业最低分是多少？...

类似问题答案 2016年厦门理工学院计算机类(含计算机科学与技术、网络工程、空间信息与专业最低分... 学校地区专业年份批次类型分数厦门理工学院福建计算

朴灿烈づ我的快乐病毒、/ 2022年10月09日 05:56/ 0 赞/ 176 阅读

相关西北师范大学计算机科学与工程学院院长,西北师范大学计算机科学与工程学院.doc...

西北师范大学计算机科学与工程学院.doc 西北师范大学计算机科学与工程学院研究生学位论文撰写及印制规格要求根据《西北师范大学研究生学位论文撰写及及印制规格的规定》，根

迈不过友情╰/ 2022年10月09日 02:36/ 0 赞/ 258 阅读

相关运城学院计算机科学与技术系,运城学院计算机科学和技术系.doc

运城学院计算机科学与技术系 2014—2015学年第二学期期末考试《程序设计基础》试题(B) 适用范围：计算机科学与技术专业1401——1404班信息管理与信息系统

超、凢脫俗/ 2022年10月09日 02:29/ 0 赞/ 276 阅读

相关计算机科学学院静态网页

用HTML+CSS编写一个计科院网站首页的静态网页一、布局流程　　1.页面CSS+DIV式外层布局　　先分析网页的框架结构，根据CSS+DIV布局方式可

系统管理员/ 2021年12月24日 14:39/ 0 赞/ 232 阅读