关于一个利用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. mysql学习（用户权限管理）

    1. 添加数据库用户 create user 'username'@'host' identified by 'password'; 提示: 如果想让该用户可以从其他主机登陆,host可以设置为'%' ...

  2. 武汉科技大学ACM：1007: 不高兴的津津

    Problem Description 津津上初中了.妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参加妈妈为她 报名的各科复习班.另外每周妈妈还会送她去学习朗诵.舞蹈和钢琴.但是津津如果一 ...

  3. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  4. Linux的/etc/issue、/etc/issue.net和/etc/motd的区别

    Linux使用这三个文件/etc/issue./etc/issue.net和/etc/motd 来控制本地及远程登录前后的信息显示,网上很多相互转载,说的都不清楚,自己实际测试了一下,结果记录如下: ...

  5. Eclipse关闭XML文件验证的方法,解决xml警告

    XML的编写是否符合规范,可以通过XML Schema或DTD进行验证,但有时候电脑本来就很卡,而且XML的某些错误并未导致程序无法运行的情况下,暂时关闭XML的验证也算不错的选择. 如web.xml ...

  6. jq事件绑定

    有些时候我们在页面中会动态的添加一下dom结构,当我们想要给这些结点添加事件时需要在此节点绑定一系列的操作. <a href="#" onclick="addBtn ...

  7. JS判断字符串是否为空、过滤空格、查找字符串位置等函数集

    这是一个由网上收集的JS代码段,用于判断指定字符串是否为空,过滤字符串中某字符两边的空格.查找指定字符串开始的位置.使用IsFloat函数判断一 个字符串是否由数字(int or long or fl ...

  8. Matlab与外部接口：MAT文件基础

    MAT 文件MAT文件是MATLAB使用的一种特有的二进制数据文件.MAT文件可以包含一个或者多个MATLAB 变量.MATLAB通常采用MAT文件把工作空间的变量存储在磁盘里,在MAT文件中不仅保存 ...

  9. .NET MVC 插件化框架源码

    本来想把源码整理了放github上,但最近一直忙,就直接在这里放出来了,还写得不太完整,里面有几个例子,插件上传也没写,只写了插件zip包解压,如果大家在使用中有什么疑问,可以加QQ群:1429391 ...

  10. express4.x中的链式路由句柄

    var express = require("express"); var router = express(); router.get('/', function (req, r ...