javascript - 如何修复我的 CSS 并使我的网站看起来像博客或杂志？

Question

这是我网站的代码，CSS 为 <style></style>即使它基本上是原始样式表中的外部样式表:

<link rel="stylesheet" type="text/css" href="magazinetheme.css">

这是代码:

<TITLE>A Guide Book on Tourism</TITLE>
<style>
  div {
    background-color: lightgrey;
    width: 300px;
    border: 5.2px solid green;
    padding: 25px;
    margin: 25px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    float: left;
  }
  .div1 {
    background-color: lightgrey;
    width: 500px;
    border: 2px solid red;
    height: auto;
    padding: 25px;
    margin: 25px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    float: left;
  }

  .div2 {
    background-color: #FFF;
    width: 300px;
    border: 2px solid red;
    padding: 25px;
    margin: 25px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    float: left;
  }

  img.auto {
    width: 425px;
    margin-left: auto;
    margin-right: auto;
  }
  .datetime {
    font-style: oblique;
  }
  .wv {
    display: block;
  }
</style>
<div>
</div>
<div class="div1">

  <article><H1>My page</H1>
    <p><span class="datetime">02 Jul 2016</span></p>
    <section class="wv"><img class="auto" src="placeholderpic.jpg"></section>
  </article>
  <p>Your text here</p>
</div>
<div class="div2">
</div>

CSS 运行良好 - 但我想添加一个标题，并且通常有 CSS 更像这个网站:with links in header and a menu .

我如何改进我的 CSS 来创建一个菜单/标题，它可以有一个带有一些基本 JavaScript 的下拉菜单并且与旧浏览器兼容？ [我在 OS X El Capitan 10.11.5 上使用 Firefox 上的用户代理切换器进行测试]。

我考虑过 jQuery，但不确定它是否适合旧版浏览器。

基本上 - 我想修复我的布局，让它看起来更像博客或杂志，同时保留对 Windows、Linux 和 Mac OS X 上旧浏览器的向后兼容性。这是一个基于 PHP 的网站，但它是一个模板/layout 是我自己独立创建的； PHP 博客是我一直致力于创建自己的 PHP 博客的基本网站教程。

Answer 1

根据您提供的信息，我建议您查看 WordPress 这样的平台然后寻找一个与您想要的外观接近的免费主题，只需调整最适合您的主题即可。