[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ý
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>©2016 HandBooks Store. Design by Handsomeroot<p>
</div>
</div>
</body>
</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>©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;}
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)
Bài đăng phổ biến từ blog này
[Share] CSDL Quản lý Shop Online
Cấu trúc của cơ sở dữ liệu Danh sách các bảng 1. Bảng About (Lưu các bài viết giới thiệu cửa hàng) 2. Bảng Contact (Lưu thông tin liên hệ của cửa hàng) 3. Bảng Feedback (Lưu trữ thông tin phản hồi của người dùng) 4. Bảng Footer (Lưu trữ những thiết kế footer của trang web) 5. Bảng MenuType (Lưu trữ các loại menu trong trang web. Ví dụ : TopMenu, LeftMenu…) 6. Bảng Menu (Lưu trữ các menu) 7. Bảng NewCategory (Lưu trữ các nhóm chuyên mục về tin tức. Ví dụ : Tin khuyến mãi, tin công nghệ,…) 8. Bảng New (Lưu trữ các tin tức, bài đăng trên website) 9. Bảng Tag (Lưu trữ các thẻ) 10. Bảng NewTag (Lưu trữ các thẻ trong bài viết) 11. Bảng ProductCategory (Lưu trữ các nhóm sản phẩm) 12. Bảng Product (Lưu trữ thông tin sản phẩm) 13. Bảng Slide (Lưu trữ các hình ảnh Slide)
Hướng dẫn cài đặt VRML Pad và Cortona 3D Viewer
1. Hướng dẫn cài đặt VrmlPad 3.0 Chào các bạn. Hôm nay mình sẽ hướng dẫn các bạn cài đặt VrmlPad 3.0 Đầu tiên các bạn truy cập vào link sau để download phần mềm http://www.parallelgraphics.com/products/vrmlpad/download/ Ở phần VrmlPad 3.0 > Evalustion version chọn Download Sau khi quá trình tải về hoàn tất Các bạn tiến hành cài đặt phần mềm Chọn Next Nhấn Browser để chọn đường dẫn cài đặt phần mềm, chọn Next Chọn Install Chờ quá trình cài đặt phần mềm thành công. Nhấn Finish OK. Mình đã cài đặt xong. Giao diện phần mềm khi chạy lần đầu tiên Các bạn đã có thể soạn thảo Nhưng để chạy được file .wrl này chúng ta sẽ cài thêm 1 phần mềm bổ trợ Cortona 3D 2. Hướng dẫn cài đặt Cortona 3D Viewer Các bạn vào link sau để download http://www.cortona3d.com/ Chọn Menu " PRODUCTS " > " VIEWERS " > " CORTONA 3D VIEWER " Tiếp theo chọn DOWNLOAD CORTONA 3D VIEWER Chọn download tùy vào
RANKING in SQL (ROW_NUMBER, RANK, DENSE_RANK,NTILE)
Hàm Ranking là gì? Các hàm Ranking cho phép bạn có thể đánh số liên tục (xếp loại) cho các tập hợp kết quả. Các hàm này có thể được sử dụng để cung cấp số thứ tự trong hệ thống đánh số tuần tự khác nhau. Có thể hiểu đơn giản như sau: bạn có từng con số nằm trên từng dòng liên tục, tại dòng thứ nhất xếp loại số 1, dòng thứ 2 xếp loại số là 2… Bạn có thể sử dụng hàm ranking theo các nhóm số tuần tự, mỗi một nhóm sẽ được đánh số theo lược đồ 1,2,3 và nhóm tiếp theo lại bắt đầu bằng 1,2,3… Chúng ta bắt đầu xem xét cách hàm trong sql hổ trợ từ 2005 Dữ liệu thử : CREATE TABLE Person( FirstName VARCHAR(10), Age INT, Gender CHAR(1) ) INSERT INTO Person VALUES ('Ted', 23, 'M') INSERT INTO Person VALUES ('John', 40, 'M') INSERT INTO Person VALUES ('George', 6, 'M') INSERT INTO Person VALUES ('Mary', 11, 'F') INSERT INTO Person VALUES ('Sam', 17, 'M') INSERT INTO Pe
Nhận xét
Đăng nhận xét