打印样式表不工作
Print stylesheet not working?
我第一次上网页设计课,我的教授告诉我们要为我们的网站使用一个特定的打印样式表。我想要它隐藏头和导航栏具体(页脚,标题等),但我似乎不能得到它的权利。顺便说一下,导航栏是下面代码中的'cssmenu',而不是,这让我感到困惑。这个网站是为了教育目的(即无版权使用),所以请不要批评我是如何设置代码的,因为我是新手。如果可以,请帮忙。
我的网址是:http://tiger.towson.edu/~kmoore25/Proj_3/Welcome.html不管怎样,它不起作用,它在我做的另一个网站上起作用了。通过不工作,我的意思是我试图隐藏的元素在尝试打印时仍然可见。这是我被告知要使用的模板:
/* 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>
这是关于在你的CSS文件中找到合适的CSS选择器,匹配你的html中的元素,id或类,你想改变:
将CSS文件(#header, .cssmenu, #footer, .noprint
)中的选择器与html中的id、类和标签进行比较。
你的html有一个没有id的头标签。然后CSS选择器需要是"header",不带"#"或"。"。
你的html有id='cssmenu'
。然后CSS选择器需要为"#cssmenu"
#footer
和.nopint
在你的CSS是指元素在你的html有id='footer'
或class='noprint'
。
您需要使用媒体查询来阻止元素在打印时显示。类似这样的代码应该可以达到这个效果。
@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
}
}
这个问题会给你更详细的信息
相关文章:
- 滑动旋转木马无法使用默认样式正常工作
- ng样式在与的预标记中!重要的是不能工作
- ng 样式无法正常工作
- 动态行无需样式即可工作
- JavaScript@media打印样式表不工作
- Fuelux-日期选择器样式无法正常工作
- 浏览器在繁重的工作负载之前不应用样式
- 循环时更改数组中项目的样式是't工作
- 为什么 javascript 样式属性无法按预期工作
- 如果填充了三个输入并且两个特定的输入相等,则会更改按钮样式;除非不删除“不等于”输入的值,否则它可以工作
- Rails:样式表/ javascript在Dev中工作,而不是在Prod中
- :在样式表中使用和在react中导入时,pseudo类后不工作
- 基于XML属性更改样式的indesigncs6脚本不工作
- 当使用javascript更改样式背景时,原来的a:hover停止工作
- 我如何添加变换样式总是工作
- 聚合物1.4.0到1.7.0,全局:根样式不再工作
- JQuery计算器不工作,因为新的CSS样式
- 一些CSS样式不能在SVG上工作
- CSS样式的输入不工作
- 样式在
中不能正常工作