关于一个利用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. C#结课报告

    Revision History Date Issue Description Author 18/May/2015 v1.0 Initial creation 邓彪翼 模拟图书馆的查询系统 1.ob ...

  2. MySQL查询执行的基础

    当希望MySQL能够以更高的性能运行查询时,最好的办法就是弄清楚MySQL是如何优化和执行查询的.一旦理解这一点,很多查询优化实际上就是遵循一些原则让优化器能够按照预想的合理的方式运行. 换句话说,是 ...

  3. web前端知识

    4.表格与表单 4.1 动态添加行 <script language=”javascript”> window.onload=function(){ var oTr = document. ...

  4. 汉诺塔 Hanoi Tower

    电影<猩球崛起>刚开始的时候,年轻的Caesar在玩一种很有意思的游戏,就是汉诺塔...... 汉诺塔源自一个古老的印度传说:在世界的中心贝拿勒斯的圣庙里,一块黄铜板上插着三支宝石针.印度 ...

  5. C# 文件读写异常“正由另一进程使用，因此该进程无法访问该文件”

    最近在对文件进行读写操作时,利用using的方法可还是遇到了异常"文件正由另一进程使用,因此该进程无法访问该文件": public bool WriteUserInfo(strin ...

  6. sql对日期的处理，一个存储过程示例

    IF v_docType = 3 THEN update T_PATIENT_INFO set USER_NAME =userName ,SEX = v_sex,BIRTHDAY = to_date( ...

  7. jdk8永久代从方法区移除的验证

    /*** 测试使用jdk8中是否仍然可以使用永久代* jvm options * -Xms20m -Xmx20m -Xmn10m -XX:PermSize=10m -XX:MaxPermSize=10 ...

  8. 30种IT技能让你年薪过10万美元！

    科技行业的高薪岗位向来不少,但在不断变化的职场中,热门技能却随时在变:今天的热门技术,明天可能就会过时.美国求职网站 Dice.com 最近发布了 2015 年薪酬报告,通过对 23,470 位 IT ...

  9. HDOJ(HDU) 1673 Optimal Parking

    Problem Description When shopping on Long Street, Michael usually parks his car at some random locat ...

  10. 程序设计实习MOOC / 继承和派生——编程作业 第五周程序填空题1

    描述 写一个MyString 类,使得下面程序的输出结果是: 1. abcd-efgh-abcd- 2. abcd- 3. 4. abcd-efgh- 5. efgh- 6. c 7. abcd- 8 ...