个人中心
gpt4 book ai didi

HTML CSS，如何创建侧边栏或列

转载 作者：行者123 更新时间：2023-11-28 11:05:40 25 4
gpt4 key购买 nike

我是 HTML 和 CSS 的新手，我目前正在根据给定的屏幕截图处理一个元素，但遇到了障碍。我不确定如何划分文本以使其看起来与模型相同。在做侧边栏时，它给了我一个完整的独立 div。元素链接:http://postimg.org/image/no7gsn23z/我的进步:(感谢您的答复，你们都是 All Rock!但我仍然有同样的问题，你能指出我需要进行更改的地方吗？下面是截图:

所以我尝试了你的建议，但它给了我同样的问题:它在一个单独的空间上添加了侧边栏，我想将一个内容分成两列:下面是它现在的样子的图像对于横幅放置和侧边栏这两个问题:

侧边栏 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>

最佳答案

这是关于链接的代码: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，如何创建侧边栏或列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22270478/

25 4 0
文章推荐： ios - Facebook 和谷歌使用 Swift 登录
文章推荐： ios - 使用 Alamofire 验证 JSON 响应
文章推荐： css - 为文字装饰线模拟文字装饰色
文章推荐： swift - 从 Firebase Storage 中检索一个节点下的多张照片
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com