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的下拉列表并且与旧版浏览器兼容？ [我在Firefox上有用户代理切换器进行OS X El Capitan 10.11.5测试]。

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

基本上 - 我想修复我的布局，使其看起来更像博客或杂志，同时保留Windows，Linux和Mac OS X中旧版浏览器的向后兼容性。这适用于基于PHP的网站，但它是一个模板/ layout我独立创建; PHP博客是我从创建自己的PHP博客的基本网站教程开始研究的。

Answer 1

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

Answer 2

我认为您需要使用以下任何一种解决方案：

将您的网站保留在您自己的PHP后端并使用某种CSS框架。我们正在与过去几年的那些人一起爆炸 - Twitter's Boostrap很多人喜欢，我的个人观点是ZURB's Foundation - 而且还有更多的选择。
将您的网站转移到WordPress主题 - 有许多免费＆amp;有关将HTML页面转换为WP主题的付费教程 - 从那里，天空将成为您的限制。

每个选项都可以为您提供自定义您的网站的工具，如博客/杂志。不同之处在于后端。

享受您的探索！

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

2 个答案: