Question

我在网页顶部的横幅广告中遇到问题。

这是我的HTML：

<!DOCTYPE html>
<html>

<head>
  <title>About</title>
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>
   <div id="header">
      <p class="LogoFF1"><img src="img/space.jpg" height="150" width="950" alt="space">FF1 Site</p> 
    </div>
    <div class="wrapper">
      <nav class="vertical">
        <ul>
          <li>
            <a href="homePage.html">Home</a>
          </li>
          <li>
            <a href="profile.html">Profile</a> 
          </li>
          <li>
            <a href="personalBests.html">Personal Bests</a>
          </li>
          <li>
            <a href="links.html">Links</a>
          </li>
          <li>
            <a href="about.html">About</a>
          </li>
        </ul>
      </nav>
    </div>
   <div id="section">
      <article>
        <h2>About</h2>
     <p>
    Hello there, and welcome to FireFalcons personal website!
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
    Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
    Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
    Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
    </p>
      </article>
    </div>
    <hr>
    <footer>
      <strong>
                Copyright &copy; 2016 Stephen Fawcett, All rights reserved
        </strong>
    </footer>
  </main>
</body>

</html>

我的CSS：

body {
  background-color: #101010;
}

header{
    height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;    
}

.LogoFF1 {
  text-align: center;
  margin: 0;
}

#header{
    height:150px;
    background: url(FF1Website/img/space.jpg);
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
    text-shadow: 6px 5px 4px #FF0000;
    font-size:130px;
    position: relative;
}

h2.main {
    font-size: 20px; 
    letter-spacing:1px; 
    text-align: center;
    text-shadow: 0px 0px 2px #2050FF,
                -2px -2px 2px #2050FF,
                 2px -2px 2px #2050FF,
                -2px 2px 2px #2050FF,
                 2px 2px 2px #2050FF;"
}

#section {
    max-width: 960px;
    color: #FFFFFF;
    padding:4px;    
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
     padding-left: 220px;
    text-align: center; 
    letter-spacing: 1px;
}

#section2 {
    max-width: 1000px;
    color: #FFFFFF;
    padding:4px;    
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
     padding-left: 220px;
    text-align: center; 
    letter-spacing: 1px;

}

.main-header {
  text-align: center;
  padding: 5px;
  padding-left: 300px;
  height: 160px;
  margin: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
h1 {
  color: #ffffff;
}
div.wrapper {
  margin: 10px left;
  width: 250px;
  float: left;
}
nav.vertical {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  text-align: center;
}

nav.vertical > ul {
  padding: 0;
}

nav.vertical > ul > li {
  display: block;
}
nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
  background: rgb(181,189,200); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(181,189,200) 0%, rgb(130,140,149) 36%, rgb(40,52,59) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
  color: rgb(255, 255, 255);
  display: block;
  font-size: .85rem;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .1s ease;
  text-decoration: none;
}
nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
  background-color: rgb(114, 51, 98);
  background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  cursor: pointer;
}
nav.vertical > ul > li > label + input {
  display: none;
  visability: hidden;
}
/* unvisited link */

a:link {
  color: #AAAAFF;
}
/* visited link */

a:visited {
  color: #DD04FF;
}
/* mouse over link */

a:hover {
  color: #FF0000;
}
/* selected link */

a:active {
  color: #FFCC00;
}
footer {
  color: #ffffff;
}
nav {
  background-color: dimgrey;
  border: 5px solid #333;
}
nav ul {
  nav ul: list-style-type: none;
}
nav li {
  padding: 2px;
  display: inline-block;
  border-right: 1px solid #fff;
}
nav li a:link {
  text-decoration: none: font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-family: sans-serif;
  font-size: 0.9em;
}
nav li:hover {
  background-color: teal;
}

我相信你会在我的横幅上看到alt而不是图像本身，但我真正想要的只是＆＃34; FF1网站＆＃34;被插入横幅框内＆＃34;空间＆＃34;是

Answer 1

您使用“FF1网站”作为没有标记的文本，只需将其放在标记内（如强或b或......）然后给浮点数：左边标记。

<strong style="float: left;">FF1 Site</strong>

这将使您的横幅像这样：FF1网站空间

在我的横幅内插入我的徽标

1 个答案: