Hướng dẫn làm css từ trang http://13styles.com

[CPFounder]

Thực ra dễ ẹc thôi, chỉ có COPY + PASTE mà thôi.
Chú ý chung : Chèn code css vào ACP>>Display>>Colors>>Css Style sheet thì chép nguyên xi đoạn code dưới đây.
Còn ai có khả năng cao hơn thì chèn vào 1 file .css. Sau đó, dùng html chèn vào.

1/ Matte



Demo : Link
Download: Link File sau khi download về gồm ảnh và file html. View source để lấy code. Upload ảnh lên host cho lấy link trực tiếp.
CSS: Thay mấy cái images/.... thành link ảnh vừa upload

Code:

body {
            padding: 50px;
         }
         /* The CSS Code for the menu starts here */
         #menu {
            font-family: Arial, sans-serif;
            font-weight: bold;
            text-transform: uppercase;
            margin: 50px 0;
            padding: 0;
            list-style-type: none;
            background-color: #eee;
            font-size: 13px;
            height: 40px;
            border-top: 2px solid #eee;
            border-bottom: 2px solid #ccc;
         }
         #menu li {
            float: left;
            margin: 0;            
         }
         #menu li a {
            text-decoration: none;
            display: block;
            padding: 0 20px;
            line-height: 40px;
            color: #666;
         }
         #menu li a:hover, #menu li.active a {
            background-color: #f5f5f5;
            border-bottom: 2px solid #DDD;
            color: #999;
         }
         #menu_wrapper ul {margin-left: 12px;}
         #menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
         #menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
         
         /* Black Menu */
         #menu_wrapper.black ul {
            border-top: 2px solid #333;
            border-bottom: 2px solid #000;
            background: #333;}
         #menu_wrapper.black a {color: #CCC;}
         #menu_wrapper.black li a:hover, #menu_wrapper.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444;}
         #menu_wrapper.black {background: url(images/black.png) no-repeat right;}
         #menu_wrapper.black div {background: url(images/black.png) no-repeat left;}
         
         /* Blue Menu */
         #menu_wrapper.blue ul {
            border-top: 2px solid #356AA0;
            border-bottom: 2px solid #204061;
            background: #356AA0;}
         #menu_wrapper.blue a {color: #fff;}
         #menu_wrapper.blue li a:hover, #menu_wrapper.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}
         #menu_wrapper.blue {background: url(images/blue.png) no-repeat right;}
         #menu_wrapper.blue div {background: url(images/blue.png) no-repeat left;}
         
         /* Red Menu */
         #menu_wrapper.red ul {
            border-top: 2px solid #660000;
            border-bottom: 2px solid #450000;
            background: #660000;}
         #menu_wrapper.red a {color: #fff;}
         #menu_wrapper.red li a:hover, #menu_wrapper.red li.active a {color: #F27F84; background: #990000; border-bottom: 2px solid #660000;}
         #menu_wrapper.red {background: url(images/red.png) no-repeat right;}
         #menu_wrapper.red div {background: url(images/red.png) no-repeat left;}
         
         /* Orange Menu */
         #menu_wrapper.orange ul {
            border-top: 2px solid #d15600;
            border-bottom: 2px solid #B44500;
            background: #d15600;}
         #menu_wrapper.orange a {color: #fff;}
         #menu_wrapper.orange li a:hover, #menu_wrapper.orange li.active a {color: #FA9B5B; background: #B44500; border-bottom: 2px solid #d15600;}
         #menu_wrapper.orange {background: url(images/orange.png) no-repeat right;}
         #menu_wrapper.orange div {background: url(images/orange.png) no-repeat left;}


HTML: chọn 1 trong các loại menu sau (coi theo màu)

Code:

<!-- Grey Menu -->
      <div id="menu_wrapper" class="grey">
        <div class="left"></div>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </div>
     
      <!-- Black Menu -->
      <div id="menu_wrapper" class="black">
      <div class="left"></div>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </div>
     
      <!-- Blue Menu -->
      <div id="menu_wrapper" class="blue">
      <div class="left"></div>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </div>
     
      <!-- Red Menu -->
      <div id="menu_wrapper" class="red">
      <div class="left"></div>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </div>
     
      <!-- Orange Menu -->
      <div id="menu_wrapper" class="orange">
      <div class="left"></div>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </div>

[CPFounder]

2/ Simple Hover :

Demo : Link
Download : Link Làm y các bước bài trên
CSS:

Code:

ul#blue { margin:0; padding:0; list-style-type:none; }

ul#blue li { position:relative; float:left; border-top:4px solid #efefef; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#blue .current { border-top:4px solid #3d496a;}

ul#blue li:hover { border-top:4px solid #3d496a;}

ul#blue li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}

ul#blue li a:hover { color:#8895b8; border:none; }

ul#blue li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif; line-height: 15px; }

ul#blue li a:hover span {margin-top: 7px; display:block; color: #8895b8;}






ul#green { margin:0; padding:0; list-style-type:none; }

ul#green li { position:relative; float:left; border-top:4px solid #d7ebd5; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#green .current { border-top:4px solid #3c633c;}

ul#green li:hover { border-top:4px solid #3c633c;}

ul#green li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#3d6c3d;}

ul#green li a:hover { color:#89be89; border:none; }

ul#green li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif;  line-height: 15px;}

ul#green li a:hover span {margin-top: 7px; display:block; color: #89be89;}






ul#red { margin:0; padding:0; list-style-type:none; }

ul#red li { position:relative; float:left; border-top:4px solid #edcbcb; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#red .current { border-top:4px solid #953434;}

ul#red li:hover { border-top:4px solid #953434;}

ul#red li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#953434;}

ul#red li a:hover { color:#b17878; border:none; }

ul#red li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif;  line-height: 15px;}

ul#red li a:hover span {margin-top: 7px; display:block; color: #b17878;}


HTML: Có thể thay các dòng trong thẻ span thành câu chú thích tùy ý

Code:

<ul id="blue">
      <li class="current"><a href="#" title="">Home<span>This takes you to the welcome page of the website - the starting point for everything.</span></a></li>
      <li><a href="#" title="">About Us<span>We are a great team of people, with lots of fantastic things to offer.</span></a></li>
      <li><a href="#" title="">Portfolio<span>Our portfolio showcases all the work that we've done for the past few weeks.</span></a></li>
      <li><a href="#" title="">Music<span>We also love to listen to some tunes while we work. Here we're sharing them with you all!</span></a></li>
      <li><a href="#" title="">Contact Us<span>If you would like to get in touch with us, you can do so here via email or telephone.</span></a></li>
   </ul>
   
   
<br /><br /><br /><br /><br /><br /><br />

   <ul id="green">
      <li class="current"><a href="#" title="">Home<span>This takes you to the welcome page of the website - the starting point for everything.</span></a></li>
      <li><a href="#" title="">About Us<span>We are a great team of people, with lots of fantastic things to offer.</span></a></li>
      <li><a href="#" title="">Portfolio<span>Our portfolio showcases all the work that we've done for the past few weeks.</span></a></li>
      <li><a href="#" title="">Music<span>We also love to listen to some tunes while we work. Here we're sharing them with you all!</span></a></li>
      <li><a href="#" title="">Contact Us<span>If you would like to get in touch with us, you can do so here via email or telephone.</span></a></li>
   </ul>
   
   
   
   
<br /><br /><br /><br /><br /><br /><br />

   <ul id="red">
      <li class="current"><a href="#" title="">Home<span>This takes you to the welcome page of the website - the starting point for everything.</span></a></li>
      <li><a href="#" title="">About Us<span>We are a great team of people, with lots of fantastic things to offer.</span></a></li>
      <li><a href="#" title="">Portfolio<span>Our portfolio showcases all the work that we've done for the past few weeks.</span></a></li>
      <li><a href="#" title="">Music<span>We also love to listen to some tunes while we work. Here we're sharing them with you all!</span></a></li>
      <li><a href="#" title="">Contact Us<span>If you would like to get in touch with us, you can do so here via email or telephone.</span></a></li>
   </ul>