gpt4 book ai didi

html - CSS定位导航栏

转载 作者:太空宇宙 更新时间:2023-11-04 14:16:23 25 4
gpt4 key购买 nike

我正在尝试在我的网站上制作一个水平导航栏,我想使用 CSS 将其紧靠在我的网站名称标题下方,以及左侧图标后面的导航栏背景的一部分。这是我的代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Oldnut.com</title>
<link href="css/main.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
var currPic=1;
var totPics=2;
var keepTime;

function setupPicChange()
{keepTime=setTimeout("changePic()", 5000);}

function changePic()
{currPic++; if(currPic>totPic)currPic=1;
document.getElementByld("image").src="image"+currPic+".jpg";

setupPicChange();}

</script>

</head>

<body onLoad="setupPicChange();">
<div id="wrapper">
<div id="content">
<div id="banner">
<div id="img"><img src="images/Walnut.png" class="nut-image"></div>
<div id="top">Oldnut.com</div>
</div>

  • 首页
  • 预组装
  • 中央处理器
  • 图形处理器
  • <div>
    <img id="image" src="images/image1.jpg" alt="picture">
    </div>

    <div id="deals">

    </div>

    </div>
    <div id="foot"
    </div>
    </div>


    </body>
    </html>

    这里没什么可看的,我想我在做什么和我的 CSS 很明显

    @charset "UTF-8";
    body{background-image:url(../images/bg_bodytakeover.png);
    }

    #wrapper{
    margin-left:auto;
    margin-right:auto;
    width:1000px;
    }
    .nut-image {
    z-index: 1000;
    position: relative;
    }
    #content{
    margin-left:10px;
    margin-right:10px;
    padding-bottom:20px;
    box-shadow:0px 0px 20px 3px;
    border-radius:4px;
    background-color:#FFFFFF;
    height:600px;
    position: relative;
    }

    #banner{
    margin:auto;
    position: relative;
    }

    #img{
    float:left;
    }

    #top{
    float: left;
    color: #FF6600;
    text-align: left;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 75pt;
    text-shadow: 2px 2px #FFFFFF;
    text-transform: uppercase;
    }

    nav {
    position: absolute;
    width: 100%;
    background: #FF6600;
    top: 110px;
    }

    #list-nav{
    list-style-type:none;
    margin:0;
    padding:0;
    width:calc(100% - 192px);
    float:right;
    top: 125px;
    }

    #list-nav li{
    float:left;
    width: 25%;
    padding: 0;
    margin: 0;
    }

    #list-nav li a{
    text-decoration:none;
    width:100%;
    background:#FF6600;
    color:#eee;
    float:left;
    text-align:center;
    display:block;
    }

    #list-nav li a:hover{
    background:#1d8ed0;
    color:#000;
    }

    现在我想让我的导航栏非常靠近巨大的标题文本和橙色线条背景,从图标下面到白色内容边框的末端。我已经尝试了各种填充和边距混合,但它真的只是弄得一团糟。我广泛地环顾四周,但似乎没有什么对我有用,对其他人有用。或者我无法得到所有我想做的事情。有人有任何提示吗?

    编辑:我已经尝试了很多填充来让导航栏拉伸(stretch)屏幕,但它一直打破按钮及其悬停效果的均匀分离,是否有另一种方法来均匀排序它们?

    *第二次编辑新问题*我试图让我的图像在 5 秒后在两者之间来回变化。我看过其他网站的代码,但不明白为什么它不起作用。有人注意到哪里出了问题吗?

    最佳答案

    评论更新:

    我已经更新了 fiddle here 得到你想要的。如果你不能在列表项上使用 calc 并且因为你有一个 1000px 的设置宽度,你可以通过这样做硬编码宽度:width: (1000px - 192px)/2, which would为 宽度:202px

    原回答:

    如果您总是有 4 个菜单项,请在每个 #list-nav li 上设置 width: 25% (100%/4)。这是一个 updated fiddle

    我还将 li 元素的边距和填充设置为 0。

    这是您要找的吗?

    关于html - CSS定位导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20333110/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com