demo:
http://loitamsu.zforum.biz
https://codeforumotion.forumvi.com/h52-page
Codes:
Hướng dẫn: ACP-->Modules--> HTML & JAVASCRIPT-->HTML pages management-->Tạo 1 trang HTML theo mẫu:
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:
- Title * : Tùy ý
Do you wish to use your forum header and footer ? không
Use this page as homepage ? Có
- Title * : Tùy ý