overcast

时间：2015-10-25 17:48:06 阅读：252 评论：0 收藏：0 [点我收藏+]

关于一个利用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

原文：http://www.cnblogs.com/hazemiku/p/4908961.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)