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的瓷磚先進的外觀

回答

相關問題