关于一个利用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. 搭建ngrok服务器（ubuntu 14）-- 微信 80端口和IPC备案限制解决方案

    概述: ngrok其实这东西,我也不是很懂,所以也直接跟大家说,这就是个类似花生壳的东西. 简单来说,它就好像把我们内网自己使用的电脑和服务器用vpn连接起来,然后你的电脑就可以从互联网来访问了,有个 ...

  2. html网页代码各种名称及作用

    基本Web页文件<HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY>< ...

  3. jquery实现定时调度（倒计时）

    工作需要实现了倒计时的脚本,代码如下: /** * 倒计时 * @param infoId :信息显示的id 最好是用span包裹 * @param callback:倒计时结算后的回调 */ fun ...

  4. impdp/expdp 总结

      impdp/expdp   1.创建DIRECTORY create directory dir_dp as '/tmp';   --建议将DIRECTORY 建在 /tmp 表下面,该目录肯定存 ...

  5. c语言实现BMP图像转换为灰度图

    当初是自己要装X,非要用c来写信息隐藏作业,装了X,就得付出实践.查了好久资料,到期末才把作业交了,这里总结一下. 这道题是将真彩图转换为灰度图. 关于BMP文件结构,这是困扰了我好久的问题,上网查了 ...

  6. office2003万能密钥

    保证有效 OFFICE 2003 :  GWH28-DGCMP-P6RC4-6J4MT-3HFDY

  7. APKTool用法

    APKTool是GOOGLE提供的APK编译工具,需要JAVA运行环境,推荐使用JDK1.6或者JDK1.7. 如果你想对APK文件进行修改,那么就不可避免的要使用到APKTool.论坛里有很多关于R ...

  8. C++ 单向链表反转

    单向链表反转,一道常见的面试题,动手实现下. #include "stdafx.h" #include <stdlib.h> struct Node{ int data ...

  9. C++定义错误码类

    我们平时有这样的需求,可能是C用户的老习惯了,在底层的组件中更喜欢用返回错误码的形式来告知用户函数的调用状态,一般来说,简单用#define 一个宏来包装下返回值. #define ERR_SYSTE ...

  10. Angular.js VS. Ember.js：谁将成为Web开发的新宠？

    这篇博文陈述的非常好,比较全面的剖析了Angular.js与Ember.js,下面的链接,供学习与参考: http://www.csdn.net/article/2013-09-09/2816880- ...