zoukankan      html  css  js  c++  java
  • 计算机科学学院静态网页

    用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 

  • 相关阅读:
    UOJ309 UNR #2 排兵布阵
    BZOJ4860: [Beijing2017]树的难题
    CQOI2017 部分题解
    SDOI2017 Round1 Day2 题解
    记SCOI2017
    BZOJ3810: [Coci2015]Stanovi
    BZOJ4785: [Zjoi2017]树状数组
    「ZJOI2007」「LuoguP1169」棋盘制作(并查集
    「LuoguP4147」 玉蟾宫(并查集
    「LuoguP1402」 酒店之王(最大流
  • 原文地址:https://www.cnblogs.com/xjtsh/p/10545951.html
Copyright © 2011-2022 走看看