关于一个利用relative的简单布局，firefox上出现一点问题，暂且不明原因

firefox的

chrome的

代码记录

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>anime</title>

</head>

<style>

    div#all

    {

        margin: 0 auto;

        width: 1024px;

        height: 700px;

    }

    div.header

    {

        width: 100%;

        height: 80px;

        background-color: beige;

    }

    div.sidebar

    {

        width: 15%;

        height: 460px;

        background-color: chocolate;

    }

    div#nav ul

    {

        width: 85%;

        margin: 0 auto;

        list-style-type: none;

        position: relative;

        top: -460px;

        left: 57px;

    }

    div#nav ul li

    {

        float: left;

    }

    div#nav ul li a

    {

        width:145px;

        height: 28px;

        background:cornflowerblue;

        color: white;

        display: block;

        text-align: center;

        text-decoration: none;

    }

    div#nav ul li a:hover

    {

        width: 145px;

        height: 26px;

        line-height: 28px;

        color: cornflowerblue;

        background: white;

    }

    div.content

    {

        width: 85%;

        height: 432px;

        background-color: darkseagreen;

        position: relative;

        top: -432px;

        left: 154px;

    }

    div.footer

    {

        width: 100%;

        height: 50px;

        background-color: burlywood;

        position: relative;

        top: -432px;

</style>

<body>

<div id="all">

    <div class="header"></div>

    <div class="sidebar"></div>

    <div id="nav">

        <ul class="nav-content">

            <li><a href="#">首页</a></li>

            <li><a href="#">动画</a></li>

            <li><a href="#">漫画</a></li>

            <li><a href="#">小说</a></li>

            <li><a href="#">讨论</a></li>

            <li><a href="#">下载</a></li>

        </ul></div>

    <div class="content">

        <div class="content-1"></div>

        <div class="content-2"></div>

        <div class="content-3"></div></div>

    <div class="footer"></div>

</div>

</body>

</html>

overcast的更多相关文章

  1. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  2. WEKA使用

    参考 http://bbs.middleware123.com/thread-24052-1-1.html  使用Weka进行数据挖掘 http://quweiprotoss.blog.163.com ...

  3. 建模分析之机器学习算法（附python&R代码）

    0序 随着移动互联和大数据的拓展越发觉得算法以及模型在设计和开发中的重要性.不管是现在接触比较多的安全产品还是大互联网公司经常提到的人工智能产品(甚至人类2045的的智能拐点时代).都基于算法及建模来 ...

  4. C4.5算法的学习笔记

    有日子没写博客了,这些天忙着一些杂七杂八的事情,直到某天,老师喊我好好把数据挖掘的算法搞一搞!于是便由再次埋头看起算法来!说起数据挖掘的算法,我想首先不得的不提起的就是大名鼎鼎的由决策树算法演化而来的 ...

  5. 数据挖掘算法（一）C4.5

    统计了14天的气象数据D(指标包括outlook,temperature,humidity,windy),并已知这些天气是否打球(play).如果给出新一天的气象指标数据:sunny,cool,hig ...

  6. 机器学习之决策树熵&信息增量求解算法实现

    此文不对理论做相关阐述,仅涉及代码实现: 1.熵计算公式: P为正例,Q为反例 Entropy(S)   = PLog2(P) - QLog2(Q); 2.信息增量计算: Gain(S,Sv) = E ...

  7. WEKA使用（基础配置+垃圾邮件过滤+聚类分析+关联挖掘）

    声明: 1)本文由我bitpeach原创撰写,转载时请注明出处,侵权必究. 2)本小实验工作环境为Windows系统下的WEKA,实验内容主要有三部分,第一是分类挖掘(垃圾邮件过滤),第二是聚类分析, ...

  8. Overlay network 覆盖网络

    From Wikipedia, the free encyclopedia An overlay network is a computer network that is built on top ...

  9. 69.Android之天气预报app

    最近买了本书<Android第一行代码>,通篇看了下感觉不错,书本最后有个实战项目酷欧天气,闲来无事就照着敲了一遍代码,主要在请求天气接口和背景优化做了些小改动,现在来记录下. (1) a ...

随机推荐

  1. new date() 函数在浏览器中的兼容问题！！

    引言: 同一种语言javascript,在不同的浏览器中,存在语言兼容性问题,本质上是由于不同的浏览器是支持的语言标准和实现上各有差异.本文将基于new Date来创建Date对象来分析这个问题. v ...

  2. C++ 性能剖析 （二）：值语义 (value semantics)

    Value Semantics (值语义) 是C++的一个有趣的话题. 什么是值语义? 简单的说,所有的原始变量(primitive variables)都具有value semantics. 也可以 ...

  3. 利用Format函数格式化时间和日期

    在做机房收费系统的时候,因为需要使用到日期进行查询,所以在数据表中没有使用自动添加日期的功能,而是采用了自定义的格式插入.但由于事先没有对时间转换的格式进行统一,导致后面查询时出现的问题不断. 插入时 ...

  4. A Linear Time Majority Vote Algorithm

    介绍一种算法,它可以在线性时间和常数空间内,在一个数组内找出出现次数超过一半的某个数字. 要解决这个问题并不难,可以使用排序或哈希,但是这两种算法都不能同时满足时间或空间的要求. 然而,该算法(A L ...

  5. addChildViewController 用法

    // // SCMyOrderViewController.m // SmartCommunity // // Created by chenhuan on 15/9/7. // Copyright ...

  6. template of class

    class template will call the constructor of its member object before constructor itself......

  7. ASP.NET MVC学习之路：模板页

    1.MVC开发步骤: 控制器-视图. 2.每一个视图都会有一个默认的模板页:_ViewStart.cshtml. 名字不能改,只能叫_ViewStart. 3.Layout＝”~/Views/Shar ...

  8. Linux查看一个文件夹大小

    1.Linux查看一个文件夹大小: du -sh /home/yangkun [yangkun@sg1 bin]$ du -sh /home/yangkun/ 164M /home/yangkun/ ...

  9. Baidu Map Web API 案例

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. Android开发程序获取GPS信息步骤

    1.获取LOCATION_SERVICE系统服务.2.创建Criteria对象,调用该对象的set方法设置查询条件.3.调用LocationManager.getBestProvider(Criter ...