قالب html نصفه کار به ادامه مطالب بروید
اینم دمو
http://www.bloghelper.ir/page/Testtttt
اینم کد
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>تست</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style type="text/css">
div#container
{
width: 760px;
position: relative;
margin: 0 auto 0 auto;
text-align: left;
}
body
{
background-color: #000000;
color: #000000;
font-family: Arial;
font-size: 13px;
margin: 0;
text-align: center;
}
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
a.style1
{
color: #2B69CE;
text-decoration: none;
}
a.style1:visited
{
color: #2B69CE;
text-decoration: none;
}
a.style1:active
{
color: #2B69CE;
text-decoration: none;
}
a.style1:hover
{
color: #2B69CE;
text-decoration: underline;
}
#Shape10
{
border-width: 0;
}
#Shape5
{
border-width: 0;
}
#Shape7
{
border-width: 0;
}
#Shape2
{
width: 760px;
height: 495px;
background-color: #FFFFFF;
border: 0px #000000 solid;
}
#Shape1
{
width: 220px;
height: 495px;
background-color: #E6E6E6;
border: 0px #000000 solid;
}
#Shape4
{
border-width: 0;
}
#Shape6
{
border-width: 0;
}
#Shape3
{
width: 220px;
height: 40px;
background-color: #000000;
border: 0px #000000 solid;
}
#wb_Text2
{
background-color: transparent;
border: 0px #000000 solid;
padding: 0;
margin: 0;
text-align: left;
}
#wb_Text2 div
{
text-align: left;
}
#wb_Text1
{
background-color: transparent;
border: 0px #000000 solid;
padding: 0;
margin: 0;
text-align: left;
}
#wb_Text1 div
{
text-align: left;
}
#Shape9
{
border-width: 0;
}
#wb_Text4
{
background-color: transparent;
border: 0px #000000 solid;
padding: 0;
margin: 0;
text-align: left;
}
#wb_Text4 div
{
text-align: left;
}
#wb_Text3
{
background-color: transparent;
border: 0px #000000 solid;
padding: 0;
margin: 0;
text-align: left;
}
#wb_Text3 div
{
text-align: left;
}
#wb_TextMenu2
{
background-color: transparent;
color :#000000;
font-family: Tahoma;
font-size: 13px;
}
#wb_TextMenu2 span
{
margin: 0 14px 0 0px;
}
#Shape8
{
border-width: 0;
}
#wb_Text7
{
background-color: transparent;
border: 0px #000000 solid;
padding: 0;
margin: 0;
text-align: left;
}
#wb_Text7 div
{
text-align: left;
}
#wb_TextMenu1
{
background-color: transparent;
color :#000000;
font-family: Tahoma;
font-size: 13px;
}
#wb_TextMenu1 span
{
display: block;
margin: 0 0 14px 0;
line-height: 16px;
}
#wb_Form1
{
background-color: #FAFAFA;
border: 0px #000000 solid;
}
#wb_Text5
{
background-color: transparent;
border: 0px #000000 solid;
padding: 0;
margin: 0;
text-align: left;
}
#wb_Text5 div
{
text-align: left;
}
#TextArea1
{
border: 1px #A9A9A9 solid;
background-color: #FFFFFF;
color :#000000;
font-family: Arial;
font-size: 13px;
text-align: left;
resize: none;
}
#Button1
{
border: 1px #A9A9A9 solid;
background-color: #F0F0F0;
color: #000000;
font-family: Arial;
font-size: 13px;
}
#Button2
{
border: 1px #A9A9A9 solid;
background-color: #F0F0F0;
color: #000000;
font-family: Arial;
font-size: 13px;
}
#wb_Shape4
{
position: absolute;
left: 0px;
top: 241px;
width: 540px;
height: 40px;
z-index: 9;
}
#wb_Text1
{
position: absolute;
left: 41px;
top: 102px;
width: 291px;
height: 29px;
z-index: 13;
text-align: left;
}
#wb_Shape5
{
position: absolute;
left: 0px;
top: 695px;
width: 760px;
height: 52px;
z-index: 5;
}
#wb_Text2
{
position: absolute;
left: 39px;
top: 42px;
width: 340px;
height: 58px;
z-index: 12;
text-align: left;
}
#wb_Shape6
{
position: absolute;
left: 23px;
top: 24px;
width: 361px;
height: 152px;
z-index: 10;
}
#wb_Text3
{
position: absolute;
left: 39px;
top: 252px;
width: 464px;
height: 64px;
z-index: 16;
text-align: left;
}
#wb_Shape7
{
position: absolute;
left: 0px;
top: 0px;
width: 760px;
height: 200px;
z-index: 6;
}
#wb_Shape10
{
position: absolute;
left: 704px;
top: 404px;
width: 320px;
height: 110px;
visibility: hidden;
z-index: 4;
}
#wb_Shape8
{
position: absolute;
left: 494px;
top: 407px;
width: 320px;
height: 52px;
visibility: hidden;
z-index: 18;
}
#wb_Text4
{
position: absolute;
left: 554px;
top: 252px;
width: 197px;
height: 77px;
z-index: 15;
text-align: left;
}
#Shape4
{
width: 540px;
height: 40px;
}
#wb_Text5
{
position: absolute;
left: 10px;
top: 15px;
width: 72px;
height: 16px;
z-index: 0;
text-align: left;
}
#wb_Shape9
{
position: absolute;
left: 583px;
top: 449px;
width: 320px;
height: 40px;
visibility: hidden;
z-index: 14;
}
#Shape5
{
width: 760px;
height: 52px;
}
#Shape10
{
width: 320px;
height: 110px;
}
#TextArea1
{
position: absolute;
left: 92px;
top: 15px;
width: 198px;
height: 98px;
z-index: 1;
}
#Shape6
{
width: 361px;
height: 152px;
}
#wb_Text7
{
position: absolute;
left: 0px;
top: 713px;
width: 760px;
height: 13px;
z-index: 19;
text-align: left;
}
#Shape7
{
width: 760px;
height: 200px;
}
#Shape8
{
width: 320px;
height: 52px;
}
#Shape9
{
width: 320px;
height: 40px;
}
#wb_Form1
{
position: absolute;
left: 112px;
top: 361px;
width: 312px;
height: 197px;
z-index: 22;
}
#Button1
{
position: absolute;
left: 92px;
top: 120px;
width: 96px;
height: 25px;
z-index: 2;
}
#Button2
{
position: absolute;
left: 92px;
top: 150px;
width: 96px;
height: 25px;
z-index: 3;
}
#wb_Shape1
{
position: absolute;
left: 540px;
top: 200px;
width: 220px;
height: 495px;
z-index: 8;
}
#wb_TextMenu1
{
position: absolute;
left: 543px;
top: 350px;
width: 499px;
height: 21px;
visibility: hidden;
text-align: center;
z-index: 20;
}
#wb_Shape2
{
position: absolute;
left: 0px;
top: 200px;
width: 760px;
height: 495px;
z-index: 7;
}
#wb_TextMenu2
{
position: absolute;
left: 39px;
top: 212px;
width: 499px;
height: 21px;
z-index: 17;
}
#wb_Shape3
{
position: absolute;
left: 540px;
top: 241px;
width: 220px;
height: 40px;
z-index: 11;
}
@media only screen and (max-width: 320px)
{
div#container
{
width: 320px;
}
#wb_Shape10
{
left: 0px;
top: 0px;
visibility: visible;
display: inline;
}
#wb_Shape5
{
left: 0px;
top: 695px;
visibility: hidden;
display: none;
}
#wb_Shape7
{
left: 0px;
top: 0px;
visibility: hidden;
display: none;
}
#wb_Shape2
{
left: 0px;
top: 110px;
width: 320px;
height: 974px;
visibility: visible;
display: inline;
}
#Shape2
{
width: 320px;
height: 974px;
}
#wb_Shape1
{
left: 540px;
top: 200px;
width: 220px;
height: 495px;
visibility: hidden;
display: none;
}
#Shape1
{
width: 220px;
height: 495px;
}
#wb_Shape4
{
left: 0px;
top: 241px;
visibility: hidden;
display: none;
}
#wb_Shape6
{
left: 23px;
top: 24px;
visibility: hidden;
display: none;
}
#wb_Shape3
{
left: 540px;
top: 241px;
width: 220px;
height: 40px;
visibility: hidden;
display: none;
}
#Shape3
{
width: 220px;
height: 40px;
}
#wb_Text2
{
left: 29px;
top: 5px;
width: 272px;
height: 58px;
visibility: visible;
display: inline;
}
#wb_Text1
{
left: 27px;
top: 55px;
width: 270px;
height: 29px;
visibility: visible;
display: inline;
}
#wb_Shape9
{
left: 0px;
top: 327px;
visibility: visible;
display: inline;
}
#wb_Text4
{
left: 555px;
top: 252px;
width: 197px;
height: 422px;
visibility: hidden;
display: none;
}
#wb_Text3
{
left: 33px;
top: 337px;
width: 250px;
height: 708px;
visibility: visible;
display: inline;
}
#wb_TextMenu2
{
left: 39px;
top: 212px;
visibility: hidden;
display: none;
}
#wb_Shape8
{
left: 0px;
top: 1084px;
visibility: visible;
display: inline;
}
#wb_Text7
{
left: 12px;
top: 1096px;
width: 290px;
height: 26px;
visibility: visible;
display: inline;
}
#wb_TextMenu1
{
left: 13px;
top: 116px;
visibility: visible;
display: inline;
}
}
</style>
</head>
<body>
<div id="container">
<div id="wb_Shape10">
<img src="http://s3.picofile.com/file/8212051800/img0001.gif" id="Shape10" alt=""></div>
<div id="wb_Shape5">
<img src="http://s3.picofile.com/file/8212051692/img0002.gif" id="Shape5" alt=""></div>
<div id="wb_Shape7">
<img src="http://s3.picofile.com/file/8212051918/img0003.gif" id="Shape7" alt=""></div>
<div id="wb_Shape2">
<div id="Shape2"></div></div>
<div id="wb_Shape1">
<div id="Shape1"></div></div>
<div id="wb_Shape4">
<img src="http://s3.picofile.com/file/8212052034/img0006.gif" id="Shape4" alt=""></div>
<div id="wb_Shape6">
<img src="http://s3.picofile.com/file/8212052126/img0007.gif" id="Shape6" alt=""></div>
<div id="wb_Shape3">
<div id="Shape3"></div></div>
<div id="wb_Text2">
<span style="color:#FFFFFF;font-family:Tahoma;font-size:48px;"><strong>تست</strong></span></div>
<div id="wb_Text1">
<span style="color:#FFFFFF;font-family:Tahoma;font-size:24px;">تست</span></div>
<div id="wb_Shape9">
<img src="http://s6.picofile.com/file/8212052242/img0009.gif" id="Shape9" alt=""></div>
<div id="wb_Text4">
<span style="color:#FFFFFF;font-family:Tahoma;font-size:16px;">تست</span><span style="color:#000000;font-family:Tahoma;font-size:11px;"><br></span><span style="color:#646464;font-family:Tahoma;font-size:11px;"><br><br><br></span><span style="color:#000000;font-family:Tahoma;font-size:16px;">تست</span></div>
<div id="wb_Text3">
<span style="color:#FFFFFF;font-family:Tahoma;font-size:16px;">تست</span><span style="color:#000000;font-family:Tahoma;font-size:11px;"><br></span><span style="color:#646464;font-family:Tahoma;font-size:11px;"><br><br></span><span style="color:#000000;font-family:Tahoma;font-size:16px;">تست</span></div>
<div id="wb_TextMenu2">
<span><a href="http://" class="style1">تست</a></span><span><a href="http://" class="style1">تست</a></span><span><a href="http://" class="style1">تست</a></span><span><a href="http://" class="style1">تست</a></span><span><a href="http://" class="style1">تست</a></span><span><a href="http://" class="style1">تست</a></span><span><a href="http://" class="style1">تست</a></span></div>
<div id="wb_Shape8">
<img src="http://s6.picofile.com/file/8212052468/img0010.gif" id="Shape8" alt=""></div>
<div id="wb_Text7">
</div>
<div id="wb_TextMenu1">
<span><a href="http://" class="style1">Home</a></span>
<span><a href="http://" class="style1">About Me</a></span>
<span><a href="http://" class="style1">My Family</a></span>
<span><a href="http://" class="style1">My Hobbies</a></span>
<span><a href="http://" class="style1">My Work</a></span>
<span><a href="http://" class="style1">My Pictures</a></span>
<span><a href="http://" class="style1">Contact</a></span>
</div>
</div>
</div>
</body>
</html>