0

我有 4 个部门，页眉、左、右和页脚。我想再次将标题分为 2 个部分，左标题和右标题。在右侧标题中，我想将图像保持在同一分区中，我想提及其他选项，例如关于我们的主页。而在左分区应该有文本。

我怎样才能在 HTML 和 CSS 的帮助下做到这一点？以下是 HTML 和 CSS 片段：

 <html>
 <head>
  <title>Search Engine Title Goes Here</title>
  <link rel="stylesheet" type="text/css" href="style1.css">
  </head>
  <body>
  <div id="container"> </div>
  <div id="header">
    <div id="header-left-container">
    <h1>heading1,<br> heading2 and <br>heading3</h1>
    </div>
    <div id=header-right-container>
    <img border="0" src="tra.jpg"  alt="drug"align="right" width="750" height="150">
    </div>
    </div>
   <div id="sidebar"> Left </div>
   <div id="content"> <p></p></div>
   <div id="footer"> </div>
   </body>
   </html>

CSS 代码：

  body {background: #ffffff; margin: 0; padding: 0;}
  a {color: #2b2bf6;}

  #container
  {width: 900px;
   margin: 0;
   padding: 0;
   background: #dddddd;}

   #header
   {width:1000;
   height: 150px;
   margin: 0;
   padding: 0;
   border: 0;
   background: #FFFFA3;}

   #sidebar
   {width: 200px;
   height: 400px;
   margin: 0;
   padding: 0;
   border: 0;
   float: left;
   background: #f0e811;}

  #content
  {width: auto;
  height: 400px;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  background: #8be0ef;}

  #footer
  {width: auto;
  height: 70px;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  background: #000000;
  clear:both;}

由于我是网页设计的新手，请依靠您的友好合作。

4

3 回答 3

1

HTML：

  • 确保引用您的班级名称
  • &nbsp;如果您有空的 div 元素，您可能会发现通过在其中添加它们的行为更具可预测性
  • 像 img 和 br 这样的标签应该是自闭的（<img ... />and<br /> 而不是<img ...>and <br>）
  • 尽量保持你的缩进一致，它使你的代码更容易维护和调试
  • 使用 CSS 样式而不是尝试使用属性对齐 img 元素是更好的做法
  • 使用 CSS 样式而不是尝试使用属性删除 img 元素的边框是更好的做法
  • 图像元素对齐不起作用，因为它的父元素（#header-right-container）将确定它的位置。
  • 检查您是否希望容器 div 包含所有其他元素 - 如果是这样，还要检查宽度，因为它比标题 div 小 100px

这将留下以下 HTML 代码：

<div id="container">&nbsp;</div>
<div id="header">
    <div id="header-left-container">
        <h1>heading1, <br />heading2 and <br />heading3</h1>
    </div>
    <div id="header-right-container">
        <img src="tra.jpg" alt="drug" width="750" height="150" />
    </div>
</div>
<div id="sidebar">Left</div>
<div id="content"><p>&nbsp;</p></div>
<div id="footer">&nbsp;</div>

CSS：

  • 确保您的宽度已分配单位（例如width: 1000px;
  • 正如 Dan Goodspeed 建议的那样，将浮点数添加到子标题类
  • 保持缩进一致，便于维护和调试

这是已实施建议的清理代码：http: //jsfiddle.net/fD3dN/

于 2013-11-06T10:38:08.663 回答
0

我已经在这支笔http://cdpn.io/CgBIu中简化了你的 HTML 和 CSS我还假设容器是下面代码的包装器。

你会看到我已经在 CSS 中完成了所有的样式设置并保持 HTML 非常简单，这将减小文件大小并让页面在未来加载得更快。如前所述，检查您的代码是否存在任何缺陷，例如 ID 名称中缺少“”。

自关闭标签取决于您使用的 Doctype，但最好用 /> 关闭它们。

您不需要为两个元素添加浮动，您可以将其添加到侧边栏，然后内容将在它旁边对齐。无需编写您不需要的额外代码。

于 2013-11-06T11:24:39.740 回答
0

你真的应该只使用 CSS 来设置样式，不要使用边框 =“0”、宽度 =“750”等。不要忘记在 HTML 中引用你的 ID。我看到你忘了引用 header-right-container。此外，在 CSS 中，如果数字不为 0，则必须指定一个单位，该单位是您在 #header 宽度之外留下的。查看您的代码，我猜您遇到的问题是左右标题出现在彼此之上。根据内容的不同，有多种处理方式，但也许这会有所帮助，在你的 CSS 中......

 #header-left-container { float:left;}
 #header-right-container { float:right;}
于 2013-11-06T10:10:19.160 回答