CSS + Xhtml Nhìn Cũng Được AE Nào Cần Thì Lấy Sài

-
Hình demo , tên class hay id phải đặt trùng vs css mới ra nhé ae , coi cho kĩ dễ bị quấn não lắm á






//code .xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>Home</title>
        <link rel="stylesheet" href="homestyle.css"/>
      <meta charset="utf-8" />
    </h:head>
    <h:body>
        <header id="header">
            <hgroup>
                <h1 class="site_title">
                    <a href="list.xhtml">Website Admin</a>
                </h1>
                <h2 class="section_title">Zycus Company</h2>
                <div class="view_site">
                    <a href="../index.xhtml">View Site</a>
                </div>
            </hgroup>
        </header>
        <section id="sead">
            <div class="user">
                <p>
                    Admin:#{sessionScope.user}
               
                </p>
                   
            </div>
            <div class="bet_contener">
                <article class="bet">
                    <a href="list.xhtml">Website Admin</a>
                    <div class="bet_dliver">
                    </div>
                    <a class="current">Zycus</a>
                </article>
            </div>
        </section>
        <!--menu-->

        <menutrai id="sitebar" class="comlum">
            <h3>Account<a href="#" class="toggleLink"></a></h3>
            <ul class="toggle">
                <li class="icn_view_users"><a href="Information.xhtml">Profile</a></li>
                <li class="icn_edit_article"><a href="ChangePass.xhtml">Change Password</a></li>
                <li class="icn_jump_back"><h:form><h:commandLink value="logout" action="#{loginManagedBean.logout()}" /></h:form></li>
            </ul>
            <h3>Insert<a href="#" class="toggleLink"></a></h3>
            <ul class="toggle">
                <li class="icn_new_article" ><a href="postNews.xhtml">Add News</a></li>
                <li class="icn_add_user"><a href="Create.xhtml">Add User</a></li>
            </ul>
            <h3>Manager<a href="#" class="toggleLink"></a></h3>
            <ul class="toggle">
                <li class="icn_new_article"><a href="list.xhtml">News</a></li>
                <li class="icn_user"><a href="EmployeeView.xhtml">User</a></li>
                <li class="icn_categories"><a href="Create.xhtml">Category</a></li>
                <li class="icon_statistical"><a href="statistical.xhtml">Statistical</a></li>
            </ul>
            <h3>Trash<a href="#" class="toggleLink"></a></h3>
            <ul class="toggle">
                <li class="icn_trash"><a href="trash.xhtml"> Task Back News</a></li>
            </ul>
            <hr></hr>
           
        </menutrai>

        <div class="contents">
              <ui:insert name="content"></ui:insert>
        </div>
        <footer>
               <p>Copy right Admin</p>
        </footer>
    </h:body>
</html>



// code css

 menutrai#sitebar {
    width: 23%;
    background: #E0E0E3 url(images/sidebar.png) repeat;
    float: left;
    min-height: 500px;
    margin-top: -4px;
}
//dinh dang sitebar
ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
menutrai{

    background: url(../images/secondary_bar_shadow.png) no-repeat right top;
    height: 1000px;
}
#sitebar ul {

    padding-left: 35px;
    clear: both;
    margin: 0;

}
#sitebar ul li {
    list-style: none;

}
header#header {
    height: 55px;
    width: 100%;
    background: #222222 url(../images/header_bg.png) repeat-x;
}
section#sead {
    height: 38px;
    width: 100%;
    background: #F1F1F4 url(../images/secondary_bar.png) repeat-x;
}
header#header h1.site_title, header#header h2.section_title {
    float: left;
    margin: 0;
    font-size: 22px;
    display: block;
    width: 23%;
    height: 55px;
    font-weight: normal;
    text-align: left;
    text-indent: 1.8%;
    line-height: 55px;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}
.site_title a {
    color: white;
    text-decoration: none;

}
.view_site a{
    width: 92px;
    float: right;  
    text-align: right;
    color: white;
    margin-right: 3%;  
    text-decoration: none;
    margin-top: 20px;
    text-align: center;
    line-height: 29px;
    background: url(../images/btn_view_site.png) no-repeat;
}
.view_site a:hover{
    background: url(../images/btn_view_site.png) no-repeat;
    background-position: 0 -27px;
}
header#header h2.section_title {
    float: left;
    margin: 0;
    font-size: 22px;
    display: block;
    width: 23%;
    height: 55px;
    font-weight: normal;

    text-indent: 1.8%;
    line-height: 55px;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}
h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
section#sead .user {

    float: left;
    width: 23%;
    height: 38px;

}
.user p{
    margin: 0;
    padding: 0;
    color: #666666;
    font-weight: bold;
    display: block;
    float: left;
    width: 85%;
    height: 35px;
    line-height: 35px;
    text-indent: 25px;
    text-shadow: 0 1px 0 #fff;
    background :  url(images/icn_profile.png) no-repeat center left ;
    margin-left: 6%;
}
article.bet {
    float: left;
    padding: 0 10px;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 0 #fff;
    height: 23px;
    margin: 4px 3%;
}
.bet{
    width: 170px;
}
.bet_dliver {
    display: inline-block;
    width: 12px;
    height: 24px;
    background: url(../images/breadcrumb_divider.png) no-repeat;
    float: left;
    margin: 0 5px;
}
article{
    float: left;
    width: 77%;
    background-image:  url(images/secondary_bar.png);
    height: 38px;
}
section#sead .bet_contener {
    float: left;
    width: 77%;
    background: url(../images/secondary_bar_shadow.png) no-repeat left top;
    height: 38px;
}
.bet_dliver {
    display: inline-block;
    width: 12px;
    height: 24px;
    background: url(../images/breadcrumb_divider.png) no-repeat;
    float: left;
    margin: 0 5px;
}
.bet a.current, .bet a.current:hover {
    color: #9E9E9E;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff;
    text-decoration: none;
}
.bet a {
    display: inline-block;
    float: left;
    height: 24px;
    line-height: 23px;
    text-decoration: none;
    color: black;
}
.icn_edit_article{
    background: url(images/icn_edit_article.png) no-repeat left;
    padding-left: 20px;
}
.icn_jump_back{
    background: url(images/icn_jump_back.png) no-repeat left;
    padding-left: 20px;
}
.icn_new_article{
    background: url(images/icn_new_article.png) no-repeat left;
    padding-left: 20px;  
}
.icn_add_user{
    background: url(images/icn_add_user.png) no-repeat left;
    padding-left: 20px;
}
.icn_new_article{
    background: url(images/icn_new_article.png) no-repeat left;
    padding-left: 20px;
}
.icn_view_users{
      background: url(images/icn_view_users.png) no-repeat left;
    padding-left: 20px;
}
.icn_user
{
    background: url(images/icn_user.png) no-repeat left;
    padding-left: 20px;
}
.icn_categories{
    background: url(images/icn_categories.png) no-repeat left;
    padding-left: 20px;
}
.icon_statistical{
    background: url(images/icon_statistical.png) no-repeat left;
    padding-left: 20px;
}
.icn_trash{
    background: url(images/icn_trash.png) no-repeat left;
    padding-left: 20px;
}
#sitebar a {
    color: #666666;
    text-decoration: none;
}
a:link, a:visited {
    color: #77BACE;
    text-decoration: none;
}
.toggleLink {
    color: #999999;
    font-size: 10px;
    text-decoration: none;
    display: block;
    float: right;
    margin-right: 2%;
}

#sitebar h3 {
    color: #1F1F20;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #fff;
    font-size: 13px;
    margin: 10px 0 10px 6%;
    display: block;
    float: left;
    width: 90%;
}
h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
.contents{
    width: 77%;
    float: left;
    margin-top:-4PX;
    background:  url(images/sidebar_shadow.png) repeat-y left top;
    height: 1000px;
}
footer{
    position: relative;
    float: left;
    background:url(images/header_bg.png);
    width: 100%;
    height: 55px;
    color: white;
    padding-left: 5%;
}
 .ui-dialog{
    position: fixed;
   
    margin-top:1px;
    text-align: center;
  }

Comments

Post a Comment

Bài đăn phổ biến

Tính Bình Phương 1 Số Trong Python

-
     Python là 1 ngôn ngữ rất thông dụng hiện nay nó được xem là 1 máy tính bỏ túi cực kì tiện lợi , sau đây tôi sẽ hướng dẫn cách tính bình phương 1 số trong python       //đầu tiên ta khai báo 1 hàm     def binhPhuong(x):   //def là defile     ' ' '      bình phương là lấy 1 số mủ 2     // dấu ' ' ' là phần trợ giúp trong python muốn sữ dụng trợ giúp ta                                                                chỉ cần gọi lệnh    help(binhPhuong)  enter thì phần trợ giúp sẽ                                                                xuất hện     ' ' '   return  x**2  // 1 dấu * là phép nhân 2 dấu ** là mủ số.   Save chương trình lại và bấm F5 để chạy     muốn tính bình phương số nào ta chỉ cần gọi hàm    binhPhuong(x)  x là 1 số bất kì bạn tự nhập.
Read more

Deploy website lên VPS hoặc Hosting với Gitlab CI/CD

-
Image
  Deploy website lên VPS với Gitlab CI/CD Sau một thời gian code ra được môt trang web xịn xò thì bạn có nhu cầu đưa lên internet để mọi người được biết. Bắt đầu với công việc đầu tiên là tìm mua tên miền, hosting hoặc VPS. Bạn có thể mua VPS tại Hostinger hoặc Vultr,... 1 VPS có thể cài đặt được nhiều trang web. Như vậy sau quá trình chuẩn bị thành công, chúng ta sẽ đẩy code từ local lên hosting, server. Quá trình này khá là mất công. Cách cổ điển hiện nay được nhiều người dùng là dùng FTP, hoặc upload thằng từ các trang quản lý. Đây là công việc khá nhàm chán, tốn thời gian. Khi có một thay đổi nhỏ là phải đi thao tác lại. Chính vì vậy khái niệm CI/CD ra đời. CI/CD là một bộ đôi công việc, bao gồm CI ( Continuous Integration ) và CD ( Continuous Delivery ), ý nói là quá trình tích hợp (integration) thường xuyên, nhanh chóng hơn khi code cũng như thường xuyên cập nhật phiên bản mới (delivery). Có khá nhiều công cụ hỗ trợ CI/CD, nhưng trong phạm vi bài viết chỉ đề cập công cụ CI/CD của
Read more

Đổi tên "READ MORE" trong bài post

-
Nhiều khi bạn không thích chử mặc định trong wordpress nên mình cũng có 1 cái filter để làm việc này nhìn ví dụ bên dưới function vd_readmore(){     return '<a class="read-more" href=" '.  get_permalink( get_the_ID() )  . ' "> ' .__('[Đọc Thêm]', 'textdomain'). ' </a>'; } add_filter('excerpt_more', 'vd_readmore');
Read more

MỞ CAMERA VÀ CHỤP ẢNH BẰNG PHP

-
   Hôm nay mình phát hiện 1 đoạn code hay nói về việc mở camera và chụp ảnh bằng code php nên share cho các bạn.    Nên tạo 1 file .html và bỏ trong folder htdocs nếu bạn sài server là xampp, và bỏ vào folder www nếu bạn sài server là wamp. <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Get User Media - Photo</title> </head> <body> <button id="take">Take a photo</button><br /> <video id="v"></video> <canvas id="canvas" style="display:none;"></canvas> <img src="http://placehold.it/300&text=Your%20image%20here%20..." id="photo" alt="photo"> <script>     ;(function(){         function userMedia(){             return navigator.getUserMedia = navigator.getUserMedia ||             navigator.webkitGetUserMedia ||             navigator.mozGetUserMedia |
Read more