Css I'；我还是个新手，正在努力了解如何定位我的图片和文本项目_Css_Positioning

Css I'；我还是个新手，正在努力了解如何定位我的图片和文本项目

css

Css I'；我还是个新手，正在努力了解如何定位我的图片和文本项目,css,positioning,Css,Positioning,这是我正在处理的登录页。只是一个试图吸引人们进入太空的有趣页面：）我觉得让你们看到整件事更容易。我今天刚开始在我的页面上布置项目，我很难处理最上面一行的项目如果你看得对，左边有一架飞机，空军符号应该在中间，我想在右边引用当我开始的时候，这一切都融为一体，直到我得到了报价。我将这些图像用作多个背景图像，但当我到达这一点并将其覆盖时，单词块元素与图像重叠这里有一篇帖子建议大家回到仅仅使用图像作为img内联来更好地控制。到目前为止，这种方式更加艰难建议？谢谢根据某人的要求-张贴代码。

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

我觉得让你们看到整件事更容易。
我今天刚开始在我的页面上布置项目，我很难处理最上面一行的项目

如果你看得对，左边有一架飞机，空军符号应该在中间，我想在右边引用

当我开始的时候，这一切都融为一体，直到我得到了报价。我将这些图像用作多个背景图像，但当我到达这一点并将其覆盖时，单词块元素与图像重叠

这里有一篇帖子建议大家回到仅仅使用图像作为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教程，我很怀疑这里的任何人都会花时间来帮助你，仅仅是因为这个原因。对不起

编辑我感觉很糟糕，所以我开始尝试修改您的代码，以反映您对所需内容的想法，但在3行之后我放弃了。相反，我将概述你的许多错误，希望你能接受我的建议，做更多的阅读，因为你显然还没有掌握基础知识

1-图像需要alt标记才能有效，例如：

    <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-你已经将你的图像放在一个just中，这样你就可以构建你的页面了，但是我建议只对图像标签本身应用一个类，完全去掉不必要的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>

”飞越科幻天空

自2012年起！”

到底在哪里

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

自2012年起，在科幻天空中飞翔

这更正确

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，也许你应该遵循其中一个链接

在纸上、gimp/photoshop甚至MS Paint（如果必须）上创建一个您满意的设计

编写基本的HTML标记

然后，使用您的模型图像作为指导，转到您的Css

祝你好运

编辑2 就我个人而言，我的工作流程总是从一张图片开始，通常只要在一张纸上画一点草图就足够了。我会做一些不同的，然后选择我最喜欢的。然后我会打开Gimp，在那里一起猛击它。手绘草图看起来不错，速度也很快，但有时只有当你用数字编辑它时，你才会发现某些部分实际上无法在屏幕上正常工作。一旦你有了，你应该知道你是否需要一个标题，导航，1，2，3个主要内容部分，也许一个侧栏，页脚和其他任何东西。然后从后面到前面，从上到下，我将把css的基础知识放在一起。因此，首先我将从我所有部分的基本布局开始。我倾向于给他们所有对比的背景色，这样我就可以很容易地把他们区分开来。显然，在处理CSS时，您需要返回并更改HTML，但如果您具备了基础知识，那么在CSS中工作会更轻松、更愉快。我最喜欢CSS和HTML指南的地方就是搜索我需要的特定标签。我还记得一年前我在谷歌上读到了一篇HTML5简介，如果在开发快结束的时候我需要一些更喜欢的东西，我会在谷歌上找到具体的东西

学会热爱w3schools.com网站，因为我认为即使是最先进的开发人员也会时不时地查看它

可能取出

显示：inline而不是放浮动：左
和空军

中的代码>和浮动：右。然后将宽度：40%
添加到#shuttle
以定位中心图像：
CSS:
HTML:


我还建议给第三个div起个名字，不要使用内联样式。“我觉得让你们看到整个过程更容易。”请在问题中发布代码。您使用的是Comic SAN。这足够让我抵制帮助你的理由了。如果我这么做了，那只是一个备份。。。你应该知道我用过草书，arial，times。我试过一些教程和Howe的书，但还没有达到预期的效果。没关系，我很感激所有的提示。这是我自己学的，所以我知道很多可能是错的。我指望像这样好的批评来把事情做好。谢谢我复制了你说的所有内容，我将做一些修改。这个问题回到@Doug。你在哪里学的语义学，你能给我一些资料来正确地学习吗？此外，我将重新启动我的项目，并尝试按照您建议的方式开始工作。一家房屋建筑公司的网页，更真实。如果我理解正确，你会建议先做所有的HTML吗？然后做CSS？我想你们必须一起做，看看这一页是怎么出来的。我也要先把它画出来。谢谢欢迎任何其他提示。谢谢@Doug，我很快就理解了你给我的提示，在画出新的一页之后
<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>

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

#airforce {
  float: left;
}

<div style="float: right;">