个人中心
gpt4 book ai didi

html - 在页面内容旁边放置一列的最佳方式是什么？

转载 作者：行者123 更新时间：2023-11-28 16:35:10 24 4
gpt4 key购买 nike

<分区>

到目前为止，这是我所拥有的， http://codepen.io/anon/pen/XXRYXY

将绿色框(它们代表广告)放置在页面内容右侧的最佳方式是什么？在下面的代码中，我尝试使用 width:50%.

在编写任何代码之前，我是否应该计划好内容的宽度和广告的宽度？我对人们如何计划创建他们的网页感到困惑，因为我的屏幕宽度是 1920 像素，如果我使用该宽度作为模型，那么屏幕较小的用户将以不同的方式查看我的网页。在规划我的元素的测量和定位时，我应该使用什么尺寸？

<body>
<div id="wrap">
 <div id="head">
  <div id="header" style="float:left;">
    <p id="title">
      <a href="#">Blog Title</a>
    </p>
    <p id="description">Blog Description</p>
  </div>

  <div id="navbar" style="float:right;">
    <ul style="list-style-type:none;">
      <li><a href="#">Start Here</a></li>
      <li><a href="#">Section 1</a></li>
      <li><a href="#">Section 2</a></li>
      <li><a href="#">Section 3</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</div>

<div id="welcome-wrap" style="clear:both;">
  <div id="first-time">
    <h2>First time here?</h2>
    <p style="margin:0;">Fusce ut finibus purus, quis convallis orci. Donec a est eget tellus euismod tincidunt non eu urna. Sed id gravida dui. Phasellus sed faucibus nisl. Proin blandit nisl eu lectus convallis.</p>
    <br>
    <br> If it's your first time here,
    <a href="#">read this</a>
  </div>

  <div id="topics">
    <h2>TOPICS</h2>
    <p><a href="#"><strong>Link Topic 1</strong></a>
      <p><a href="#"><strong>Link Topic 2</strong></a>
        <p><a href="#"><strong>Link Topic 3</strong></a>
  </div>
</div>

<div id="inner" style="clear:both;">
  <div id="content">
    <div class="post">
      <a href="#"><img width="300" height="200" src="contentimg.jpg"></a>
      <p>Mauris gravida diam id sem blandit, vitae vestibulum nunc interdum. Nulla congue felis eget tincidunt rhoncus. Nunc rutrum, massa a venenatis fermentum, nisi leo dictum sapien, ut venenatis quam neque sit amet quam. Nunc efficitur hendrerit
        hendrerit. Sed sit amet tortor ex. Pellentesque dapibus porttitor massa eu iaculis. Curabitur varius vulputate sagittis. Aenean ac mauris eu justo lobortis accumsan a vitae est. Praesent imperdiet quam vitae porta lacinia.</p>
      <a class="more-link" href="#" rel="nofollow">Continue Reading</a>
    </div>

    <div style="clear:both;"></div>

    <div class="post">
      <a href="#"><img width="300" height="200" src="contentimg.jpg"></a>
      <p>Nulla porttitor rhoncus justo in molestie. Aliquam sed vehicula mauris, quis egestas augue. In hac habitasse platea dictumst. Donec congue arcu mollis aliquet aliquam. Pellentesque purus dolor, commodo eget tincidunt nec, fringilla quis magna.
        Nam suscipit cursus purus, in sodales tortor egestas suscipit. Proin ut augue sit amet nulla laoreet maximus id eu nibh. Pellentesque dapibus finibus egestas.</p>
      <a class="more-link" href="#" rel="nofollow">Continue Reading</a>
    </div>

    <div style="clear:both;"></div>

    <div class="post">
      <a href="#"><img width="300" height="200" src="contentimg.jpg"></a>
      <p>Fusce ut finibus purus, quis convallis orci. Donec a est eget tellus euismod tincidunt non eu urna. Sed id gravida dui. Phasellus sed faucibus nisl. Proin blandit nisl eu lectus convallis, vel ultricies risus varius. Morbi id nibh enim. Suspendisse
        potenti. Nulla facilisi. Quisque congue lacinia dapibus.</p>
      <a class="more-link" href="#" rel="nofollow">Continue Reading</a>
    </div>
  </div>

  <div id="sidebar" style="float:right;">
    <div>
      <p>
        <a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS1uD8Fj5M9sS4Lo1OrKIycgx2gMDnEE7zHru3j--pDFlwqujXiKA"></a>
      </p>
      <p>
        <a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS1uD8Fj5M9sS4Lo1OrKIycgx2gMDnEE7zHru3j--pDFlwqujXiKA"></a>
      </p>
      <p>
        <a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS1uD8Fj5M9sS4Lo1OrKIycgx2gMDnEE7zHru3j--pDFlwqujXiKA"></a>
      </p>
      <p>
        <a href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS1uD8Fj5M9sS4Lo1OrKIycgx2gMDnEE7zHru3j--pDFlwqujXiKAg"></a>
      </p>
    </div>
  </div>

CSS:

    body{
    padding:0;
    margin:0;
}

#wrap{
    margin-left:500px;
    margin-right:500px;
    max-height:5000px;
}

/*head*/

#head{
    min-height:135px;
    width:960px;
    margin-top:50px;
}

#title a{
    font-size:2em;
    text-decoration:none;
    color:black;
}

#description{
    font-size:0.9em;
}

#header p{
    margin:0 !important;
}

#navbar ul li{
    float:left;
    padding-left:1.5em;
    margin-left:0;
}

#navbar ul li a{
    color:black;
    text-decoration:none;
    font-size:1.2em;
    margin-left;0;
}

/*sub head*/
#welcome-wrap{
    width:100%;
    height:500px;
}

#first-time{
    float:left;
    width:450px;
    padding-right:150px;
}

#topics{
    float:left;
    text-align:center;
    background-color:green;
    width:300px;
    height:280px;
}
/*content*/

#inner{
    width:50%;
    float:left;
}

#sidebar{
    float:right;
    width:50%;
}

.post a{
    float:left;
}

24 4 0
文章推荐： javascript - 烦人的弹出窗口 - (或其他更优雅的解决方案)
文章推荐： Javascript 将 if 语句放入附加 (' ' )？
文章推荐： python - Django 使用模板变量的值作为另一个变量名的一部分
文章推荐： javascript - 如何使下拉菜单垂直
行者123
个人简介

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

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