Question

我想知道如何实现上述目标（仅使用带有HTML的HTML或内联CSS）。我真的在设置一些简单的东西，有一个照片网格（我假设一张桌子最好这样做）3张图片宽，但我需要很长的图片。

以下是我正在为教会的新网站做些什么的预览：https://web.archive.org/web/20160115182724/http://kindredchurch.org/im-new/leadership/

我们已经拍摄了一些新照片，并希望将所有照片锁定到特定尺寸，我告诉它。这可能吗？

Answer 1

使用表格并不是解决这个问题的方法。你需要在div中的div内使用Div。分区是你放入......所有东西的盒子。

对此你可能已经意识到了一点。例如，不同大小的屏幕呢？手机怎么样？如何使图像/结构适当调整大小？

如果有类似桌子的结构可以让你轻松掩盖这些可能性，那会不会很棒呢？

它叫做Bootstrap。

运行this 30-minute example project，您将有一个良好的开端。

然后，如果您需要更多信息，请在Bootstrap上查找一些YouTube教程。但是使用表格进行格式化只会给你带来长期的悲痛。

背景：CSS是设置字体尺寸，字体颜色，边距宽度，元素高度等样式的样式。

您可以通过多种方式将CSS添加到内容中。最常见的是通过外部CSS文件（不适合您）或<style></style>标签之间 - 这可能适合您。它看起来像这样：

＆＃13;

<style>
  #bigBox{margin:50px;padding:50px;background:yellow;border:1px solid maroon;}
  #innerBox{padding:30px;font-size:2rem;color:darkcyan;background:wheat;border:1px solid orange;}
  .slantMe{font-style:italic;color:red;}
</style>

<div id="bigBox">
  <div id="innerBox">
    This box <span class="slantMe">styled</span> by CSS
  </div>
</div>

＆＃13;

您可以看到上面的示例如何将样式说明与HTML分开。漂亮，干净，易于阅读。

但是，您可以通过在任何HTML标记上添加style="css:value;" 属性来使用相同的CSS。例如，以上将是：

＆＃13;

<div id="bigBox" style="margin:50px;padding:50px;background:yellow;border:1px solid maroon;">
  <div style="padding:30px;font-size:2rem;color:darkcyan;background:wheat;border:1px solid orange;">
    This is <span style="font-style:italic;color:red;">messier,</span> but works!
  </div>
</div>

＆＃13;

HTML标记在标记内可以有多个不同的属性，具体取决于标记的类型。例如：

<form action="somefile.php" method="get">  <-- action/method are specific to form tag

<textarea rows="5" cols="50"></textarea> <-- rows/cols specific to textarea tag

<p style="font-weight:bold;color:green;">Some stuff </p> <-- most tags can have style attribute

值得了解的新属性是the data attribute。它是一个允许您将隐藏信息存储在标签本身中的属性！从这个问题来看，我没有看到任何明显的用途/目的，但了解它是件好事。 将来可能会有用，谁知道？

通过HTML表强制图像大小

1 个答案: