Question

以下是我为网页设置样式的代码。我真的发现很难将左右两个类相邻，因为图像占据了整个空间。我附上了所需最终输出的图像。有人可以请帮助。我也有html代码，但我不想对它进行任何更改。

header {

      background-color : #ffbd80;
      background-image : url(../images/flywheel.jpg);
      background-size: cover;
      padding: 25px;
 }

 h1{
     color: #ffffff;
     text-align: center;
     text-transform : uppercase;
     font-size : 175%;
 }
 h2{
      color: #000000;
      text-transform : uppercase;
 }

 body{
     padding : 20pxpx;
     margin : 15px;
 }

 section {
       background-color: #ffa550;

 }

 nav a{
    opacity: 0.7;
    background-color: #ffffff;
    color: #000000;
    text-align: center;
    width : 22%;
    display :inline-block;
    text-decoration : none;
    padding : 5px;
    border-radius : 10px;

 }

 .active
     { background-color:#808080;
     color: #0000ff;}





    enter code here

 }

 .left{
     float: left;
     width: 20 %;
     display : inline-block;
     border : 1px solid;
     border-width : 3px;
     clear: both ;

 }

 .left a{

    display: inline-block;
    width: 2%

    margin-left: 20 %;
    margin-top: 20 %;
}


 }
 .right 
 {
     display: inline-block;
     width: 70%;

     float: right;
 }

main {
    display: inline-block;
}

 /*img{
    display: none 
 }
 .left a{

    display: none;
    margin-left: 20 %;
    margin-top: 20 %;
}

我不想对HTML代码进行任何更改 html代码如下： the page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ultimate Frisbee - History</title>
    <link rel="stylesheet" href="css/hw1.css">
</head>
<body>
    <header>
        <h1>Ulimate Frisbee History</h1>
        <nav >
            <a href="index.html">Home</a>
            <a href="teams.html">Teams</a>
            <a href="history.html" class = "active">History</a>
            <a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
        </nav>
    </header>
        <main>
            <aside class = "left">
            <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/> </a>

            <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>


            <a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"  alt="Ultimate Frisbee"></a>
        </aside>
        <section class = "right">

    <h2>Background</h2>
    <p>Ultimate Frisbee/Ultimate has been around in some fashion since the 1960s.  Joel Silver is credited with introducing the game to his high school in 1968 after learning about the game at summer camp.  The game spread to more college campuses soon afterward.</p>
    <p>The Ultimate Players Association was founded in 1979 and began organizing touraments across the country.  In 2010, UPA because the <a href = "htpp://http://www.usaultimate.org/index.html">USA Ultimate</a>.</p>
    <p>Other than professional tournaments, games of Ultimate are typically played without referess.  Instead, players rely on "The Spirit of the Game" to encourage sportsmanship and self-officiating.</p>
    <h2>Sources</h2>



<ul>
        <li><a href = "https://en.wikipedia.org/wiki/Ultimate_(sport)">Ultimate (sport)</a></li>
        <li><a href = "http://www.wfdf.org/">World Flying Disc Federation</a></li>
    </ul>
    </section>
</main>
</body>
</html>

在类中定义类和图像

0 个答案: