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模板

回答

相关问题