Question

此网站here在导航栏下有一个图片，它会自动回复浏览器的尺寸。我想知道：

如何使图像看起来与导航栏下的图像完全相同。（我有一个想要使用的图像我只是不知道怎么把它放到导航栏下的我的网站上）
如何让它像他们的那样自动回复
如何制作，以便我仍然可以在横幅区域中的该图像之后向页面添加内容。现在我将它作为CSS中的正文背景，这使得它无法添加任何内容并且能够滚动。

这是我现在的代码：

<!DOCTYPE html>
<html>
    <head>
    <title>Vector Games</title>
    <meta charset="utf-8"/>
    <link rel="shortcut icon" href="favicon.png" />
    <link rel="stylesheet" type="text/css" href="homecss.css">
    <head>

    <body>
        <div class="header">

            <div class="container">

            <div class="logo">
                <h1><a href="#">VectorGames</h1>
            </div>

            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Arcade</a></li>
                    <li><a href="#">Puzzle</a></li>
                    <li><a href="#">Strategy</a></li>
                    <li><a href="#">About</a></li>
                </ul>
           </div>
       </div>
   </div>

    </body>
</html>

CSS：

@charset "utf-8";
body{
    background-image: url("banner.png");
    width:100%;
}

.container{
    width: 1200px;
    margin: 0 auto;
}

.header{
    background: gray;
    width:100%;
    top: 0;
    position:fixed;
}

.logo{
    float:left;
    margin-left: -250px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

a{
    text-decoration:none;
    color: white;
}

li{
    list-style: none;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    float: left;
    margin-left: 15px;
    padding-top: 20px;
    font-size:20px;
}

.nav{
    float:right;
}

Answer 1

我会尽力解决你的问题。

如何让图片看起来与导航栏下的图像完全相同？（我有一个想要使用的图像我只是不知道怎么把它放到导航栏下的我的网站上）

这可以通过多种方式完成。您链接的网站通过添加div CSS属性的position: absolute元素来实现此目的。

这是一种非常强大的定位类型，可以让您使用确切地将任何页面元素放在您想要的位置。你用定位属性顶部，左下角和右侧设置地点。请记住，这些值将与下一个值相关具有相对（或绝对）定位的父元素。如果没有这样的父，它将默认一直回到元素本身意味着它将相对于页面本身放置。

因此，当您将position: absolute应用于元素时，您也可以将其置于任何其他元素之上或之上。我不推荐这种方法。下面我已经制作了3个盒子，我让蓝色盒子里面有position:absolute元素。

.box1 {
  width:50px;
  height:50px;
  background:red;
  }

.box2 {
  width:50px;
  height:50px;
  background:blue;
  position:absolute;
  top:25px;
  left:25px;
  }

.box3 {
  width:50px;
  height:50px;
  background:purple;
  }

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

那我该怎么办呢？我会使用div元素，并将background应用到它，就像你在粘贴中所做的那样。这是我的镜头：

body{
        background-image: url("banner.png");
        width:100%;
}

.content{
    padding-top:100px;
    margin-top:128px;
    background-image: url("http://placehold.it/1920x1024&text=Placeholder");
    background-size:100%;
    background-repeat: no-repeat;
    min-height:500px;
}

.content .list{
    background:rgba(255,255,255,0.7);
    padding:5px;
    width:150px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
 
.container{
        width: 1200px;
        margin: 0 auto;
}
 
.header{
        background: gray;
        width:100%;
        top: 0;
        position:fixed;
}
 
.logo{
        /*float:left;
        margin-left: -250px;*/
        font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
 
a{
        text-decoration:none;
        color: white;
}
 
li{
        list-style: none;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        float: left;
        margin-left: 15px;
        padding-top: 20px;
        font-size:20px;
}
 
.nav{
       /*float:right;*/
}

<div class="header">
    <div class="container">
        <div class="logo">
            <h1><a href="#">VectorGames</a></h1>

        </div>
        <div class="nav">
            <ul>
                <li><a href="#">Home</a>
                </li>
                <li><a href="#">Arcade</a>
                </li>
                <li><a href="#">Puzzle</a>
                </li>
                <li><a href="#">Strategy</a>
                </li>
                <li><a href="#">About</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="content">
    <div class="list">
        <div>Test</div>
        <div>Abc</div>
        <div>Woohoo!</div>
        <p>All of this content is on top of the Placeholder background.</p>
    </div>
</div>

如何让它像the website above一样自动回复？

现在，响应式网站是必须的。人们四处走动，可以看到各种可以查看网站的电子产品。笔记本电脑，平板电脑，智能手机，我们都希望他们以友好的方式查看我们的网站，以便观看特定设备。

在CSS中，有一种称为“Mediaqueries”的解决方案。当用户在横向模式下使用智能手机/平板电脑或直到<时，Mediaqueries应用CSS ONLY 当特定屏幕宽度/高度时/ strong>使用特定的宽度/高度。例如：

@media screen and (min-width:1200px)表示“如果浏览器窗口的宽度至少为1200像素。” CSS看起来像一个嵌套块：

This fiddle显示一个框，当您将窗口拖动到500px以下时会变为蓝色。

以及如何制作它以便我仍然可以在横幅区域中的该图像之后向页面添加内容。现在我将它作为css中的正文背景，这使得它无法添加任何内容并且能够滚动。

就像我的小提琴一样，你可以将它作为div的子元素添加到背景中。它仍然能够满足您的任何需要。您可以执行此操作或将position:absolute添加到要在其他元素之上浮动的元素。不建议使用后者，因为如果你没有充分的理由使用它会造成一团糟。

遗憾的是，您的pastebin在徽标和标题上有一些随机float属性，这些属性会将这些浮动元素放在屏幕之外。我认为这不是你打算做的。我上面的例子（以div作为背景的那个）有你的HTML和CSS代码，浮点线被注释掉了。

导航栏HTML CSS下的图像

1 个答案:

如何让图片看起来与导航栏下的图像完全相同？（我有一个想要使用的图像我只是不知道怎么把它放到导航栏下的我的网站上）

如何让它像the website above一样自动回复？

以及如何制作它以便我仍然可以在横幅区域中的该图像之后向页面添加内容。现在我将它作为css中的正文背景，这使得它无法添加任何内容并且能够滚动。

导航栏HTML CSS下的图像

1 个答案:

如何让图片看起来与导航栏下的图像完全相同？ （我有一个想要使用的图像我只是不知道怎么把它放到导航栏下的我的网站上）

如何让它像the website above一样自动回复？

以及如何制作它以便我仍然可以在横幅区域中的该图像之后向页面添加内容。现在我将它作为css中的正文背景，这使得它无法添加任何内容并且能够滚动。

如何让图片看起来与导航栏下的图像完全相同？（我有一个想要使用的图像我只是不知道怎么把它放到导航栏下的我的网站上）