修改

Question

所以这是我正在处理的登陆页面。只是一个有趣的页面试图吸引人们进入太空：）

http://nyhunter77.github.io/businessPage/

我认为让你们看到整件事情更容易我今天刚刚开始在我的页面上布置项目，而且我对顶行项目很难。

如果你看得正确，左边有一个飞机，空军符号应该在中间，我想要右边的报价。

当我开始直到我得到报价时，这一切都很合适。我使用图像作为多个背景图像，但是当我到达那个点并覆盖它们时，字块元素与图像重叠。

这里的帖子给别人建议回到使用图像作为img内联以获得更好的控制。到目前为止，这种方式更加艰难。

连连呢？谢谢！

根据某人的要求 - 发布代码... HTML：

<body>
<div class="topbar">
    <div id="shuttle" style="display: inline">
        <img src="images/shuttle.jpg" style="display: inline; height: 155px">
    </div>
    <div id="airforce" style="display: inline">
        <img src="images/airforce.gif" style="display: inline; height: 155px">
    </div>
    <div style="display: inline">
        <p id="quote" style="margin-right: 50px;"> "Flying the Sci-Fi skies <br/>
        <p id="quote" style="margin-right: 85px;"> since 2012!" </p>
    </div>
</div>
<div class="topbarLeft">
    <!-- Logo for Space Plane should go here.  -->
    <a id="logobutton" href="index.html">Space Plane Airlines</a>
</div>
<div class="topbarRight">
    <a id="help" href="www.google.com">Help</a>
    <a id="contact" href="www.google.com">Contact Us</a>
    <a id="signIn" href="www.google.com">Sign In</a>
    <a id="join" href="www.google.com">Join</a>
</div>

CSS：

.topbar {
/* background: url("images/shuttle.jpg") 0 0 no-repeat, url("images/airforce.gif") 50% 0 no-repeat; */
width: 100%;
height: 175px;
background-size: auto 75%;
/* display: inline; */

/* background: url("images/airforce.gif") 0 0 no-repeat;
width: 300px;
height: 175px;
background-size: auto 75%; */
}

#quote {
text-align: right;
font-size: 2.5em;
list-style-type: none;
font-family: cursive, arial, times;
padding-top:15px;
/* float: right; */
}

.topbarLeft {
text-align: left;
display: inline;
/* float: left; */
}

#logobutton {
font-family: cursive, arial, times;
font-size: 2.5em;
text-decoration: none;
border: 2px solid black;
background: url("images/clouds.jpg") 0 0 no-repeat;
margin-left: 4px;
padding: 0 10px 0 10px;
}

#logobutton:hover {
text-decoration: underline;
}

.topbarRight {
text-align: right;
display: inline-block;
float: right;
}

Answer 1

我无法帮助，但我认为您应该利用Google来发挥自己的优势。绝对有css教程无处不在我严重怀疑这里有人会花时间来帮助你，仅仅因为这个原因。遗憾。

修改

我感觉很糟糕，所以我开始尝试改进你的代码以反映你想要的想法，但是在我放弃了3行之后。相反，我会概述你的许多错误，希望你可以接受我的建议并做一些阅读，因为你显然还没有掌握基础知识。

1-图片需要alt标签才能有效EG：

    <img src="images/shuttle.jpg" alt="Some description of shuttle.jpg in order to explain what the image is to the visually impaired and Google">

2-您已将图像放置在一个公正的位置，以便您可以构建页面，但我建议只将一个类应用于图像标记，并完全摆脱不必要的Div标记。

     <div id="shuttle" style="display: inline">
    <img src="images/shuttle.jpg" style="display: inline; height: 155px">
     </div>

对此：

    <img class="alignleft" src="images/shuttle.jpg" alt="blah" height="155" width="150">

指定宽度和高度有助于通过Google验证规则。

3-具有相同ID的多次使用，并且您再次将其置于冗余DIV标记内。

<p id="quote" style="margin-right: 50px;"> "Flying the Sci-Fi skies <br/>
    <p id="quote" style="margin-right: 85px;"> since 2012!" </p>

真的在哪里

 <p id="quote"> Flying the Sci-Fi skies since 2012! </p>

更正确。

4-链接列表应该在列表中。

<div class="topbarRight">
<a id="help" href="www.google.com">Help</a>
<a id="contact" href="www.google.com">Contact Us</a>
<a id="signIn" href="www.google.com">Sign In</a>
<a id="join" href="www.google.com">Join</a>
</div>

对此。

<ul class="menulist">
    <li><a href="#">Help</a><li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Sign In</a></li>
    <li><a href="#">Join</a></li>
</ul>

我确定我错过了一些，我甚至不打算看着你的Css，因为我觉得你应该在转移到你的Css之前得到HTML。另外......你的设计很丑陋，有受版权保护的图片。

您在代码中链接到google.com可能应该关注其中一个链接吗？

https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=css%20tutorials&safe=active

http://www.w3schools.com/css/

创建一个你喜欢的设计，在纸上，gimp / photoshop甚至MS Paint，如果你必须的话。
编写基本的HTML标记。
然后使用模拟图像作为指导，移动到您的Css上。

编辑2

就我个人而言，我的工作流程总是从一张图片开始，只需在一张纸上画一点草图就足够了。我会做几个不同的，然后选择我最喜欢的。然后我打开Gimp并在那里将它们混在一起。手绘草图看起来很漂亮而且速度很快，但有时只有当你数字化时它才能找到一些实际上在屏幕上工作的部分。然后，一旦你有了，你应该知道你是否需要一个标题，导航，1 2 3主要内容部分，也许是一个侧栏，页脚和其他什么。然后从后到前，从上到下开始，我将把css基础知识放在一起。所以最初我只是从我所有部分的基本布局开始。我倾向于给他们所有对比鲜明的背景颜色，所以我可以很容易地将它们区分开来。显然，在处理CSS时，您需要返回并更改HTML，但如果您已经掌握了基础知识，那么它将使CSS工作变得更加轻松愉快。我的CSS和HTML指南的faveroite地方是http://www.w3schools.com/我只是搜索我需要的特定标签。我还记得一年前读过HTML5的介绍，我在Google上发现了这个介绍，如果在开发结束时我需要一些有点特别的东西，我会谷歌特定的东西。

学会喜欢w3schools.com网站，因为我认为即使是最先进的开发人员也会不时地回到那里。

Answer 2

或许取出display: inline;，然后将float: left;放入#shuttle和#airforce，将float: right;放入包含两个引号的div中。然后将width: 40%添加到#shuttle以进行定位中心图像：

CSS：

#shuttle {
  float: left;
  width: 40%;
}

#airforce {
  float: left;
}

HTML：

<div style="float: right;">

我还建议给第三个div一个名字，而不是使用内联样式。

我还是新手，试图了解如何定位我的照片和文字项目

2 个答案:

修改

编辑2