Javascript 打印样式表不工作？_Javascript_Jquery_Html_Css_Print Style

Javascript 打印样式表不工作？

javascript jquery html css

Javascript 打印样式表不工作？,javascript,jquery,html,css,print-style,Javascript,Jquery,Html,Css,Print Style,所以，我第一次上网页设计课，我的教授告诉我们在我们的网站上使用特定的打印样式表。我想让它隐藏标题和导航栏（也包括页脚、标题等），但我似乎无法正确操作。导航栏是下面代码中的'cssmenu'，顺便说一句，不是，这让我很反感。本网站用于教育目的（即无版权使用），因此请不要批评我如何设置代码，因为我是新手。如果可以的话，请帮忙我的网站是：不管怎么说，它不起作用了，它在我做的另一个网站上起作用了。我所说的不工作，是指我试图隐藏的元素在尝试打印时仍然可见。这是我被告知要使用的模板： /* Remove

所以，我第一次上网页设计课，我的教授告诉我们在我们的网站上使用特定的打印样式表。我想让它隐藏标题和导航栏（也包括页脚、标题等），但我似乎无法正确操作。导航栏是下面代码中的'cssmenu'，顺便说一句，不是，这让我很反感。本网站用于教育目的（即无版权使用），因此请不要批评我如何设置代码，因为我是新手。如果可以的话，请帮忙

我的网站是：

不管怎么说，它不起作用了，它在我做的另一个网站上起作用了。我所说的不工作，是指我试图隐藏的元素在尝试打印时仍然可见。这是我被告知要使用的模板：

/* Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}

/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}

/* Change text color to black (useful for light text on a dark background) */
.lighttext
{
color: #000 
}

/* Improve color contrast of links */
a:link, a:visited
{
color: #781351
}

我就是这样调整的：

@charset "UTF-8";
/* CSS Document */

body {
    font-family: Georgia, serif;
    background: none;
    color: black;
}
#page {
    width: 100%;
    margin: 0; padding: 0;
    background: none;
}
#header, .cssmenu, #footer, .noprint {
    display: none;
}
.entry a:after {
    content: " [" attr(href) "] ";
}
#printed-article {
    border: 1px solid #666;
    padding: 10px;
}

h1
{
color: #000
}

h2
{
color: #000
}

a:link, a:visited
{
color: #781351
}

请记住，我是网站新手。最后，这是我网站上一个页面的html，你可以看到它是如何工作的。我删除了段落和内容来压缩代码，以便您更好地理解它，因为我怀疑这是问题所在：

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OITNB - Piper Kerman</title>
<meta name="keywords" content="html, responsive, grid, css, web design" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/drop_down.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script type='text/javascript' src='js/drop_down.js'></script>
</head>

<body>
<div class="page">
  <header align="center"> <a href="Welcome.html"><img src="images/oitnb.jpg" alt="OITNB" width=""/></a> </header>
  <div id='cssmenu'>
    <ul>
      <li class='has-sub'><a href='#'><span>About the Show</span></a>
        <ul>
          <li class='active last'><a href='synopsis.html'><span>Synopsis</span></a></li>
          <li class='active last'><a href='piper.html'><span>The Real Piper Kerman</span></a></li>
        </ul>
      </li>
      <li class='has-sub'><a href='#'><span>Seasons</span></a>
        <ul>
          <li><a href='season_one.html'><span>Season One</span></a></li>
          <li class='active last'><a href='season_two.html'><span>Season Two</span></a></li>
        </ul>
      </li>
      <li class='has-sub'><a href='#'><span>Cast</span></a>
        <ul>
          <li class='active last'><a href='season_one_cast.html'><span>Season One</span></a></li>
          <li class='active last'><a href='season_two_cast.html'><span>Season Two</span></a></li>
        </ul>
      </li>
      <li class='has-sub'><a href='#'><span>Pics</span></a>
        <ul>
          <li><a href='posters.html'><span>Posters</span></a></li>
          <li><a href='fan_art.html'><span>Fan Art</span></a></li>
          <li><a href='thumbnails.html'><span>Thumbnails</span></a></li>
          <li><a href='gifs.html'><span>GIFs</span></a></li>
        </ul>
      </li>
      <li class='active'><a href='contests.html'><span>Contests</span></a> </li>
      <li class='active last'><a href='contact.html'><span>Contact</span></a></li>
    </ul>
  </div>
</body>
</html>


OITNB-Piper Kerman

您需要使用媒体查询来阻止打印时显示元素。类似于这一点的东西应该会起作用

@media print
{
    /* Remove unwanted elements */
    #header, #nav, .noprint
    {
        display: none;
    }

    /* Ensure the content spans the full width */
    #container, #container2, #content
    {
        width: 100%; margin: 0; float: none;
    }

    /* Change text color to black (useful for light text on a dark background) */
    .lighttext
    {
        color: #000 
    }

    /* Improve color contrast of links */
    a:link, a:visited
    {
        color: #781351
    }
}

这将为您提供更详细的信息。

这是关于在CSS文件中找到与html中的元素、ID或类匹配的正确CSS选择器，您要更改这些内容：

将CSS文件（

#header、.cssmenu、#footer、.noprint

）中的选择器与html中的ID、类和标记进行比较

您的html有一个没有id的标题标记。然后CSS选择器需要是没有“#”或“.”的“标题”

您的html具有

id='cssmenu'

。然后CSS选择器需要是“#cssmenu”

CSS中的

#footer

和

.nopint

指html中具有

id='footer'

或

class='noprint'

的元素。这些现在似乎没有被使用。

您在css文件中使用了@media print{…}吗？非常感谢您不只是引导我回答另一个问题。我认为解决方案会很困难，因为打印样式表模板看起来很简单（所以我认为代码可能是错误的），所以我发布了这个问题。我感谢你的帮助！顺便说一句，它不起作用。我应该发布更多的代码吗？到底是什么不起作用？这段代码不应该被逐字复制，而是作为一个示例，说明您应该如何着手解决问题。