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

byKhông Nên Tin •
0
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;
  }
Tags:

Post a Comment

Previous Post Next Post