Struts2的瓷砖先进的外观

我有瓷砖的Struts2的Web应用程序。Struts2的瓷砖先进的外观

我需要做头，侧边栏和页脚为静态的，即。保持在屏幕上的位置不变。

需要用于身体部分的内部的滚动条。

我总共要创建静态标题，侧边栏和页脚和内容（身体）仅部分与内部滚动条的帮助下移动页面。

来源

2011-11-23 Sarin Jacob Sunny

哪些关键词？您需要使用CSS/HTML来布置您的页面。瓷砖会聚集内容，但它不会为您设计。 –

关键字，用于使从顶部侧边栏框，而不是中间 –

没有一个。 –

瓷砖基本上是一个基于Composite View design pattern的视图层框架。这种模式的目的是将页面分成多个可重复使用的部分，以便我们可以按照布局进行组合。

因此，您的要求更倾向于设计哪一种是CSS/HTML.Tiles只会帮助您将不同的部分组合在一起，并且在受尊重的HTML部分中创建聚合HTML/CSS的任何更改。

来源

2011-11-23 12:22:25

现在我觉得这是一个愚蠢的问题。无论如何，我正在为它添加一个答案（可能是其他人正在寻找相同的）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body{ 
    padding:0px; 
    margin:0px; 
} 
.header{ 
    float:none; 
    position:fixed; 
    width:100%; 
    background-color:#0000FF; 
    color:#FFFFFF; 
    text-align:center; 
    height:60px; 
} 
.menu{ 
    float:left; 
    position:fixed; 
    width:20%; 
    background-color:#0099FF; 
    color:#000000; 
    text-align:center; 
    height:500px; 
    margin-top:60px; 
} 
.body{ 
    float:left; 
    width:100%; 
    height:500px; 
    overflow-y:scroll; 
    text-align:center; 
    color:#000000; 
    text-align:center; 
    margin-top:60px; 
} 
.footer{ 
    float:none; 
    width:100%; 
    position:fixed; 
    background-color:#CCCCCC; 
    color:#333333; 
    text-align:center; 
    height:20px; 
    margin-top:560px; 
} 
</style> 
</head> 

<body> 
<div class="header"> 
    <h1>Header</h1> 
</div> 


<div class="menu">Menu</div> 

<div class="body"> 
     <p>Body</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
    </div> 

<div class="footer" >Footer</div> 
</body> 
</html>

Screen shot

来源

2012-07-04 07:23:20

Struts2的瓷砖先进的外观

回答

相关问题