Question

我正在创建一个只有两个主页的网站，分别是“索引”和“关于我”页面。在制作模板和所有内容后，我遇到了一个令人困惑的问题，我无法真正编辑关于页面的Css样式。

基本上我的关于和索引页面从我的主Html（从头开始制作）得到了相同的模板我觉得它很好...但我希望我的关于页面与我的索引页面有不同的外观，每次我在“可编辑”区域进行了更改，我想从“关于”页面中消失，它也会影响INdex页面。同样的样式表，我想在about页面上有不同的颜色，但似乎每次我做的事情都会影响到整个网站。

这是我到目前为止所做网站的图片。 Homepage and about page

这两个页面具有相同的模板，相同的可编辑区域和相同的css，目前看起来完全相同，但我想从about页面中删除div class:"notes"并扩展其div id="main-content"的宽度1}}完全改变几乎每一种颜色我的意思是关于页面的整个风格，而不影响主页并保持原样..我该怎么办？请

谢谢

PS：我正在使用Dreamweaver cs6。

主要dwt html /相同的html for about和index页面唯一的区别是for index和about是不可编辑的

<code> 

<!doctype html>

<html>

<head>
<!--JavaScript that enables Internet Explorer (version 8 and below) to recognise HTML5      elements -->
<script type="text/javascript">
document.createElement ('article')
document.createElement ('nav')
document.createElement ('aside')
document.createElement ('header')
document.createElement ('footer')
document.createElement ('main')
</script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/timothy.js"></script>

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

<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>My Uni Website</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>



<body>
<!--Write web page content and markup within the 'body' tags -->
<div id="outer">
    <div class="frame">
      <div class="fade"></div>
      <img src="../images/huxley.jpg"/>
    </div>
<div id="wrapper">
<!--The 'wrapper' div contains all the page content and can be styled -->
     <div id="icon">
      <ul>
                <li><a href="http://www.twitter.com/justcallmebigdi"><img  src="../images/twitter.png" width="20" /></a></li>
                <li><a href="http://www.behance.net/justcallmebigdi"><img src="../images/behance.png" width="20" /></a></li>
      </ul>
  </div>

    <div id="logo"><a href><img src="../images/logo2.png" width="209" height="207"/></a></div>



 <!--The main heading for the page -->    
    <header>
        <!-- <h1>CI135 Learning journal</h1> -->

      <h2> How I mastered web standards in 10 weeks</h2> 
    </header>

 <!--The primary navigation for the page -->
  <nav>
        <ul>
            <li><a href="../index.html">HOME</a></li>
            <li><a href="../about.html">ABOUT ME</a></li>
        </ul>
  </nav>

 <!--Secondary sidebar navigation -->  
  <aside>
  <div class="image"><img src="../images/information.png" width="100"/></div> 
  <div class="aside">
  <!-- TemplateBeginEditable name="aside" -->
      <h3> The Weekly posts </h3>
      <ol>
        <li><a href="../index.html">Getting started</a></li>
        <li><a href="../index.html">Learning more about tags</a></li>
        <li><a href="../index.html">Learning about lists and tables</a></li>
      </ol>
      <h3> Favourites</h3>
      <ul>
        <li> <a href="../index.html"> W3C markup validation service </a></li>
        <li> <a href="../index.html"> Web platform Docs -  Web development for beginners </a>  </li>
        <li> <a href="../index.html"> Html5 Doctor -  Helping you implement HTML5 today </a></li>
      </ul>
      <h3> Basic Definitions </h3>
      <dl>
        <dt><strong>HTML</strong></dt>
        <dd>Hyper-text markup language - markup language used to structure content</dd>
        <dt><strong>CSS</strong></dt>
        <dd>Cascading stylesheets - used to tell browsers how to present HTML elements</dd>
        <dt><strong>JavaScript</strong></dt>
        <dd>Scripting language for adding interactive behaviour to web pages</dd>
      </dl>
      <!-- TemplateEndEditable -->
      <h3> My time table </h3>
    <table width="523" height="81" border="1">
          <tr>
              <td width="71" height="23" bgcolor="#FFFFFF">Day/Time</td>
              <td width="215" bgcolor="#FFFFFF">Monday</td>
              <td width="215" bgcolor="#FFFFFF">Tuesday</td>
          </tr>
          <tr>
              <td height="25" bgcolor="#FFFFFF">9-10 am</td>
              <td>&nbsp;</td>
              <td>Lecture</td>
          </tr>
          <tr>
              <td height="23" bgcolor="#FFFFFF">10-11 am</td>
              <td>lecture</td>
              <td>Lab</td>
          </tr>
      </table>
  </div>        
  </aside>



 <!--The main page content -->   
  <main><!-- TemplateBeginEditable name="mainContent" -->
    <article>
      <!--Content node -->
      <div class="header">
        <h1>Week 3: Tables, link images, quoting text </h1>
      </div>
      <p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3. </p>
    </article>
    <article>
      <div class="header">
        <h1>Week 2</h1>
      </div>
      <p>PS: ADD COMMENTS ABOUT WEEK 2.</p>
    </article>
    <article>
      <div class="header">
        <h1>Week 1</h1>
      </div>
      <p>ADD COMMENTS ABOUT WEEK 1. </p>
      <p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
        PS: ADD MORE COMMENTS ABOUT WEEK 3</p>
    </article>
  <!-- TemplateEndEditable --></main>

  <div id="right_side_note">
            <div class="post"><!-- TemplateBeginEditable name="SideNotes" -->
              <h2>Notes</h2>
              <p class="date">March 22, 2011</p>
              <p>The W3C defines HTML and CSS as follows:</p>
              <blockquote>
                <p>HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages. <br>
                  <cite>W3C standards for web </cite></p>
              </blockquote>
            <!-- TemplateEndEditable --></div>
  </div>

  <div id="footer">
      <!--Footer content -->
      <p class="footer-text">&copy; 2013 Daniel Biakath / University of Brighton.</p>
</div>

</div>
</div>

<!--Close 'wrapper' div -->
</body>
<!--Close 'body' -->
</html> 

<code>

Answer 1

您应该创建两个单独的CSS文件，并将每个页面的样式放入单独的文件中，例如about.css和home.css。从about页面链接到about.css，从主页链接到home.css。

CSS链接应如下所示：

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

CSS文件按顺序加载，因此如果样式应该相互覆盖，则需要考虑这一点。如果在头部声明了以下内容并且两个文件都具有相同名称的样式，则将使用home.css文件中的样式。如果是这种情况，您可能看不到对about.css所做的更改。最重要的CSS文件应该列在最后。

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

如果您的样式目前是内联的，则如下所示：

<style type="text/css">
/*YOUR STYLES HERE*/
</style>

您可以直接在每个文件中进行更改，或者如果您想从标记内部剪切所有内容并将其放入相应的css文件中。

如果在对CSS进行更改后没有发生任何事情，则根据您使用的系统，可能会发生缓存。即使您进行了更改，Web服务器提供的版本也是相同的。如果我不小心的话，CSS文件似乎对我这么做了很多。如果是这种情况，请重置网站并清除浏览器缓存，您应该好好去。

为网站的不同页面制作CSS样式表

1 个答案: