Question

有没有办法制作一个网页，当用户查看时，网页只能修改CSS显示完全不同的页面？

Answer 1

csszengarden.com是否符合您的想法？

Answer 2

层叠样式表仅影响页面的样式。据我了解，它们没有提供更改页面的行为或位置的功能。

也就是说，您可以使用CSS彻底改变设计良好的页面的外观。请参阅http://csszengarden.com/作为通过仅操纵CSS可以显着改变的网站示例。

Answer 3

如果我认为我得到你所说的话，请使用媒体查询

Answer 4

更新：您想要全屏覆盖吗？（Live Demo）

<小时/> 旧答案： 我在一个没有提供任何服务器端脚本的网站上使用了类似的内容。我只需更改<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>

<击>

Answer 5

您可能需要仔细考虑您要实现的目标。如果你的意图是隐藏用户的某些信息，根据他们的状态，你真的不会隐藏任何东西。当然，CSS可以帮助不显示元素，但它仍然在页面的源中。

您可以根据最终用户报告的浏览器/设备类型有条件地加载CSS，但除此之外，您需要在页面/应用中使用某种基础业务逻辑。

我使用名为Django（www.djangoproject.com）的网络框架，这使我能够做你想做的事情。一个例子看起来像这样（在Django的模板标记语言中）：

{% if request.user.is_staff %} DISPLAY COOL DIV HERE {% else %} NOTHING TO SEE HERE {% endif %}

使用CSS无法定义。 CSS仅用于演示。

Answer 6

单独使用CSS无法做到这一点。

你可以一起使用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>

以下某处<div id="colorCode1">。这基本上允许您发信号通知JavaScript函数根据CSS类中定义的样式呈现不同的页面。我想不出任何理由这会是一个好主意，但

Answer 7

您可以使用css添加内容，但它受到严格限制，在某些浏览器中不受支持。添加元素（显示“叠加”所需）要复杂得多，而且通常不赞成，但仍然可以（在某些浏览器中）。您需要操纵content css属性。

有关详细信息，请参阅this问题。

要实现叠加效果或重定向效果，您需要使用content添加允许您重定向的javascript或能够显示其他内容的元素，例如iframe。

如何使用CSS重定向

7 个答案: