我希望能够编辑3个不同的身体css标签。我希望一个页面不包含任何溢出滚动条但我需要另一个页面才能使用垂直滚动而第三个页面仅使用水平滚动。
可以这样做吗?我在某处读到它可能会导致一些浏览器窒息,但我不确定该源是多么可靠。
另外如果它是一个类,你会如何在CSS中调用它,它会像其他CSS那样被编写吗?
.body1{
}
.body2{
}
.body3{
}
答案 0 :(得分:2)
我认为您实际上是在询问“如何在网站的每个页面上对body
标记设置不同的方式”。
与原始建议类似,我会在id
标记中添加class
而不是body
:
Page 1 HTML
<body id="firstPage">
Page 2 HTML
<body id="secondPage">
Page 3 HTML
<body id="thirdPage">
然后在 CSS 中,你会像这样定位它们:
#firstPage{
/*styling in here*/
}
#secondPage{
/*styling in here*/
}
#thirdPage{
/*styling in here*/
}
答案 1 :(得分:1)
你问题标题的答案是:
但是,要拥有多个滚动条,请使用CSS:
.scrollableContainer
{
overflow: auto;
}
您可以在页面上添加不同的div
元素。
答案 2 :(得分:1)
老实说,您的网站上可以有multiple body
个标签,甚至nested bodies。大多数浏览器都会按预期呈现您的页面。但是,在一个页面中包含多个body标签并不是有效的 HTML。如果您想在不同的页面中使用不同的溢出并且只有一个css文件来执行此操作,则可以在body标记中添加class或id以定位CSS文件中的每个特定页面body标记。要将id添加到body标签,您可以使用服务器端脚本或JavaScript。
要使用JavaScript在页面中添加ID,请在页面中添加此脚本标记:
<script type="text/javascript>
document.body.setAttribute("id", "thePage1Id");
</script>
然后在您的CSS文件中,您可以使用这些ID来定位您的网页:
body#thePage1Id{overflow:auto;}
body#thePage2Id{overflow:scroll}
...
回复duri:
我不得不在这里回复你,因为我需要告诉你这个形象:
仅仅因为webkit浏览器忽略了多个body标签,你不能说我们不能拥有多个body。你仍然可以在一个页面中拥有多个实体,但它不是有效的HTML,也许它不能正常工作。
答案 3 :(得分:0)
不,你不能在一个页面中使用超过1个身体标签,但你可以按照你的建议在不同页面上对身体标签应用不同的样式 - 当然是。
答案 4 :(得分:0)
您可以使用不同的样式表来控制每个页面布局的正文标记。
所以:
第一页拉入page1.css(附带体型 - 无溢出滚动条)
第二页拉入page2.css(附带体型 - 仅垂直滚动)
第3页拉入page3.css(附带体型 - 仅水平滚动)
(显然没有愚蠢的文件名)
我比单个文件中的多个样式集更喜欢这个,以提高可读性和可维护性。