css設計一個dashbard模板

我想爲我的儀表板設計和簡單的css模板。喜歡有頂部顯示標誌和標題，菜單的左側部分，中心顯示基於菜單的信息，右側顯示一些信息，底部顯示一些聯繫信息。我喜歡頁面的左側/中間/右側垂直和水平可以擺放。滾動時，我需要標題始終顯示在瀏覽器上。css設計一個dashbard模板

有人可以幫我嗎？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title>Dashboard Layout</title> 
<STYLE type="text/css"> 
#top { 
height: 100px; 
widht: auto; 
border-bottom: 5px solid; 
} 

#left { 
height: auto; 
width: 350px; 
border: 1px solid; 
float: left; 
overflow: scroll; 

} 

#content { 
width: auto; 
height: auto; 
float: left; 
overflow: scroll; 
} 

#right { 
height: auto; 
width: 350px; 
float: right; 
overflow: auto; 
} 

#bottom { 

height: 50px; 
width: auto; 
} 



</STYLE> 

</head> 
<body> 

<div id="top"> 

     <h3><b>Dashboard</b></h3> 

</div> 

<div id="middle"> 

<div id="left"> 

     <h3><b>Menu</b></h3> 
</div> 

<div id="content"> 


     <div id="div1" </div> 

</div> 


<div id="right"> 
     <h3><b>Definitions</b></h3> 

</div> 

</div> 

<div id="bottom"> 

     <p>This dasboard prodides info about systems.</p> 
</div> 

</body> 
</html>

來源

2012-08-07 user1471980

您將需要提供一些證據，表明您實際嘗試嘗試自行創建，否則您將無法在本網站獲得任何幫助。如果您正在尋找某人爲您編寫所有代碼，請考慮僱用某人。 – Jrod 2012-08-07 16:41:47

我會馬上發佈我的代碼，謝謝@Jrod – user1471980 2012-08-07 17:06:02

去用一個div始終可見，無論您的滾動，使用方法：

.visibleDiv 
{ 
    position: fixed; 
}

來源

2012-08-07 18:18:46 karancan

其餘的，你可以發佈一個小提琴嗎？ – karancan 2012-08-07 18:20:12

是的，卡蘭說，你要解決你的頭（#top返回）的位置。固定元素相對於瀏覽器窗口定位。

#top { 
position: fixed; 
width: 100% 
top: 0; 
height: 100px; 
border-bottom: 5px solid; 
}

然後你會看到你的內容的div（#middle）開始的頭重疊，所以你應該留出頂邊距。

#middle { 
margin-top: 100px /* the same height as your header */ 
}

因爲你是浮動幾個div的，我建議你clearfix後，他們調整父div的高度。

有許多偉大的教程CSS的菜單和標題在網上，所以谷歌他們！：]

來源

2012-08-07 18:57:06 gnitemouse

css設計一個dashbard模板

回答

相關問題