Code Forumotion » Forumotion » Forumotion » Code » [Share] Trang chủ tự cập nhật

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

#1Fri Aug 31, 2012 6:52 pm

TuanAnh

TuanAnh



»†ổñg Quån «

Ý Tưởng Mới
demo:

http://loitamsu.zforum.biz
https://codeforumotion.forumvi.com/h52-page

Codes:

Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FC Mỹ Phương</title>
<link rel="shortcut icon" type="image/x-icon" href="" />
<style type="text/css">
/*Template Layout*/

body {
  font: 12px tahoma, Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  margin: 0px;
  padding: 0px;
  color: #241a10;
  background:#c9e4ec url(http://i44.servimg.com/u/f44/17/54/30/53/page_b10.gif);
}
a, a:link, a:active, a:visited {
  color: #605646;
}
a:hover {
  text-decoration:none;
}
#page_bg {
  background:url(http://i44.servimg.com/u/f44/17/54/30/53/ribbon10.gif) no-repeat center 205px;
}
#container {
  width:850px;
  margin: 0px auto;
  padding:0px;
}
#header {
  height: 205px;
  padding: 0px;
  background-image:url(http://i44.servimg.com/u/f44/17/54/30/53/header10.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
#header_logo {
  height: 56px;
  width: 322px;
  float:left;
  margin:40px 0px 0px;
}
#mainContent {
  padding:0px;
  background:#fffdee url(http://i44.servimg.com/u/f44/17/54/30/53/body_t10.jpg);
  background-repeat:repeat-x;
  background-position:top;
  min-height:400px;
}
#left_side {
  width:142px;
  float:left;
  margin-left:40px;
}
#right_side {
  width:550px;
  float:right;
  margin-right:50px;
  margin-top:10px;
  padding-bottom:30px;
}
.inner_right {
  float:right;
  width:160px;
  height:300px;
  padding:4px 0 0 7px;
}
#footer {
  padding: 10px;
  height:15px;
  margin:0px auto;
  clear:both;
  font-size:10px;
  color:#1d6d85;
  font-family:Verdana, Arial, Helvetica, sans-serif;
}
#footer a, #footer a:link, #footer a:visited {
  color: #1d6d85;
  text-decoration:none;
}
#footer a:hover {
  color: #FFFFFF;
  text-decoration:underline;
}
#footer a:active {
  color: #1d6d85;
  text-decoration:none;
}
/*-- navigation--*/

#menu_container {
  height:44px;
}
ul#navigation {
  float:right;
  position:relative;
  z-index:30;
  margin-top:2px;
  margin-right:117px; /* Change this value to move the menu left / right */
  margin-bottom:0;
  margin-left:0;
  padding:0;
}
ul#navigation li {
  float:left;
  list-style:none;
  display:inline;
  margin:0 0 0 0px;
  padding:0;
}
ul#navigation li a, ul#navigation li a:link, ul#navigation li a:visited {
  float:left;
  color:#241a10;
  padding:12px 16px;
  display:block;
  text-decoration:none;
  font:13px tahoma, Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  border-right:1px solid #eece81;
}
ul#navigation li.last a, ul#navigation li.last a:link, ul#navigation li.last a:visited {
  border-right:0;
}
ul#navigation li.current a, ul#navigation li.hover a, ul#navigation li:hover a, ul#navigation a.active, ul#navigation a:hover {
  color:#FFFFFF;
  background-color:#eece81;
}
/*--second-level--*/
ul#navigation li.hover, ul#navigation li:hover {
  position:relative;
}
ul#navigation li.hover ul.second-level, ul#navigation li:hover ul.second-level {
  display:block;
}
ul#navigation ul.second-level {
  position:absolute;
  top:40px;
  left:-1px;
  margin:0;
  padding:0;
  width:160px;
  display:none;
  background-color:#eece81;
}
ul#navigation ul.second-level li {
  width:160px;
  margin:0;
}
ul#navigation ul.second-level a, ul#navigation ul.second-level a:link, ul#navigation ul.second-level a:visited {
  display:block;
  float:none;
  width:140px;
  border-top: 1px solid #cfb371;
  border-right:0;
  padding:4px 10px;
  background:none;
  font:12px/20px tahoma, Arial, Helvetica, sans-serif;
  color:#241a10;
}
ul#navigation ul.second-level li.hover a, ul#navigation ul.second-level li:hover a, ul#navigation ul.second-level a:hover {
  color:#FFFFFF;
  background:#cfb371;
}
/*end menu*/

/*Tag Menu*/
.tag {
  background-image:url(http://i44.servimg.com/u/f44/17/54/30/53/tag_bo10.gif);
  background-repeat:no-repeat;
  background-position:0px bottom;
  width:148px;
  margin-bottom:20px;
}
.tag p {
  padding:0px 5px;
}
.tag ul {
  padding:0 0 13px 0;
  margin:0px;
}
.tag li {
  list-style:none;
  padding:0 0 0 15px;
  margin:0px 0px 0px 8px; /* used to center the menu on its bg image */
  line-height:22px;
  background:url(http://i44.servimg.com/u/f44/17/54/30/53/tag_li10.gif) no-repeat 0 bottom;
}
.tag a, .tag a:link, .tag a:visited {
  background-image:url(http://i44.servimg.com/u/f44/17/54/30/53/tag_ic10.gif);
  background-position:left;
  background-repeat:no-repeat;
  display:block;
  padding:0px 0 2px 15px;
  color:#644d38;
  text-decoration:none;
  font-family:Tahoma, Arial;
  font-size:12px;
}
.tag a:hover {
  text-decoration:underline;
  color:#605646;
}
/*Search Box on menu*/
#search_box {
  width:142px;
  height:30px;
  margin:0 0 16px 3px;
}
#search_box input {
  font-family:"Times New Roman", Times, serif;
  font-size:12px;
  color:#605646;
}
#search_box p {
  padding:0px 5px;
}
#search_box_inner {
  margin-left:0px;
  padding:0px;
  width:105px;
  height:21px;
  float:left;
}
#search_query {
  border:0px;
  padding:3px 0px 0px 6px;
  margin:0px 0px 0px 5px;
  background-image:url(http://i44.servimg.com/u/f44/17/54/30/53/search10.gif);
  background-repeat:no-repeat;
  background-position:left;
  width:105px;
  height:20px;
}
#search_box_go {
  float:left;
  padding-top:0px;
}
/*Shopping Cart On the Menu*/
#shopping_cart_summary {
  background:url(http://i44.servimg.com/u/f44/17/54/30/53/we_acc10.gif) no-repeat;
  width:142px;
  height:300px;
  color:#8f6637;
  padding:24px 0 0 0;
  font-family:Tahoma, Arial;
  font-size:11px;
  margin:0 0 0 4px;
}
#shopping_cart_summary div {
  text-align:center;
}
#shopping_cart_summary a, #shopping_cart_summary a:link, #shopping_cart_summary a:visited {
  color:#8f6637;
  text-decoration:none;
}
#shopping_cart_summary a:hover {
  color:#8f6637;
  text-decoration:underline;
}
/*General Content*/

h1 {
  font-family:Georgia, "Times New Roman", Times,serif;
  font-size:18px;
  color:#cb4c72;
  font-weight:normal;
}
h2 {
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:16px;
  color:#936a39;
  font-weight:normal;
}
h3 {
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:14px;
  color:#1d6d85;
}
h4 {
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:12px;
  color:#634f34;
}
form {
  margin:0px;
  padding:0px;
}
.image_border {
  border: 1px solid #dfd0be;
  margin: 3px 10px;
  padding: 3px;
}
hr {
  border: 0;
  color: #dfd0be;
  background-color: #dfd0be;
  height: 1px;
  width: 100%;
  text-align: left;
  clear:both;
}
hr.clear {
  margin-top:10px;
  margin:0px;
  clear:both;
  visibility:hidden;
}
/* font sizes */
.size9 {
  font-size:9px;
}
.size10 {
  font-size:10px;
}
.size11 {
  font-size:11px;
}
.size12 {
  font-size:12px;
}
.size14 {
  font-size:14px;
}
.size20 {
  font-size:20px;
}
.size22 {
  font-size:22px;
}
/*HOME PAGE*/

.slide {
  width:666px;
  height:226px;
}
ul.ticklist {
  padding:0px 0px 0px 15px; /*indent whole list*/
}
ul.ticklist li {
  list-style:none;
  background-image:url(http://i44.servimg.com/u/f44/17/54/30/53/icon_t10.gif);
  background-position:left 3px; /*the number here moves the tick down*/
  background-repeat:no-repeat;
  margin:0px 0px 5px 0px;
  padding:0px;
  padding-left:20px;
  line-height:normal;
}
/*About Page*/

.service_table td {
  padding:3px 8px;
  color:#624f34;
  font-size:12px;
  height:28px;
}
th { /*top row of the table*/
  background-color:#fec1d1;
  color:#FFFFFF;
  font-weight:bold;
  border-bottom:1px solid #ffffff;
  height:28px;
}
.row1 {
  background-color:#fff5f8;
}
.row2 {
  background-color:#FFFFFF;
}
/*SHOP*/

.product_box {
  width:132px; /*140px minus padding*/
  height:137px;
  float:left;
  background-color:#FFFFFF;
  border:1px solid #e2dacf;
  padding:4px;
  margin:0px 9px 25px 9px;
  text-align:center;
  font-family:"Times New Roman", Times, serif;
  font-size:13px;
}
.product_box p {
  margin:0px;
  padding:0px 0px 5px 0px;
}
/*Contact Page*/

.left_details {
  float:left;
  width:240px;
}
.photo_contact {
  width:357px;
  height:225px;
  float:right;
}
.contact_title {
  color:#f07398;
  font-weight:bold;
  float:left;
  width:150px;
}
.contact_detail {
  float:left;
  width:100px;
  clear:right;
}
.forms {
  background-color:#FFFFFF !important; /*the important gets rid of the yellow google toolbar field style*/
  border:1px solid #f6a1ba !important;
  margin:3px 0px;
  padding:4px;
}
.pink {
  color:#f07398;
}
#contact {
  border:0;
  width:480px;
}
#contact label {
  float:left;
  width:80px;
  margin-right:15px;
  clear:left;
  color:#f07398;
  font-weight:bold;
  text-align:right;
  height:32px;
}
#contact input, #contact textarea {
  margin-right:40px;
}
#contact #submit {
  clear:left;
  margin-left:95px;
}</style>
<script type="text/javascript" src="/21258.js"></script>
<script type="text/javascript" src="/22318.js"></script>
<script type="text/javascript" src="/23372.js"></script>
<Script>
var clickmessage="Don't steal my images please."

function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}

function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}

if (document.all||document.getElementById)
document.onmousedown=disableclick
else if (document.layers)
associateimages()</Script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-29486671-1']);
  _gaq.push(['_setDomainName', '9xnight.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<script type="text/javascript">
  $(function() {
          $('#s1').cycle({fx:'fade',speed:1500,timeout:4000});
  });
  </script>
<!--[if IE 6]>
    <script defer type="text/javascript" src="/24416.js"></script>
  <style type="text/css">
  #search_query{
      width:95px;
    }
    #search_box_go{
      padding-top:1px;
    }
    ul#navigation{
    margin:2px 50px 0 0px;
    }
  #right_side{
      margin:10px 4px 0 0;
    }
    .tag li{
      margin:8px 0 0 8px;
        line-height:5px;
    }
    </style>
  <![endif]-->
<!--[if IE 7]>
  <style type="text/css">
    #search_box_go{
      padding-top:1px;
    }
  #menucontainer ul li ul{
      display:none;
      position:absolute;
      margin:0px;
      margin-left:0px;
      margin-top:-20px;
      padding:0px;
      width:170px;
  }
  </style>
  <![endif]-->
</head>
<body>
<!-- start ribbon background --><div id="page_bg">
  <!-- start content -->
  <div id="container">
    <!-- start header -->
    <div id="header">
      <div id="header_logo"> <center><object data="http://thpt-kimdong.com/images/banner.swf" height="180" type="application/x-shockwave-flash" width="850">
        <param name="quality" value="high" /> <param name="wmode" value="transparent" />
        <param name="movie" value="http://thpt-kimdong.com/images/banner.swf" /> </object></center>
</div>
    </div>
    <!-- end header -->
    <div id="menu_container">
    <ul id="navigation">
        <li class="current"><a href="/">Trang chủ</a></li>
        <li><a href="/forum">Diễn đàn</a></li>
        <li><a href="/h43-page">Âm nhạc</a></li>
  <li><a href="/h54-page">game</a></li>
  <li><a href="/h37-page">Ứng dụng</a> 
        </li>
        <li class="last"><a href="contact">Liên hệ</a></li>
      </ul>
    </div>
    <div id="mainContent">
      <!-- start body content -->
      <div id="right_side">
  <!DOCTYPE html>
<html>
  <head>
<style type="text/css">
  html,body {
  margin:0;
  padding:0;
  border:0;
}
body {
  color:#000;
  text-align:center;
font:normal normal .8em/1.5em sans-serif;
  padding:2em 0; 
}
body[class]:after {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#fff;
  content:attr(class);
  text-transform:uppercase;
  padding-top:30%;
  text-align:center;
}
h1 {
  margin:0;
  font-size:1.5em;
  line-height:1.5em;
  display:inline;
}
h1:before {
  display:inline;
  overflow:hidden;
  vertical-align:middle;
  content:-o-skin('Mail Newsfeeds');
  margin-right:.2em;
  line-height:1.5em;
}
#learn {
  color:#fff;
  float:right;
  font-size:.75em;
  padding:0; margin:0;
  margin-right:2em;
}

a {
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
#heading {
  background-color: #2C2C2C;
  background-image: -moz-linear-gradient(top, #333, #222);
  background-image: -ms-linear-gradient(top, #333, #222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#222));
  background-image: -webkit-linear-gradient(top, #333, #222);
  background-image: -o-linear-gradient(top, #333, #222);
  background-image: linear-gradient(top, #333, #222);
  background-repeat: repeat-x;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',endColorstr='#222222', GradientType=0);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  color:#fff; 
  text-align:left;
  padding:6px 20px 6px 30px;
}
#heading select,#heading button {
  margin:0 2ex;
  min-width:16ex;
}
#items {
  display:block;
  clear:both;
  text-align:center;
  margin:2em 0;
  padding:0;
  overflow:hidden;
}
#items>ul {
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
  border:0;
  width:auto;
  display:inline-block;
  text-align:left;
}
#items>ul>li {
  vertical-align:top;
  font:normal normal .8em/1.6em sans-serif;
  display:inline-block;
  margin:1em;
  padding:0;
  width:50ex;
  position:relative;
}
#items>ul>li>h2 {
  font:normal lighter 1.66em/1.1em sans-serif;
  margin:0;
  color:#000;
  overflow:hidden;
  -o-text-overflow:ellipsis;
  border-bottom:1px solid #ccc;
}
#items>ul>li>h2>a {
  display:block;
  color:inherit;
  padding:0.5em;
}
#items>ul>li>h2>a:hover {
  background:#eee;
  text-decoration:none;
}
#items>ul>li>p {
  color:#999;
  text-align:right;
  margin:1.1ex;
  font-size:.9em;
  line-height:1.3em;
  white-space:pre-wrap;
}
#items>ul>li a {
  color:#b00;
}
#items>ul>li>div {
  text-align:justify;
  max-height:250px;
  margin:0;
  padding:0 1ex;
  color:#555;
  vertical-align:top;
  -o-text-overflow:ellipsis;
  overflow-x:auto;
}
#items>ul>li>div pre {
  font:.9em/.9em monospace;
  background:#eee;
  overflow:auto;
  border:1px solid #999;
  border-width:1px 0;
  padding:1em;
  clear:both;
}
#items>ul>li>div pre a {
  font-style:normal;
}
#items>ul>li>div p {
  clear:both;
  margin:0 0 2em 0;
}
#items>ul>li>div a {
  font-style:italic;
  margin-right:.25em;
}
#items>ul>li>div img {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  max-width:100%;
  max-height:50ex;
  padding:.5ex;
  box-sizing:border-box;
  ;
}
#items>ul>li>div h1,#items>ul>li>div h2,#items>ul>li>div h3,#items>ul>li>div h4,#items>ul>li>div h5,#items>ul>li>div h6,#items>ul>li>div div {
  display:block;
  clear:both;
}
#footer {
  font-size:.85em;
}
#footer a {
  color:#b00;
}
@media handheld {
  body {
      font:normal normal 1em/1.5em sans-serif;
      padding:1em 0;
  }
  #heading>button {
      display:inline;
      width:auto;
      margin:0 .5em;
      height:auto;
  }
  #items {
      margin:1em 0;
  }
  #items>ul {
      display:block;
  }
  #items>ul>li {
      font:normal normal 1em/1.5em sans-serif;
      display:block;
      padding:1em;
      margin:0;
      width:auto;
      background:#fff;
  }
  #items>ul>li:nth-child(2n) {
      background:#eee;
  }
  #items>ul>li>h2 {
      font:normal bold 1.33em/1.2em sans-serif;
  }
  #items>ul>li>h2>a:hover {
      background:#ddd;
  }
  #items>ul>li>div {
      border:0;
      padding:0;
      margin:0;
  }
  #items>ul>li>div:after {
      clear:both;
      content:' ';
      display:block;
  }
  #items>ul>li>div pre {
      font:1em/1em monospace;
      background:#ddd;
  }
  #items>ul>li>div a {
      font-style:normal;
  }
  #footer a {
      font-size:1em;
  }
}
embed,img,table {
  max-width: 300px
}</style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
  <script type="text/javascript" src="//c3zone.forumj.net/35033.js"></script> 
  <body>
  <div id="heading">
      Bài gửi mới nhất :
      <span style="float:right">Cập nhật lúc : <span id="update"></span></span>
  </div>
  <div id="items">
      <ul id="itemsUl">
      </ul>
  </div>
 
  </body>
</html>
      </div>
      <!-- end body content -->
      <div id="left_side">
        <!-- start left menu -->
        <div style="position:relative; margin-top:-44px; width:147px; height:93px; background:url(http://i44.servimg.com/u/f44/17/54/30/53/tag_to10.png);"></div>
        <div class="tag">
          <ul>
  <li><a href="/register">Đăng Ký</a></li>
  <li><a href="/forum">Diễn Đàn</a></li>
  <li><a href="/h7-upanh">Upload Ảnh</a></li>
  <li><a href="/h5-photoshop-onlile">Photoshop</a></li>
  <li><a href="/h54-page">Game</a></li>
  <li><a href="/h51-page">TV Online</a></li>
  <li><a href="/h42">Chộm Avatar</a></li>
  <li><a href="/h43-muzic">Âm Nhạc</a></li>
         
          </ul>
          <p>  </p>
        </div>
        <!-- end left menu -->
        <!-- start search tag -->
        <div id="search_box">
          <form action="#" method="get" name="search">
            <div>
              <div id="search_box_inner">
                <input name="search_query" id="search_query" type="text" style="" value="    TÌM KIẾM" onfocus="if(this.value=='    TÌM KIẾM')this.value='';" />
              </div>
              <!-- set padding-top:1px in IE 6 and 7 if statement -->
              <div id="search_box_go">
                <input type="image" src="http://i44.servimg.com/u/f44/17/54/30/53/go10.gif" alt="Go!" style="margin:0px; padding:0px;" />
              </div>
            </div>
          </form>
        </div>
        <!-- end search -->
        <div id="shopping_cart_summary">
          <div>
<embed type="application/x-shockwave-flash" src="http://rappervn.net/music/player/flvplayer11.swf" allowfullscreen="true" allowscriptaccess="always" flashvars="&file=http://rappervn.net/music/xml/playlist-
top.xml&thumbsinplaylist=false&displayheight=0&backcolor=0xFF99FF&frontcolor=0xFFFFFF&lightcolor=0xFFFFFF&showdigits=true&showeq=true&showfsbutton=true&autostart=true&shuffle=false&linktarget=_blank&repeat=true;
volume=100;width=130&height=270" width="130" height="270" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</div>
         
        </div>
      </div>
      <hr class="clear" />
    </div>
    <!-- start footer -->
    <div id="footer">
      <div style="float:left">© THPTKimDong.123.St</div>
     
    </div>
    <!-- end footer -->
  </div>
</div>
<!-- end content -->
</body>
</html>
<a href="http://www.forumvi.com" target="_blank"></a>

Hướng dẫn: ACP-->Modules--> HTML & JAVASCRIPT-->HTML pages management-->Tạo 1 trang HTML theo mẫu:

Spoiler:

Trả lời trích dẫnTrả lời

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Code Forumotion » Forumotion » Forumotion » Code » [Share] Trang chủ tự cập nhật

Permissions in this forum:
Bạn không có quyền trả lời bài viết