Lưu Quang Triệu

Không ngừng sáng tạo thì sẽ không sợ bị diệt vong

Template cơ bản với HTML5 và CSS3

Posted by millionking on February 25, 2014

Template cơ bản với HTML5 và CSS3

Bài viết tạo một Template cơ bản với HTML5 và CSS3 có thể chạy trên các trình duyệt và một số phiên bản củ, mình cũng chưa test hết tất cả các trình duyệt nên không biết có phiên bản trình duyệt nào bị lỗi không nửa.

Ứng dụng thêm từ các bài viết trước.

PIE giúp IE hiển thị được CSS3

Đầu tiên tạo file index.html
Thư mục css chứa file style.css
Thư mục js chứa file html5.js và toàn bộ thư mục PIE, phần này trong 2 bài viết trên.
Và thư mục img chứa hình ảnh.

File index.html có nội dung như sau:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Admin</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />

<!–[if IE]>
<script src=”js/html5.js”></script>
<![endif]–>
</head>
<body>

<div id=”top”>Administrator</div>
<div id=”content”>
<div id=”left”>
<h1>Danh Mục Quản Lý</h1>
<ul>
<li><a href=””>Quản Lý Sản Phẩm</a></li>
<li><a href=””>Danh Mục Sản Phẩm</a></li>
<li><a href=””>Quản Lý Bài Viết</a></li>
<li><a href=””>Quản Lý Hình Ảnh</a></li>
<li><a href=””>Album Hình Ảnh</a></li>
<li><a href=””>Quản Lý Banner</a></li>
<li><a href=””>Cấu Hình Website</a></li>
<li><a href=””>Thông Tin Chung</a></li>
<li><a href=””>Quản Lý User</a></li>
<li><a href=””>Thoát Khỏi Hệ Thống</a></li>
</ul>
</div>
<div id=”right”>
<div id=”menu”>
<h1>Quản Lý Sản Phẩm</h1>
<div id=”menuright”>
<ul>
<li><a href=””>Thêm Sản Phẩm</a></li>
<li><a href=””>Quản lý Sản Phẩm</a></li>
</ul>
</div>
<div></div>
<p>Quản lý sản phẩm</p>
</div>

<div id=”infomation”>
Infomation
</div>
</div>
</div>
<div></div>
<div id=”bottom”>Bản quyền thuộc công ty  1/2012</div>
</body>
</html>

File style.css có nội dung:


@charset “utf-8”;
/* CSS Document */

*{
margin:0px;
padding:0px;
}

body{
width:1000px;
margin:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

#top{
border:#999999 solid 1px;
height:150px;
line-height:120px;
padding-left:50px;
font-size:50px;
color:#333333;
font-weight:700;
font-family:Geneva, Arial, Helvetica, sans-serif;
margin-bottom:10px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:#666 0px 2px 3px;
-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;
background:#aeaeae;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#aeaeae), to(#d0d0d0));
background: -moz-linear-gradient(#aeaeae, #d0d0d0);
background: linear-gradient(#aeaeae, #d0d0d0);
-pie-background:linear-gradient(#aeaeae, #d0d0d0);
behavior: url(js/PIE/PIE.htc);
}

#left{
width:200px;
float:left;
border:#999999 solid 1px;
height:auto;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:#666 0px 2px 3px;
-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;
background:#d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#aeaeae));
background: -moz-linear-gradient(#d0d0d0, #aeaeae);
background: linear-gradient(#d0d0d0, #aeaeae);
-pie-background:linear-gradient(#d0d0d0, #aeaeae);
behavior: url(js/PIE/PIE.htc);
}

#right{
width:786px;
float:left;
height:auto;
margin-left:10px;
height:auto;

}

#menu{
width:786px;
float:left;
height:auto;
border:#999999 solid 1px;
height:auto;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:#666 0px 2px 3px;
-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;
background:#d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#aeaeae));
background: -moz-linear-gradient(#d0d0d0, #aeaeae);
background: linear-gradient(#d0d0d0, #aeaeae);
-pie-background:linear-gradient(#d0d0d0, #aeaeae);
behavior: url(js/PIE/PIE.htc);
}

#infomation{
margin-top:10px;
width:786px;
float:left;
height:auto;
border:#999999 solid 1px;
height:auto;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:#666 0px 2px 3px;
-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;
background:#d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#aeaeae));
background: -moz-linear-gradient(#d0d0d0, #aeaeae);
background: linear-gradient(#d0d0d0, #aeaeae);
-pie-background:linear-gradient(#d0d0d0, #aeaeae);
behavior: url(js/PIE/PIE.htc);
}

.del{
clear:left;
}

#content{
height:auto;
}

#bottom{
margin-top:10px;
border:#999999 solid 1px;
height:100px;
line-height:100px;
text-align:center;
margin-bottom:10px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:#666 0px 2px 3px;
-moz-box-shadow:#666 0px 2px 3px;
box-shadow:#666 0px 2px 3px;
background:#d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#aeaeae));
background: -moz-linear-gradient(#d0d0d0, #aeaeae);
background: linear-gradient(#d0d0d0, #aeaeae);
-pie-background:linear-gradient(#d0d0d0, #aeaeae);
behavior: url(js/PIE/PIE.htc);
}

/*menu left*/

#left h1{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
margin-top:10px;
margin-bottom:10px;
color:#333333;
}

#left ul{
list-style-type:none;
margin-left:-20px;
}

#left li a{
width:170px;
display:block;
height:25px;
line-height:25px;
text-decoration:none;
color:#333333;
margin-bottom:5px;
padding-left:20px;
border:#999999 solid 1px;
margin-left:9px;
font-weight:700;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background: #d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#999999));
background: -moz-linear-gradient(#d0d0d0, #999999);
background: linear-gradient(#d0d0d0, #999999);
-pie-background:linear-gradient(#d0d0d0, #999999);
behavior: url(js/PIE/PIE.htc);
}

#left li a:hover{
color:#FFCC00;
}

/*Menu right */

#right #menuright ul{
list-style-type:none;
}

#right #menuright ul li{
width:160px;
display:inline;
}

#right #menuright ul li a{
float:left;
color:#333333;
height:25px;
line-height:25px;
border:#999999 solid 1px;
text-decoration:none;
font-weight:700;
margin-left:10px;
padding-left:5px;
padding-right:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background: #d0d0d0;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d0d0d0), to(#999999));
background: -moz-linear-gradient(#d0d0d0, #999999);
background: linear-gradient(#d0d0d0, #999999);
-pie-background:linear-gradient(#d0d0d0, #999999);
behavior: url(js/PIE/PIE.htc);
}

#right h1{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
color:#333333;
}

#right p{
margin:10px;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: