c#用户控件实战01_CSS布局

最新推荐文章于 2024-02-22 16:45:28 发布

木生火

最新推荐文章于 2024-02-22 16:45:28 发布

阅读量552

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/msh2016/article/details/85389544

版权

WEB前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

很多应用系统的主页布局，一般采用如下案例所示布局较多，如下图的CSS布局框架，上，中，下，接下来我们演示，在C#中实现如下的业务架构布局。

代码范例，

在<body> </body>中

1，整体定义一个盒子(box)

</div>

2,在box其中，定义三个区域上，中，下

<div id="header"> </div> 上

<div id="main"> </div> 中

<div id="footer"> </div> 下

</div>

3，在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文件夹内有背景图片，不知如何上传，需要的发邮件给我：2156858566@qq.com

木生火

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
c#用户控件实战01_CSS布局

很多应用系统的主页布局，一般采用如下案例所示布局较多，如下图的CSS布局框架，上，中，下，接下来我们演示，在C#中实现如下的业务架构布局。代码范例，在<body> </body>中1，整体定义一个盒子(box)<div id="box"></div>2,在box其中，定义三个区域上，中，下<div id=...
复制链接

扫一扫