Html 如何使用 CSS 重定向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5111992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to redirect with CSS
提问by Ryan Lester
Is there a way to make a Web page of which one can modify only the CSS display an entirely different page when viewed by a user?
有没有办法让一个只能修改 CSS 的网页在用户查看时显示完全不同的页面？
回答by Keltex
Does csszengarden.comdo what you are thinking?
csszengarden.com是否按照您的想法行事？
回答by kbrimington
Cascading Style Sheets affect only the styling of the page. To my understanding, they provide no functionality to change the behavioror locationof the page.
级联样式表仅影响页面的样式。据我了解，它们不提供更改页面行为或位置的功能。
That said, you can completely change the appearance of a well-designed page with CSS. See http://csszengarden.com/as an example of a site that can change dramatically by manipulating only CSS.
也就是说，您可以使用 CSS 完全改变设计良好的页面的外观。请参阅http://csszengarden.com/作为仅通过操作 CSS 就可以发生显着变化的站点的示例。
回答by drudge
Update:Is what you want a Full-Screen Overlay? (Live Demo)
更新：你想要全屏覆盖吗？（现场演示）
Old Answer:旧答案：
<body>to change content. The downside is that the content is still visible in the source of the page.<style type="text/css">
body div { display: none; }
body.blue div.blue { display: block; }
body.red div.red { display: block; }
</style>
<body class="blue">
<div class="blue">Blue content!</div>
<div class="red">Red content!</div>
<div class="blue red">Content for both!</div>
</body>
<body>改变内容的类。缺点是内容在页面源中仍然可见。<style type="text/css">
body div { display: none; }
body.blue div.blue { display: block; }
body.red div.red { display: block; }
</style>
<body class="blue">
<div class="blue">Blue content!</div>
<div class="red">Red content!</div>
<div class="blue red">Content for both!</div>
</body>
回答by Ben Keating
You may want to think carefully about what you are trying to achieve. If your intentions are to hide certain information from the user, depending on their state, you really wont be hiding anything. Sure CSS can help not display an element but it's still in the page's source.
您可能需要仔细考虑您要实现的目标。如果您的意图是对用户隐藏某些信息，根据他们的状态，您真的不会隐藏任何内容。当然 CSS 可以帮助不显示元素，但它仍然在页面的源代码中。
You can conditionally load CSS based on the type of browser/device the end-user is reporting back with but outside of that, you will need some sort of underlying business logic in your page/app.
您可以根据最终用户报告的浏览器/设备类型有条件地加载 CSS，但除此之外，您的页面/应用程序中将需要某种底层业务逻辑。
I use a web framework called Django (www.djangoproject.com) which gives me the ability to do what you are wanting to do. An example could look like this (in Django's template markup language):
我使用了一个名为 Django (www.djangoproject.com) 的网络框架，它使我能够做你想做的事。一个示例可能如下所示（使用 Django 的模板标记语言）：
{% if request.user.is_staff %} DISPLAY COOL DIV HERE {% else %} NOTHING TO SEE HERE {% endif %}
This is impossible to define with CSS. CSS is for presentation only.
这是不可能用 CSS 定义的。CSS 仅用于演示。
回答by smartcaveman
You can't do this with CSS alone.
单独使用 CSS 无法做到这一点。
You can do it using JavaScript and CSS together, but it doesn't sound like a good idea. Here's an example of how you could do it.
您可以同时使用 JavaScript 和 CSS 来实现，但这听起来不是一个好主意。这是一个如何做到这一点的示例。
<style>
#colorCode1{
color:blue;
}
<style>
<script language=javascript type="text/javascript">
function setVisible( setting ){
var myElement = document.getElementById("colorCode1");
if(myElement.style.color=="blue"){
myElement.innerHTML = getPageContentForBlueCode();
}
if(myElement.style.color=="red"){
myElement.innerHTML = getPageContentForRedCode();
}
}
</script>
and somewhere below you have <div id="colorCode1">. This would basically allow you to signal a JavaScript function to render a different page based on a style that is defined in the CSS class. I can't think of any reason this would be a good idea though
在下面的某个地方你有<div id="colorCode1">. 这基本上允许您根据 CSS 类中定义的样式向 JavaScript 函数发送信号以呈现不同的页面。我想不出任何理由这将是一个好主意
回答by TheDog
You can add content with css, however it is severely limited and not supported in some browsers. Adding elements (which is needed to display an 'overlay') is a lot more complicated and generally frowned upon, however it is still possible (in some browsers).You need to manipulate the contentcss attribute.
您可以使用 css 添加内容，但是它受到严重限制并且在某些浏览器中不受支持。添加元素（显示“覆盖”所需的元素）要复杂得多，而且通常不受欢迎，但它仍然是可能的（在某些浏览器中）。您需要操作contentcss 属性。
See thisquestion for more information.
有关更多信息，请参阅此问题。
To achieve your overlay or redirect effect, you would need to use contentto add either javascript that would allow you to redirect or an element capable of showing other content, like an iframe.
要实现叠加或重定向效果，您需要使用content添加允许重定向的 javascript 或能够显示其他内容的元素，如 iframe。
回答by albert
if i think i get what you are saying, use media queries
如果我认为我明白你在说什么，请使用媒体查询
