Fatal编程技术网
  • html/
  • Html 如何使用CSS重定向

Html 如何使用CSS重定向

html css

Html 如何使用CSS重定向,html,css,Html,Css,有没有一种方法可以使一个网页在被用户查看时只需修改CSS即可显示一个完全不同的页面？如果我认为我理解了你的意思，那么使用媒体查询会按照你的想法做吗？层叠样式表只会影响页面的样式。据我所知，它们不提供更改页面行为或位置的功能 <style type="text/css"> body div { display: none; } body.blue div.blue { display: block; } body.red div.red { display: b

有没有一种方法可以使一个网页在被用户查看时只需修改CSS即可显示一个完全不同的页面？

如果我认为我理解了你的意思，那么使用媒体查询会按照你的想法做吗？

层叠样式表只会影响页面的样式。据我所知，它们不提供更改页面行为或位置的功能

<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>
也就是说，您可以使用CSS完全改变精心设计的页面的外观。请参见仅通过操纵CSS就可以显著改变的网站示例。

更新：您想要的是全屏覆盖吗？（）

旧答案：我在一个不提供任何服务器端脚本的站点上使用过类似的东西。。我所需要改变的只是
上的课程来改变内容。缺点是内容在页面源代码中仍然可见

<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 div{display:none；}
body.blue div.blue{display:block；}
body.red div.red{display:block；}
蓝色内容！
红色内容！
两者都满意！

您可能需要仔细考虑您想要实现的目标。如果您的意图是对用户隐藏某些信息，这取决于用户的状态，那么您实际上不会隐藏任何信息。当然CSS可以帮助不显示元素，但它仍然在页面的源代码中

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

我使用一个名为Django（www.djangoproject.com）的web框架，它使我能够做您想做的事情。一个示例可能如下所示（在Django的模板标记语言中）：

这是不可能用CSS定义的。CSS仅用于演示。

单凭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>


#色码1{
颜色：蓝色；
}
功能设置可见（设置）{
var myElement=document.getElementById（“colorCode1”）；
if（myElement.style.color==“蓝色”）{
myElement.innerHTML=getPageContentForBlueCode（）；
}
if（myElement.style.color==“红色”）{
myElement.innerHTML=getPageContentForRedCode（）；
}
}
下面的某个地方有
。这基本上允许您向JavaScript函数发送信号，根据CSS类中定义的样式呈现不同的页面。我想不出任何理由这是一个好主意，尽管你可以用css添加内容，但它受到严格限制，在某些浏览器中不受支持。添加元素（显示“覆盖”所需的元素）要复杂得多，通常不赞成添加元素，但这仍然是可能的（在某些浏览器中）。您需要操作
内容
css属性

有关更多信息，请参见问题


要实现覆盖或重定向效果，您需要使用
内容
来添加允许重定向的javascript或能够显示其他内容的元素，如iframe。
好吧，我不太确定它是否可以实现我想要的功能。基本上，我正在寻找类似重定向的东西（例如，在样式化页面的顶部覆盖Google，或者在完全不同的HTML中交换）。这可行吗？我可以通过将主体内容设置为url（图像路径）来处理图像，但除此之外，我有点不知所措。好吧，我不太确定这是否可以实现我想要的（或者我想要做的是否可能）。基本上，我正在寻找类似重定向的东西（例如，在样式化页面的顶部覆盖Google，或者在完全不同的HTML中交换）。这可行吗？我可以通过将主体内容设置为url（图像路径）来处理图像，但除此之外，我有点不知所措。如果您的页面包含针对远程站点的
元素，您可以使用CSS在页面中定位
；但是，CSS不会帮助您更改页面上的DOM。要操作不仅仅是样式，您应该使用客户端脚本（JavaScript）或服务器端脚本（无论您的服务器支持哪种脚本，并且您喜欢哪种脚本）。如果您怀疑IFrame可能有帮助，但以前没有使用过，请查看此资源：。CSS还可以使用
内容
或
：：在
之前和
之后影响页面内容。哦，太酷了，可以这样做！您能否更详细地了解媒体查询如何实现这一点？媒体查询将根据屏幕大小或在屏幕上查看与打印来加载不同的CSS样式。哦。。不，那不是我要问的。我想在CSS中模拟页面重定向。这能应用到我的问题上吗？基本上，我正在寻找类似重定向的东西（例如，在样式化页面的顶部覆盖Google，或者在完全不同的HTML中交换）。这可行吗？我可以通过将主体内容设置为url（图像路径）来处理图像，但除此之外，我有点不知所措。CSS用于样式设置，而不是脚本编写。我的例子相当有限，只做它所做的事。：）嗯，我看到有人（在这些限制条件下）在整个页面上实现了某种覆盖，当点击时，会重定向到不同的URL。我想没有比这个更好的方法了？@buu700:我想你是想用错误的工具来做你想做的事情。我不确定你是否明白。如正文所述，这是唯一的工具。对不起，我一定不清楚；为了清晰起见，刚刚编辑了标题。你知道有什么方法可以在CSS中实现与重定向相同的效果吗？我无法用CSS实现。但是，您可以使用HTML:
<