人机交互第八次作业——网站双列布局 2015100359012 王然

本地.html代码用浏览器运行正常,但由于博客园的自动排版问题未达到实际效果。

body { background: gray; text-align: center; margin: 0; padding: 0 }
#wrapper { width: 800px; background: white; text-align: left }
#branding { background: #aaaaaa; height: 100px; line-height: 100px }
#branding div { font-size: 2em; text-align: center }
#footer { background: black; color: white; height: 80px; line-height: 80px; font-size: 1.5em; text-align: center; clear: both }
#content { background: yellow; width: 619px; float: right }
#mainNav { width: 180px; float: left }
#mainNav ul { list-style: none; margin: 0; padding: 0 }
#mainNav ul a { text-decoration: none; color: white; background: #222222; display: block; width: 150px; height: 2em; line-height: 2em; border-bottom: solid white 1px; text-indent: 1em }
#mainNav ul a:hover { background: white; color: black }
#branding ul { list-style: none; margin: 0; padding: 0 }
#branding ul a { text-decoration: none; color: white; background: #222222; line-height: 2em; border-bottom: solid white 1px; float: left }
#branding ul li { float: left }
#branding ul a:hover { background: white; color: black }

北京联合大学

  • 首页
  • 学校安排
  • 日常事务
  • 教务系统
  • 获奖情况
  • 机构设置
  • 财务系统

内容

  • 信息学院
  • 自动化学院
  • 旅游学院
  • 艺术学院
  • 管理学院
  • 商务学院
  • 机器人学院

Copyright @buu.edu.cn

时间: 2024-10-14 05:00:08

人机交互第八次作业——网站双列布局 2015100359012 王然的相关文章

八种创建等高列布局

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux

八种创建等高列布局(转载)

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux

八种创建等高列布局【出自w3c】

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux

CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局. 1. 首先,使用浮动布局来实现一下 See the Pen float-three-columns by xal821792703 (@honoka) on CodePen. 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的

等高列布局、水平垂直居中与置顶页脚(转载)

等高列布局 在<八种创建等高列布局>一文中详细介绍了八种创建等高列布局的不同方法.可以说这些方法足以满足你的业务需求,当然其中有一些方法略为繁琐,也有时转得人头晕.在今天这种技术环境之下,如果的业务对IE低版本依赖性不是非常强的情况之下,可以考虑一些新的方法来实现.接下来我与大家一起探讨几种新方法实现等高列布局. Flexbox方式 Flexbox是一个强大而又神奇的CSS3模块,而且到现在,也得到众开浏览器的支持.有了这个模块,可以帮助我们做很多事情,而且较之以前的方案要更简单,唯一蛋疼的是

jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

由于移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能需要并排放置一些元素(如按钮之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局方法.共提供了五种布局方式,分别是:ui-gird-solo:单列布局,ui-gird-a:双列布局,ui-gird-b:三列布局,ui-gird-c:四列布局,ui-gird-d:五列布局.布局网格总宽度100%,完全不可见(无边框无背景),没有任何内边距或外边距,不会对网格中的内容产生任何干扰. 今天我

java018.双列集合Map

day18双列集合MapMap接口和Collection接口的区别: * Map是双列的,Collection是单列的 * Map的键唯一,Collection的子体系Set是唯一的,List体系可以存储重复值 * Map集合的数据结构值针对键有效,跟值无关;Collection集合的数据结构是针对元素有效 * a:添加功能  * V put(K key,V value):添加元素.   * 如果键是第一次存储,就直接存储元素,返回null   * 如果键不是第一次存在,就用值把以前的值替换掉,

双列集合Map及实现该接口的类的常用方法

为什么要学双列集合? 因为单列集合无法处理映射关系,会有成对出现的数据 Map接口  如果是实现了Map接口的集合类,具备的特点: 存储的数据都是以键值对的形式存在的,键不可重复,值可以重复 Map接口的方法:   添加:    put(K key, V value)     putAll(Map<? extends K,? extends V> m)    删除    remove(Object key)     clear()   获取:    get(Object key)     si

耿丹16-1第八次作业

-- Deadline: 2016-11-14 20:00pm -- 作业内容:https://edu.cnblogs.com/campus/bjgygd/Sixteen-One/homework/178 -- 第八次作业总结: 1. 这次作业发布有些迟,所以迟交的同学,我目前没有扣分数,部分同学还未来得及交作业,请补上. 2. 表扬111.125.117.131.109.101.107.119等同学. 3. 大家遇到不会的题,参考别人代码时,请注明下!并且请认真验证,思考下程序的正确性!一定要