博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
计算机科学学院静态网页
阅读量:5835 次
发布时间:2019-06-18

本文共 659 字,大约阅读时间需要 2 分钟。

用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

你可能感兴趣的文章
【阿里云文档】常用文档整理
查看>>
java中的Volatile关键字
查看>>
前端自定义图标
查看>>
实验二
查看>>
独立开发一个云(PaaS)的核心要素, Go, Go, Go!!!
查看>>
MyBatis使用DEMO及cache的使用心得
查看>>
网站文章如何能自动判定是抄袭?一种算法和实践架构剖析
查看>>
【OpenCV学习】滚动条
查看>>
ofo用科技引领行业进入4.0时代 用户粘性连续8个月远甩摩拜
查看>>
兰州青年志愿者“中西合璧”玩快闪 温暖旅客回家路
查看>>
计划10年建10万廉价屋 新西兰政府:比想象中难
查看>>
甘肃发首版《3D打印职业教育教材》:校企合作育专才
查看>>
李娜入选国际网球名人堂 成亚洲第一人
查看>>
为找好心人抚养孩子 浙江一离婚父亲将幼童丢弃公园
查看>>
晚婚晚育 近20年巴西35岁以上孕妇增加65%
查看>>
读书:为了那个美妙的咔哒声
查看>>
jsp改造之sitemesh注意事项
查看>>
智能硬件的时代,嵌入式是否已经日薄西山
查看>>
SpringBoot-Shiro使用
查看>>
iOS 9.0之后NSString encode方法替换
查看>>