Question

我的代码有三部分，我希望在浏览器调整大小时进行改进。基本上例如假设网站要在移动设备或桌面上显示，我希望代码的这些部分能够相应地调整大小。

第一个是带有白色背景的水平菜单栏。这里的fiddle及以下是HTML。

        <li><a href="#">OPTION 1</a></li>
        <li><a href="#">OPTION 2</a></li>
        <li>
            <a href="#">OPTION 3</a>
            <ul class="">
                <li><a href="#">OPTION 3 A</a></li>
                <li><a href="#">OPTION 3 B</a></li>
                <li><a href="#">OPTION 3 C</a></li>
            </ul>
        </li>
        <li><a href="#">OPTION 4</a></li>
        <li><a href="#">OPTION 5</a></li>

    </ul>

第二部分是日历表。这里的fiddle及以下是HTML。

  <div id="calendar_div_accordion">
      <div id="calendar_header_one_id" class="calendar_header_div">FIRST</div>

      <div class="calendar_div_accordion_nested_divs">

        <a id="btnPrev" class="btn_prev"><<</a>

        <a id="btnNext" class="btn_next">>></a>  

        <div  id="divCalendar"></div> 
      </div>

      <div class="calendar_header_div">SECOND</div>

      <div class="calendar_div_accordion_nested_divs"> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</div>

      <div class="calendar_header_div">THIRD</div>

      <div class="calendar_div_accordion_nested_divs"> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</div>
  </div>

最后一部分是顶部/第一个水平菜单栏，带有深蓝色白色背景。以下是HTML：

      <nav id="topbar"> 
      <a id="logo_link" href="">LOGO</a>

      <ul>
          <li><a href='#'>HOW IT WORKS</a></li>
          <li><a href='#'>CONTACT</a></li>   
      </ul>
  </nav>

它的CSS：

/* Logo text */
#logo_link {
    float: left;
    height: 50px;
    padding: 15px 15px 15px 15px;
    line-height: 20px;
    font-family: 'Trebuchet MS', Tahoma, Sans-serif;
    font-weight: bold;
    font-size: 40px;    
    color: #F5F5F5;
    text-decoration: none;
}

/* Top bar */
#topbar {
    background: #08445A;
    height: 50px;
    width: 100%;
    border-bottom: 1px #808080;
    float: left;
}

关于在造型时考虑尺寸调整我是否有一个常见的错误？

感谢。

处理HTML和CSS中的大小调整

0 个答案: