关于一个利用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. 武汉科技大学ACM：1006: 华科版C语言程序设计教程（第二版）例题4.17

    Problem Description 输入一个整数,求它的素数因子.并按照格式输出. Input 一个整数n.(2<=n<=100) Output n=a*b*c*... (a,b,c为 ...

  2. MyEclipse导入Maven项目报错 Plugin execution not covered by lifecycle configuration:

    web项目使用到mybatis,需要使用mybatis的自动生成代码插件,配置build部分如下: <build> <pluginManagement></pluginM ...

  3. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  4. HTML5 初始文档声明

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. 函数式编程做用户登陆注册练习-pycharm上

    def login(username,password): """ 用户登陆 :param username: 用户名 :param password:密码 :retur ...

  6. 汉诺塔 Hanoi Tower

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

  7. 项目设计&重构&性能优化

    漫谈项目设计&重构&性能优化 重构的好处:重构能够改进软件设计,随着项目需求的变更,项目体积的变大早已与最初的设计大相径庭,代码结构变得凌乱.复杂,如果不进行重构,则很难添加新的功能. ...

  8. Solr Dataimport配置

    参考资料: https://cwiki.apache.org/confluence/display/solr/Uploading+Structured+Data+Store+Data+with+the ...

  9. node.js相关

    node node最大的特点是单线程,因此一个只能有一个任务运行,大量采用异步操作. 某一个任务的后续操作一般采用回调函数的形式 var callback = function (error, val ...

  10. [LeetCode 116 117] - 填充每一个节点的指向右边邻居的指针I & II (Populating Next Right Pointers in Each Node I & II)

    问题 给出如下结构的二叉树: struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *next; } ...