Question

我是HTML和CSS的新手，我正在从一个给定的屏幕截图开始一个项目，我遇到了一个块。我不知道如何将文本划分为与模型相同。在做侧栏时，它给了我一个完整的单独div。项目链接：http://postimg.org/image/no7gsn23z/ 我的进步:( 谢谢你的回复，你们全部摇滚！但我仍然有同样的问题，你能指出我需要做出改变的地方吗？下面是截图：

所以我尝试了你的建议，但它有点给了我同样的问题：它在一个单独的空间添加了侧栏，我想将一个内容分成两列：下面是它现在看起来的图像两个问题都是横幅放置和侧边栏：

边栏 http://postimg.org/image/4ts1bylfd/

我的另一个问题是将最后一个横幅放在主菜单旁边，但它总是保留一个空格：到目前为止，贝娄是我的编码：

<html>

<head>

<title> Welcome to Groundswell </title>
<link rel="stylesheet" type="text/css" href="mstyle.css" />
    <style>
        .position {position:absolute;right:200px; width:auto;top:80px;}
        .bannerpos {position: absolute;height:auto;width:auto;}
        body {background-image:url("page_background.jpg");padding: 70px;}
        div {background-color: white;}
        .ulmenu { list-style-type: none; display: inline;float: right}
        .limenu{float:left;margin:20px;display: inline;}
       .column{column-count: auto;
  column-gap:40px;
 column-rule:4px outset #ff00ff;
 }
 }
 }
        h2{color: brown;}
        h4,h1{color:gray;}
    </style>
 </head>

 <body>
<div id="outerDiv">

<div style="background-image: url(banner.jpg);" id="header">

<img src="banner.jpg" alt="Groundwell Logo" width=100% height=auto />

<div id="contactButton">

<img class="position" src="contact-off.png" alt="contact us"/>
</div>

 <div style="position: relative;bottom:70px;" id="mainMenu" >
       <ul class=ulmenu>
        <li class=limenu><a href=""> <img src="home-off.png"> </a></li>
        <li class=limenu><a href=""> <img src="gear-off.png"> </a></li>
        <li class=limenu><a href=""> <img src="lifestyle-off.png"> </a></li>
        <li class=limenu><a href=""> <img src="videos-off.png"> </a></li>
        </ul>
    </div> <!-- mainMenu -->

</div> <!-- header --> 

<div style=background-image: url(home_banner.jpg) ; >
              <img src="home_banner.jpg" alt="home banner" width=100% height=auto; />

</div>

<div id="content">

    <div id="mainContent">
<br>
 <br>
    <br>
        <br>
    <h1>Welcome to Groundswell</h1>
    <p>

  lifestyle, or watching some of the sickest video this side of the pipeline, we've    got you covered. On our site you'll find:
    </p>
    <ul>
<li>The latest gear</li>
<li>Surfing journals</li>
<li>Surfing photos</li>
<li>Competition videos</li>
<li>Surf condition reports</li>
<li>...and much more!</li>
    </ul>

    <p>So take off your sandals and wax your board up... you're here.</p>
    <h2>Latest News</h2>
<h4>.</h4>
    <p></p>

    <h4>Velosurty releases new board</h4>
    <p>!</p>

    <h4>Like the new look?</h4>
    <p>You may have noticed things look a little different here at Groundswell! We'll we decided it was time for a change and wanted a fresher look. </p>
    </div><!-- mainContent -->

   <span class=column>
        <h4>This month's surfer's journal</h4>
        <p>Josh Cambria pens this month's surfer journal. Check out his month-long   surfing experience as he surfs up the coast from San Diego up to Ventura. Along the way he meets several celebrities and finds a new favorite board.
    Check it out</p>
  </span>

Answer 1

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    <style type="text/css">
    body {
    background-color: #ddd;
}

.navBar {
    margin-left: 25px;
    margin-right: 25px;
    background-color: #74BAE9;
    padding-bottom: 25px;
}

    .navBar ul {
        list-style: none;
    }

    .navBar ul li {
        float: left;
    }

    .navBar ul li a {
        color: #000;
        margin-right: 15px;
    }

.containter {
    width: 100%;
    height: auto;
}

.leftContent {
    margin-left: 15px;
    width: 50%;
    float: left;
}

.rightBar {
    margin-top: 10%;
    float: left;
    margin-left: 25%;
}
    </style>
    <div  class="navBar">
            <ul>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
    </div>
        <div class="containter">

        <div class="leftContent">
            <h1>Header</h1>
            <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
        </div>
        <div class="rightBar">
            <img src="#">
            <br>
            <h3>Some Header</h3>
            <p>Some text</p>
        </div>
        </div>
    </body>
</html>

Answer 2

不确定您在寻找什么（请更具体），但也许这种布局可以帮助您：

HTML

<body>
  <header></header>
  <nav></nav>
  <div></div>
</body>

CSS

nav{
    position: absolute;
    z-index:1;
    border-top:250px solid lightyellow;
    width: 250px;
    right: 0; top:0; bottom:0;
    background-color: blue;
}
div{
   position: absolute;
   border-right:250px solid skyblue;
   border-top:250px solid skyblue;
   background-color: yellow;
   top:0; bottom:0; left:0; right:0;
}
header{
    position: absolute;
    z-index: 2;
    height: 250px;
    top: 0; left:0; right: 0;
    background-color:palegreen;
}

JSFiddle

Answer 3

这是关于链接的代码：http://postimg.org/image/no7gsn23z/

 <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
        <style type="text/css">
        body {
        background-color: #ddd;
    }

    .navBar {
        margin-left: 25px;
        margin-right: 25px;
        background-color: #74BAE9;
        padding-bottom: 25px;
    }

        .navBar ul {
            list-style: none;
        }

        .navBar ul li {
            float: left;
        }

        .navBar ul li a {
            color: #000;
            margin-right: 15px;
        }

    .containter {
        width: 100%;
        height: auto;
    }

    .leftContent {
        margin-left: 15px;
        width: 50%;
        float: left;
    }

    .rightBar {
        margin-top: 10%;
        float: left;
        margin-left: 25%;
    }
        </style>
        <div  class="navBar">
                <ul>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
        </div>
            <div class="containter">

            <div class="leftContent">
                <h1>Header</h1>
                <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
                <ul>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                    <li>List Item</li>
                </ul>
            </div>
            <div class="rightBar">
                <img src="#">
                <br>
                <h3>Some Header</h3>
                <p>Some text</p>
            </div>
            </div>
        </body>
    </html>

HTML CSS，如何创建侧栏或列

3 个答案:

HTML

CSS

JSFiddle