【问题标题】:Making a CSS Stylesheet for different pages of a website为网站的不同页面制作 CSS 样式表
【发布时间】:2014-01-11 01:20:20
【问题描述】:

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

基本上,我的 About 和 Index 页面从我的主 Html(从头开始制作的模板)获得了相同的模板,我觉得那里很好 .. 但我希望我的 About 页面与我的 Index 页面有不同的外观,每次我对想要从“关于”页面中消失的可编辑区域进行了更改,它也会影响索引页面。样式表也是如此,我希望关于页面上有不同的颜色,但似乎每次我做某事都会影响整个网站。

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

两个页面都有相同的模板、相同的可编辑区域和相同的 css,目前看起来完全一样,但我想从 about 页面中删除 div class:"notes" 并扩大他的 div id="main-content" 更改的宽度几乎每一种颜色,我的意思是关于页面的整个样式,而不影响主页并保持原样..我该怎么办?请

谢谢

PS:我正在使用 Dreamweaver cs6。

main dwt html/about 和 index 页面的相同 html 唯一的区别是 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>

【问题讨论】:

  • 你应该做 2 个不同的 css 页面,并在正确的页面中调用它们。
  • 是的,伙计,我想过..但是然后如何将新的css页面链接到about页面..
  • 他只是解释说,当他说“在正确的页面中呼叫他们”时。如果您需要如何链接到 CSS 文件的示例,您应该在下面看到答案。
  • 您应该包含每个页面的 HTML,而不是图片。

标签: html css templates web dreamweaver


【解决方案1】:

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

CSS 链接应如下所示:

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

CSS 文件是按顺序加载的,因此如果样式应该相互覆盖,则需要考虑这一点。如果在 head 中声明了以下内容,并且两个文件具有相同名称的样式,则将使用 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 文件似乎对我做了很多。如果是这种情况,请重置网站并清除浏览器缓存,然后就可以了。

【讨论】:

  • 如果 Main.html 中的 CSS 卡在那里,那么您需要按照您的描述进行操作,并将 CSS 放在 About 页面中以覆盖其他 CSS 中的 CSS。如果您可以将关于我们页面的类和 id 命名为与主页面不同的名称,则可以使用单个 css,但如果有共享名称,我认为您将无法覆盖。
  • Awwwwwwwwwwww Racenerd .. 非常感谢队友 .. 我现在明白了... 非常感谢 .. 出于某种原因,我无法投票给答案,因为我没有声誉或 somthin ¬_ ¬ 但再次感谢。
  • 非常好的 cmets RacerNerd。我为处理外部样式表的最佳方式而苦恼,并且看到了各种各样的理念——从“整个站点一个样式表”到“每个页面一个样式表,并在每个页面上加载所有样式表” "(不知道为什么)。可能“正确”的方式在中间的某个地方。谢谢!
  • 是的,Ctr+F5 是网页设计师最好的朋友。至少在大多数情况下。
  • 好的,伙计们。在花了一夜之后...... RacerNerd 是一个好主意,我尝试过但工​​作更像是拥有多个单独的样式表以避免笨重的单个样式表,这不是我所要求的......我问的是什么TimSPQR 说:“每个页面一个样式表,并在每个页面上加载所有样式表”.. 我想我只是不知道如何制定我的问题
猜你喜欢
  • 2014-08-02
  • 2011-03-18
  • 1970-01-01
  • 1970-01-01
  • 2017-05-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多