Question

我是css的新手并尝试为我的网页创建标题

标题的结构类似于

-LOGOIMAGE - LINK1 - LINK2 ----- TITLEIMAGE（@center）----- LINK3 - LINK4 -

这是标题的html

<div id="header">
    <img src="http://goo.gl/Uinfkp" class="logo"/>
    <div id="navbox1">
        <a href="aaa.html">aaa</a>
        <a href="bbb.html">bbb</a>
    </div>
    <img src="http://goo.gl/Uinfkp" class="title"/>
    <div id="navbox2">
        <a href="xxx.html">xxx</a>
        <a href="yyy.html">yyy</a>
    </div>
</div>

这就是我用css http://jsfiddle.net/WSDJ3/

尝试过的

我不知道为什么图像和文字都是这样放置的。请帮忙！

Answer 1

要选择课程，您应使用.而不是#
#用于选择ID

所以CSS应该是这样的：

.logo
{
     float:left;
     width:72px;
     height:70px;
     margin:5px 0;
}

.title
{
     float:left;
     width:175px;
}

Answer 2

您正在使用类和ID（这很好）。但是，您的CSS正在使用#选择器。
#用于id（考虑ID号），.用于类。将其更改为：

#header
{
    width:100%;
    height:80px;
    background:#232c2b;
}
.logo
{
     float:left;
     width:72px;
     height:70px;
     margin:5px 0;
}
#navbox1
{
 float:left;
 margin:30px 30px;
}
.title
{
     float:left;
     width:175px;
}
#navbox2
{
 float:left;
 margin:30px 30px;
}
a
{
 color:white;
 font-size:15px;
 text-decoration:none;
 margin:auto 10px;
}

Answer 3

对于此添加，只需向左浮动到图像。您可以选择提供内联css，如下所述，或者您可以在内部css的帮助下使用外部css调用它。

<div id="header">
<img src="http://goo.gl/Uinfkp" class="logo" style="float:left;"/>
<div id="navbox1">
    <a href="aaa.html">aaa</a>
    <a href="bbb.html">bbb</a>
</div>
<img src="http://goo.gl/Uinfkp" class="title" style="float:left;"/>
<div id="navbox2">
    <a href="xxx.html">xxx</a>
    <a href="yyy.html">yyy</a>
</div>

将图像和文本放在div中

3 个答案: