HANDSOMEROOT

[Series Học ASP.NET MVC] Phần 3 - Thiết kế giao diện trang quản lý

Phần 3 - Thiết kế giao diện trang quản lý

Phần giao diện trang quản lý hôm nay sẽ chỉ thiết kế phần trên và phần bên trái.
Phần bên phải sẽ thực hiện luôn trong Phần 4 - Xây dựng chức năng quản lý








Mã nguồn trong clip

HTML
<html>
<head>
<meta charset="UTF-8" />
<title>Admin Control Panel</title>
<link rel="stylesheet" href="layout-admin.css" />
</head>

<body>
<div class="wrapper">
<!-- Header -->
<div class="header">
<div class="left">
<a class="page-title" href="/"><h2>Admin CP</h2></a>
</div>
<div class="right">
<ul>
<li>Login as</li>
<li>
<a href="#">Admin</a>
<ul>
<li><a href="">Change password</a></li>
<li><a href="">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<!-- Content -->
<div class="content">
<div class="left">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Menu</h3>
</div>
<div class="panel-body">
<ul>
<li><a href="">Dashboard</a></li>
<li><a href="">Books</a></li>
<li><a href="">Categories</a></li>
<li><a href="">Account</a></li>
<li class="line-dashed"></li>
<li><a href="">Home page</a></li>
</ul>
</div>
</div>
</div>
<div class="right">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Controller name</h3>
</div>
<div class="panel-body">
xxxxxxxxxxxxxxxxxx
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<!-- Footer -->
<div class="footer">
<p>&copy;2016 HandBooks Store. Design by Handsomeroot<p>
</div>
</div>
</body>
</html>

CSS
*{margin:0;padding:0;font-family:"Segoe UI";}
body{background-color:#f4f4f4;color:#666;}
a{color:orange}
.wrapper{width:980px;height:580px;padding:10px;margin:0 auto;background-color:#fff;} /* <=> width=1000px;height=600px; */
.left{height:100%;float:left;}
.right{height:100%;float:left;margin-left:20px;}
.clearfix{clear:both;}
.header{width:100%;height:50px;clear:both;border-bottom:1px #ccc dashed;box-sizing:border-box;margin-bottom:20px;}
.header .left,
.header .right{width:480px;}
.header .left .page-title{text-transform:uppercase;text-decoration:none;}
.header .right ul{list-style:none;float:right}
.header .right>ul>li{display:inline;padding:10px 0px 10px 10px;position:relative;}
.header .right>ul>li>a{text-decoration:none;font-weight:bold;padding-right:10px;}
.header .right>ul>li>ul{width:160px;display:none;position:absolute;line-height:30px;text-align:right;padding:10px;right:0px;top:35px;background-color:#f4f4f4;}
.header .right>ul>li>ul>li>a{color:#666;text-decoration:none;}
.header .right>ul>li>ul>li>a:hover{font-weight:bold;}
.header .right>ul>li:hover:last-child{background-color:#f4f4f4;}
.header .right>ul>li:hover>ul{display:block;}

.content{width:100%;height:480px;overflow:auto;padding-bottom:20px;clear:both;border-bottom:1px #ccc dashed;box-sizing:border-box;}
.content .left{width:200px;}
.content .right{width:760px;}
.panel{padding:10px;border:1px #ccc solid;}
.panel .panel-heading{width:100%;height:30px;line-height:20px;border-bottom:1px #ccc dashed;box-sizing:border-box;}
.panel .panel-body{width:100%;padding-top:15px;}
.panel .panel-body ul{list-style:none;}
.panel .panel-body ul li{padding-bottom:10px;}
.panel .panel-body ul li a{text-decoration:none;}
.panel .panel-body ul li a:hover{font-weight:bold;}
.line-dashed{width:100%;border-bottom:1px #ccc dashed;margin-bottom:5px;}
.footer{width:100%;height:30px;line-height:30px;font-size:12px;text-align:center;}


Hoặc bạn có thể tải về tại
http://www.mediafire.com/download/xq6116f2vi9bfqr/%5BSeries_H%E1%BB%8Dc_ASP.NET_MVC%5D_layout_admin.rar

Mật khẩu giải nén nếu có (handsomeroot.blogspot.com)

Nhận xét

Bài đăng phổ biến từ blog này

[Share] CSDL Quản lý Shop Online

Hướng dẫn cài đặt VRML Pad và Cortona 3D Viewer

RANKING in SQL (ROW_NUMBER, RANK, DENSE_RANK,NTILE)