Thứ Tư, 28 tháng 3, 2012

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 class="del"></div>
                <p>Quản lý sản phẩm</p>
            </div>
           
            <div id="infomation">
                Infomation
            </div>       
        </div>       
    </div>
    <div class="del"></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;
}


Người đăng: vào lúc
Nhãn: , , ,

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)