html - 更改页面宽度颜色背景

标签 html css

我出于非传统原因而追求 HTML。我认为它在学术论文中提供了比 MS Word 或 LaTeX 更合适的 Canvas ,因为它为作者提供了更好的交流方式。我正在尝试编写一种可用于符合传统 APA 6 指南的学术论文的格式。

我想使用 index.html 文件或 style.css(我不知道哪个更合适)使页面看起来像一张 8.5 宽的纸(确切尺寸并不重要),而不是完整的浅灰色背景上的宽度。这是在 wordpress 二十十二个主题中完成的,如下所示:

enter image description here

我如何通过更改 index.html 文件(如下所示)来复制这种感觉,或者我可能需要向 style.css 文件中添加一些内容?具体来说,我怎样才能在彩色背景上加上“页面”?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
  </body>
</html>

我尝试从 twenty-12 窃取但无法理解,因为这些文件是 php 并且我不知道 style.scc 文件中的内容。

最佳答案

这是一个简单的例子……具体的规则很容易改变,但应该给你一个想法。基本上,您在正文 (div.container) 的子元素上设置小于 100% 的宽度。然后,将 margin-leftmargin-right 值设置为 auto 以使其水平居中。 height:400pxmargin-topmargin-bottom 设置为 1em 是任意值。您的页面内容只需要构建在 div.container 元素内...您的人造页面。

演示:http://jsfiddle.net/ZXdY8/

CSS

body {
    background: #efefef;
}
.container {
    width: 90%;
    height: 400px;
    margin: 1em auto;
    background: #FFF;
}
.container p {
    padding: 1em;
}

HTML

<body>
   <div class="container">
      <p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>
   </div>
</body>

关于html - 更改页面宽度颜色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16160600/

相关文章:

html - 如何在 CSS 中将绝对定位的元素居中

css - 使用 css 媒体查询防止主容器拉伸(stretch)超过 1680px

Javascript正则表达式匹配选项字符串

css - 使居中的div填充宽度

html - 要在 HTML 表中打印的 PHP 数组数据

html - 表单:您的 CSS 是否适合您的标记,反之亦然?

html - 宽度:100% child 比 parent 大

javascript - TinyMCE 4 字体工具栏未翻译

javascript - 如何使此代码与其余代码一起使用?

javascript - HTML onfocus,onclick 事件不起作用