Question

尝试将包含Home，Menu等的Nav栏放在页面左侧，其余部分放在中间，并且windingroad.jpg浮动到所有文本的右侧。我迷失了如何将这些分成多列并继续，任何帮助将不胜感激。

〜HTML〜

<head>
    <meta charset="UTF-8">
    <title>JavaJam Coffee House</title>
    <link rel="stylesheet" type="text/css" href="javajam.css">
    <style>
   #nav {
        background-color:#999;
        width:100px;
        padding-top: 10px;
        font-weight: bold;
        float:left; }

   #nav a {text-decoration: none;
           padding-bottom: 15px;

a:link; { color: #996633;}

a:visited { color: #ccaa66;}

a:hover { color: #330000;
}

  #nav ul { list-style-type: none;}

    </style>

</head>

<body>
    <h1>
        <img src="javalogo.gif" alt="JavaJam Coffee House" 
             width="619" height="117">
    </h1>
    <p>Follow the winding road to JavaJam...</p>


<div id="nav wrapper">
<ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="music.html">Music</a></li>
    <li><a href="">Jobs</a></li>
</ul>

</div>

<main>
<div id="wrapper">
    <img src="windingroad.jpg" alt="Winding Road" 
         width="333" height="156" class="floatright">

</div>

<ul>
    <li>Specialty Coffee and Tea</li>
    <li>Bagels, Muffins, and Organic Snacks</li>
    <li>Music and Poetry Readings</li>
    <li>Open Mic Night</li>
</ul>
</main>
<p>
    12312 Main Street<br>
    Mountain Home, CA 93923<br>
    1-888-555-5555
</p>
<footer>
  <p>Copyright &#169; 2014 Javajam Coffee House</p>
  <p><a href="@college.edu">
  a@college.edu</a>.</p>
</footer>
</body>
</html>

Answer 1

有很多方法可以实现这一目标，但这有一种方法：

body {
            margin: 0;
            padding: 0;
        }
        #navigation {
            width: 200px;
            position: fixed;
            top: 0;
            bottom: 0;
            z-index: 1000;
            overflow-y: auto;
            background-color: gray;
        }
        #main {
            margin-left: 200px;
            padding: 5px;
        }

<div id="navigation">
    <h1>
        <img src="javalogo.gif" alt="JavaJam Coffee House" width="619" height="117">
    </h1>
    <p>Follow the winding road to JavaJam...</p>
    <div>
        <ul class="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="menu.html">Menu</a></li>
            <li><a href="music.html">Music</a></li>
            <li><a href="">Jobs</a></li>
        </ul>
    </div>
</div>

<div id="main">
    <div>
        <div id="wrapper">
            <img src="windingroad.jpg" alt="Winding Road" width="333" height="156" class="floatright">
        </div>

        <ul>
            <li>Specialty Coffee and Tea</li>
            <li>Bagels, Muffins, and Organic Snacks</li>
            <li>Music and Poetry Readings</li>
            <li>Open Mic Night</li>
        </ul>
    </div>
    <p>
        12312 Main Street<br>
        Mountain Home, CA 93923<br>
        1-888-555-5555
    </p>
    <footer>
        <p>Copyright &#169; 2014 Javajam Coffee House</p>
        <p><a href="@college.edu">a@college.edu</a>.</p>
    </footer>
</div>

将您的导航包装到一个容器中，然后将您的内容包装到另一个容器中，然后应用css将这两个容器分开，以便它可以左右分开。

此外，对于您的css id属性，它不能包含多个单词，因为此值是唯一的。

如何使用左侧导航制作两列页面？

1 个答案: