很多应用系统的主页布局,一般采用如下案例所示布局较多,如下图的CSS布局框架,上,中,下,接下来我们演示,在C#中实现如下的业务架构布局。
代码范例,
在<body> </body>中
1,整体定义一个盒子(box)
<div id="box">
</div>
2,在box其中,定义三个区域上,中,下
<div id="box">
<div id="header"> </div> 上
<div id="main"> </div> 中
<div id="footer"> </div> 下
</div>
3,在main区域中结构,左,中,右
<div id="main">
<div id="left"></div> 左
<div id="center"> </div> 中
<div id="right"> </div> 右
</div>
到这里为止,还看不出效果,必须编辑CSS的样式,新建一个CCS文件来存放,Default.css,如下截图
让站点感知默认的CSS,需web.config文件设置
归纳HTML文件的代码架构主要如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div id="box">
<div id="header">
<div id="title">
</div>
<div id="qlink">
<ul>
<li><a href="Default.aspx">首頁</a></li>
</ul>
</div>
<div id="login">歡迎使用系統<br />
<asp:LoginName ID="LoginName1" runat="server" />
</div>
</div>
<div id="main">
<div id="menu"> </div>
<div id="center">
<div id="center1"> </div>
<div id="center2"> </div>
</div>
<div id="right"> </div>
</div>
<div id="footer">
Copyright © XXX有限公司 2019 <asp:Label ID="Lbl_VersionID" runat="server" Text="Soft Version:"></asp:Label>
</div>
</div>
</body>
</html>
CSS文件default.css 主要内容,如下:
*{
padding:0;
margin:0;
}
html{
width:100%;
font-family:Tahoma;
font-size: 12px;
color:#646464;
}
body
{
background:url(Images/background.jpg) repeat;
width:100%;
}
#box
{
width:995px;
background:#efefee;
margin-left:auto;
margin-right:auto;
box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
border:solid 1px #878787;
border-top:none;
}
#header
{
width:100%;
height:122px;
background:url(Images/bg_header.png) repeat-x;
position:relative;
}
#title
{
width:229px;
height:49px;
position:absolute;
left:39px;
top:20px;
background:url(Images/bg_title.png) no-repeat;
}
#qlink
{
position:absolute;
top:90px;
left:15px;
}
#qlink ul
{
list-style:none;
}
#qlink li
{
float:left;
padding:2px 24px;
background:url(Images/bg_split_v.png) repeat-y right top;
}
.qlinklast
{
background:none!important;
}
#main
{
background:#efefee;
overflow:auto;
overflow:inherit\9;
}
#menu
{
padding-top:5px;
padding-bottom:50px;
padding-right:5px;
width:150px;
overflow:auto;
overflow:inherit\9;
float:left;
background:url(Images/bg_split_v.png) repeat-y right top;
}
#menu li
{
min-width:120px;
height:31px;
text-align:left;
padding-left:28px;
line-height:30px;
list-style:none;
background:url(Images/bg_dotted.png) repeat-x left bottom;
}
#menu li ul
{
display:none;
position:absolute;
background:#fafafa;
top:0;
left:0;
border:solid 1px #d3d3d3;
z-index:999;
overflow:hidden;
}
#menu li ul li
{
min-width:135px;
}
#menu ul a
{
cursor:pointer;
display:inline-block;
width:100%;
}
/*
#menu ul a:hover
{
background-color:#526a91;
color:White;
}
*/
.arrow
{
background:url(Images/icon_arrow.png) no-repeat 96px 12px;
}
#center
{
width:639px;
float:left;
background:url(Images/bg_split_v.png) repeat-y right top;
overflow:auto;
overflow:inherit\9;
}
#center1
{
width:637px;
background:url(Images/bg_split_h.png) repeat-x left bottom;
padding-top:15px;
padding-bottom:15px;
}
#center2
{
width:100%;
}
#right
{
width:201px;
float:right;
}
#page
{
width:820px;
float:left;
overflow:auto;
background:white;
padding:10px 10px;
}
#footer
{
width:100%;
padding:10px 0;
line-height:18px;
text-align:center;
background:url(Images/bg_split_h.png) repeat-x left top;
}
.block
{
border:solid 1px #d3d3d3;
background:white;
margin:12px;
margin-left:10px;
padding:10px;
padding-top:21px;
position:relative;
}
.blocktitle
{
position:absolute;
top:0;
left:0;
border-right:solid 1px #d3d3d3;
border-bottom:solid 1px #d3d3d3;
height:19px;
line-height:19px;
line-height:21px\9;
padding-left:9px;
padding-right:21px;
background:url(Images/bg_title_section.png) repeat-x;
}
.blockmore
{
position:absolute;
top:8px;
right:14px;
}
.blocktitle img
{
position:absolute;
right:6px;
top:6px;
}
.blockcont
{
margin-top:10px;
overflow:auto;
}
.blockcont table td
{
height:20px;
}
#subtitle
{
font-size:medium;
font-weight:bold;
float:left;
margin-top:15px;
margin-left:5px;
color:#676767;
}
#titleimage
{
float:left;
}
#currentuser
{
float:right;
margin-top:19px;
}
.message
{
width:100%;
height:22px;
line-height:21px;
background:#EDF5FA;
border-top:solid 1px #D6D5D9;
border-bottom:solid 1px #D6D5D9;
margin-top:10px;
}
.fullwidth
{
border: 1px solid #ccc;
width: 750px;
margin-right: auto;
margin-left: auto;
background: #eee;
margin-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}
image文件夹内有背景图片,不知如何上传,需要的发邮件给我:[email protected]