html - CSS 和多个 div 的定位-6ren

html - CSS 和多个 div 的定位

转载作者：行者123 更新时间：2023-11-28 10:11:47

好吧，我猜你可以说这个网站看起来“接近”我想要的样子，这对其他人来说没问题，但对我来说不是，因为我是一个完美主义者。我也是所有这些 html 和 css 的新手，所以你可以想象我生活中的挣扎。我有两个名为 topred 和 top yellow 的 div。然后我有一个 slider ，然后是一个导航栏(导航栏)。如果有意义的话，我希望所有这些元素相互“堆叠”。如果您现在要用图像加载它，您会发现 slider 与顶部黄色不完全匹配。导航栏和 slider 之间也有一个微小的差距。它杀死了我，因为虽然它在 chrome 中看起来不错并且不明显，但我可以在 IE 中看到它。

这只是因为我缺乏经验。我可以向你保证，我已经花了几个小时试图解决这个问题。现在是时候请教专家了。说真的，我敢打赌我会觉得自己像个天才。别担心，我已经删除了所有“float:center”的哈哈

顺便说一句，这是我为退伍军人做的一个志愿者元素，一个很好的回馈方式

我只是花了一些时间来清理它!

<head>

    <link rel="shortcut icon" href="bavafavicon"/>
    <title>Berlin Airlift Veterans Association: News</title>
    <link rel="stylesheet" type="text/css" href="main.css">

</head>

<body id="news">

        <div id="topyellow"></div>
        <div id="topred"></div>
        <div id="left"></div>
        <div id="leftblue"></div>
        <div id="right"></div>
        <div id="container">


        <div id="slider">           
            <script type="text/javascript"> 
                var i = 0; var path = new Array(); 
                    path[0] = "1.jpg"; 
                    path[1] = "2.jpg"; 
                    path[2] = "3.jpg"; 
                    path[3] = "4.jpg";
                    path[4] = "5.jpg";
                    path[5] = "6.jpg";
                function swapImage() 
                    { 
                        document.slide.src = path[i]; 
                        if(i < path.length - 1) i++; 
                        else i = 0; 
                        setTimeout("swapImage()",5500); 
                    } 
            </script> 
            <img name="slide"/>
        </div>

            <ul id="head_nav">
                <li><a href="index.htm" class="currentButton">NEWS</a></li>
                <li><a href="aboutbava.htm" class="button">ABOUT BAVA</a></li>
                <li><a href="history.htm" class="button">HISTORY</a></li>
                <li><a href="biographies.htm" class="button">BIOGRAPHIES</a></li>
                <li><a href="calendar.htm" class="button">CALENDAR</a></li>
                <li><a href="contact.htm" class="button">CONTACT</a></li>
                <li><a href="links.htm" class="button">LINKS</a></li>
                <li><a href="donate.htm" class="button">DONATE</a></li>
            </ul>

        <div id="headlogo">
            <img src="BAVA.png" alt="BAVA logo" width="150" height="150"/>
        </div>
        <div id="subscribe">Sign up for BAVA updates!<br>

            <img src="emailBomb.png" alt="emailBomb" id="emailBomb" width="150" height="300"/>
            <form action="demo_form.asp">
                E-mail: <input type="email" name="userid">
                <input type="submit" value="Submit"><br>

            </form>

            <script type="text/javascript">                 
            function GetClock(){
            tzOffset = +2;

            d = new Date();
            dx = d.toGMTString();
            dx = dx.substr(0,dx.length -3);
            d.setTime(Date.parse(dx))
            d.setHours(d.getHours() + tzOffset);
            nday   = d.getDay();
            nmonth = d.getMonth();
            ndate  = d.getDate();
            nyear = d.getYear();
            nhour  = d.getHours();
            nmin   = d.getMinutes();
            if(nyear<1000) nyear=nyear+1900;

            if(nmin <= 9){nmin="0"+nmin}


            document.getElementById('berlinClock').innerHTML=""+(nmonth+1)+"/"+ndate+"/"+nyear+" "+nhour+":"+nmin+"";
            setTimeout("GetClock()", 1000);
            }
            </script> 

            <script type="text/javascript" language="javascript">
                                window.onload = function() { swapImage(); GetClock(); };
            </script>               
            <div id="berlinClock"></div>                    
            </div>              
        </div>
    <footer>
        <div id="footer">
            <p><i>15 N. College Ave, Newton, NC 28658   |   (828) 466-3410</i></p>
        </div>
    </footer>

</body>

这是我的 CSS，请不要笑...

    body {margin:0px; padding:0;min-width: 1100px;}

    #container      {position:absolute; display:block; width:100%; height:100%}
    #center             {margin:0px}

    #topred             {z-index:1; top: 0; left: 0; right:0; height: .6%; width: 100%; background: rgb(211,5,24); position:absolute; display:block}
    #topyellow      {z-index:1 ;top: .6%; left: 0; right:0; height: .9%; width: 100%; background: rgb(253,248,12); position:absolute; display:block }
    #left, #right   {top: 0; bottom: 0; width: 19.5%; background-color: black; position: fixed}
    #left           {left: 0}
    #right          {right: 0}
    #leftblue       {left:19.5%;top: 0; bottom: 0;  width: .35%; background-color: rgb(8,44,180); position: fixed}

    #slider         {position:relative;display:block; margin-top:.6%;width: 100%; max-width: 875px; height:350px;margin-bottom:0px;margin-left: auto;
                     margin-right:auto; padding-bottom:0px}

    #headlogo       {display: block; position: absolute; left: 14.5%; top:5%}

    #subscribe      {display: block; position: absolute; top:388px; right:0; width:19.5%; text-align:center; color: white}

    #head_nav       {z-index:1;position:relative;text-align: center;margin-left: auto;margin-right:auto;padding:0; margin-top:0px; margin-bottom:none; width:975px; border:0}
    #head_nav li        {display:inline;margin: 0.0px}

    #emailBomb      {padding-bottom: 10px}

    #berlinTime     {display: block; position: relative; top:388px; left:0; width:19.5%; text-align:center; color: red}

    #footer         {z-index:-1; padding-top:99%; font-size:10; color:black; position: relative; width:100%; text-align:center}

    .currentButton {
        -moz-box-shadow:inset 0px 0px 0px 0px #d3051a;
        -webkit-box-shadow:inset 0px 0px 0px 0px #d3051a;
        box-shadow:inset 0px 0px 0px 0px #d3051a;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
        background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
        background-color:#000000;
        -webkit-border-top-left-radius:0px;
        -moz-border-radius-topleft:0px;
        border-top-left-radius:0px;
        -webkit-border-top-right-radius:0px;
        -moz-border-radius-topright:0px;
        border-top-right-radius:0px;
        -webkit-border-bottom-right-radius:20px;
        -moz-border-radius-bottomright:20px;
        border-bottom-right-radius:20px;
        -webkit-border-bottom-left-radius:20px;
        -moz-border-radius-bottomleft:20px;
        border-bottom-left-radius:20px;
        text-indent:0;
        display:inline-block;
        color:rgb(211,5,24);
        font-family:Arial;
        font-size:14px;
        font-weight:bold;
        font-style:normal;
        height:33pxpx;
        line-height:33px;
        width:105px;
        text-decoration:none;
        text-align:center;}
    .currentButton:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
        background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
        background-color:#000000;color:rgb(211,5,24);}
    .currentutton:active {
        position:relative;
        top:1px;}
    .button {
        -moz-box-shadow:inset 0px 0px 0px 0px #d3051a;
        -webkit-box-shadow:inset 0px 0px 0px 0px #d3051a;
        box-shadow:inset 0px 0px 0px 0px #d3051a;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
        background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
        background-color:#000000;
        -webkit-border-top-left-radius:0px;
        -moz-border-radius-topleft:0px;
        border-top-left-radius:0px;
        -webkit-border-top-right-radius:0px;
        -moz-border-radius-topright:0px;
        border-top-right-radius:0px;
        -webkit-border-bottom-right-radius:20px;
        -moz-border-radius-bottomright:20px;
        border-bottom-right-radius:20px;
        -webkit-border-bottom-left-radius:20px;
        -moz-border-radius-bottomleft:20px;
        border-bottom-left-radius:20px;
        text-indent:0;
        display:inline-block;
        color:#fdf902;
        font-family:Arial;
        font-size:14px;
        font-weight:bold;
        font-style:normal;
        height:33pxpx;
        line-height:33px;
        width:105px;
        text-decoration:none;
        text-align:center;}
    .button:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
        background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
        background-color:#000000;color:rgb(211,5,24);}
    .button:active {
        position:relative;
        top:1px;}

最佳答案

我发现您的问题与导航和 slider 之间的差距有关。您在导航上设置了子像素边距。删除边距或将其设置为 0。

#head_nav li {
    display:inline;
    /*margin: 0.3px; remove this */
}

关于html - CSS 和多个 div 的定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24348820/

文章推荐： css - 在断点处更改 `$column-width`，但不更改列数

文章推荐： javascript - 计算 SWFUpload 队列中的总文件大小

文章推荐： html - 如何设置输入文本与 css 内联显示？

css - 如何将 CSS 文件的 CSS 规则包含到另一个 CSS 文件的选择器中？
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
css - 将 css 文件移动到新的 css 文件夹后无法从我的 css 访问我的图片
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
css - css 3 中是否有任何 css 类分组 css 类？
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
css - 使用内联 CSS 删除从 CSS 文件继承的 CSS 属性
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
css - 初始规模与 desktop.css+phone.css+tablet.css？
我刚刚发现了 initial-scale 元属性。以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
css - LESS CSS - 提取生成的 CSS
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
css - 如何将内联 CSS 转换为外部 CSS？
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？最佳答案就像有人说的那样，“
css - 来自样式化组件时 CSS 模块中的动态 CSS
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
css - 在 CSS 中引用 CSS
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
css - 如何基于一个元素的 CSS 或它的前一个相邻兄弟的 CSS？
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。我的问题在于让按
css - 浏览器是否在加载 CSS 文件时解析 CSS？
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？这个问题不是 Load and executi
css - 将已经定义的 CSS 添加到另一个 CSS
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。标题有点乱，我给大家看一下。假
css - css/main.css 是否还有其他用途？
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
css - 如果缺少所需的 css，则加载备用 css
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。我有很多 css
css - CSS 框架和 CSS 网格有什么区别
请告诉我 CSS 框架和 CSS 网格之间的区别。最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
css - 如何摆脱从 css 文件继承的 css？
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
css - 带有 CSS 模块的普通 CSS
我以前使用 bootstrap css import 很好。但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
css - CSS 中的嵌套 CSS 选择器
有没有办法在 css 选择器中创建一个 css 组。例如: .SectionHeader { include: .foo; include: .bar; include: .
css - CSS 定位和 CSS 边距之间的区别
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
css - Gulp CSS 任务不会覆盖现有的 CSS
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - CSS 和多个 div 的定位