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 

  • 相关阅读:
    π框架参数规则(正则表达式验证)
    SQL查询优化的一些建议
    phalApi框架打印SQL语句
    phpstorm注册码
    phalApi数据库操作
    内容的全局搜索
    xampp虚拟主机的配置
    navicat自动备份数据
    IOC和AOP扩展
    Spring AOP
  • 原文地址:https://www.cnblogs.com/xjtsh/p/10545951.html
Copyright © 2011-2022 走看看