自然网站

最新推荐文章于 2024-04-08 09:58:45 发布

小嘎子闯天涯

最新推荐文章于 2024-04-08 09:58:45 发布

阅读量1k

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/zhangge360/article/details/13509373

版权

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.home.html

<!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>无标题文档</title>
<style type="text/css">
#body
{
background:#000;
width:972px;
height:2100px;
margin-left:180px;
}
#head
{
width:960px;
height:70px;
background-image:url(images/header_bg.gif);
margin-left:6px;
padding-top:6px;
}
#img_bg
{
background-color:#FFF;
width:960px;
height:276px;
margin-left:6px;
padding-top:6px;
}
#img
{
background-image:url(images/hbg_img.jpg);
width:948px;
height:270px;
margin-left:6px;
}
#content
{
width:960px;
height:1800px;
background-color:#FFFFFF;
margin-left:6px;
margin-top:6px;
}
#content_left
{
width:66%;
height:800px;
float:left;
}
#content_right
{
width:34%;
height:800px;
float:left;
}
.logo
{
width:350px;
height:70px;
line-height:5px;
padding-top:10px;
padding-left:20px;
float:left;
}
.menu
{
float:left;
}
.menu ul li
{
list-style-type:none;
float:left;
padding-top:10px;
padding-left:10px;
color:#FFF;
}
.list
{
width:80px;
height:20px;
}

a:hover{ background:url(images/menu_a.gif) repeat-x;
color:#000;

}
a {

width:100px;
height:30px;
text-decoration:none;
color:#FFF;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}
.one
{
width:600px;
height:40px;
padding-top:30px;
margin-left:30px;
font-size:30px;
color:#666666;
}
.two
{
width:600px;
height:30px;
font-size:8px;
background-image:url(images/header_bg.gif);
margin-left:30px;
padding-top:10px;
padding-left:10px;
color:#FFFFFF;
}
.three
{
width:600px;
height:146px;
margin-left:30px;
border-color:#000000;
margin-top:12px;
}
.three_img_1
{
width:598px;
height:134px;
background-image:url(images/img1.jpg);
margin:6px;
}
.three_img_2
{
width:598px;
height:134px;
background-image:url(images/img2.jpg);
margin:6px;
}
.four
{
width:606px;
height:230px;
margin-left:30px;
margin-top:12px;
line-height:23px;
font-size:16px;
}
.five
{
width:606px;
height:190px;
margin-left:30px;
margin-top:24px;
line-height:23px;
font-size:16px;
}
.six
{
width:100px;
height:30px;
font-size:16px;
float:right;
background:#000000;
padding-top:9px;
padding-left:13px;
color:#FFFFFF;
}
.six a
{
color:#FFFFFF;
text-decoration:none;
}
.siderbar_menu ul a,.sponsors a
{
color:#000000;
text-decoration:none;
}
.search
{
margin-left:40px;
margin-top:35px;
width:200px;
height:36px;
background-color:#99CCCC;
}
.search_text
{

width:150px;
height:27px;
background-image:url(images/search.gif);
padding-top:9px;
padding-left:10px;
float:left;
color:#666666;
}
.search_img
{
width:40px;
height:36px;
background-image:url(images/search_btn.gif);
float:left;
}

.siderbar_menu ul
{
list-style-type:none;
line-height:30px;
text-align:left;
}
.sponsors
{
margin-left:40px;
}
.form{ width:150px;
border-style:hidden}

</style>

</head>

<body>
<div id="body">
<div id="head">
<div class="logo">
<p><font size="+3" color="#FFFFFF"><b>Web</b>temp</font></p>
<p><font size="-3"color="#FFFFFF">Simple web template</font></p>
</div>
<div class="menu">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about us.html">About Us</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact us.html">Contace Us</a></li>
</ul>
</div>
</div>
<div id="img_bg">
<div id="img"></div>
</div>
<div id="content">
<div id="content_left">
<div class="one">Business template</div>
<div class="two">Posted on 11 sep 2018 by <font style="text-decoration:underline">Webmaster</font>|Files under <font style="text-decoration:underline">templates</font>,<font style="text-decoration:underline">internet</font>            Comments(11)</div>
<div class="three">
<div class="three_img_1"></div>
</div>
<div class="four">
lorem ipsum dolor sit amet,consectetuer adipiscing elit.Donec libero.Suspendisse bibendum.Cras id rua.
<font style="text-decoration:underline; color:#FF0000">Morbi tincidunt,oeci ac conballis</font> aliquam,lectus turpis varius lorem,eu posuere nunc justo tempus leo.Donec
mattis,purus nec placerat bibendum,dui pede condimentum odio,ac blandit ante orci ut diam.Cras fringilla
magna.Phasellus suscopit,leo a pharetra condimentum,lorem tellus eleifend magna,eget fringilla velit magna id
neque,Cursbitur bel urna.In tristique orci porttitor ipsum dolor sit amet,consectetuer adipiscing elit.
Dones libero,Suspengisse bibendum.Cars id urna.Morbi tincidunt,orci ac convallis aliquam.lectus turpis varius
lorem,eu popuere nunc justo tempus leo.
</div>
<div class="five">
<b>Aenean consequat porttitor adipiscing.Nam pellentesque justo ut tortor congue lobortis.Donec venenatis sagittis fringilla.</b>Etiam nec libero magna,et dictum velit.Proin mauris,mattis eu elementum eget,commodo in nulla,Mauris posuere benenatis pretium,Maecenas a dui sed lorem aliquam sictum.Nunc urna leo,imperdiet eu bibendum ac,pretium ac massa.Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.Nulla facilisi.Quisque condimentum luctus ullamcorper.
</div>
<div class="six"><a href="#">Read more>></a></div>
<br />
<br />
<br />
<br />
<br />
<div class="one">Future technology</div>
<div class="two">Posted on 29 aug 2010 by <font style="text-decoration:underline">Webmaster</font>|Files under <font style="text-decoration:underline">templates</font>,<font style="text-decoration:underline">internet</font>            Comments(7)</div>
<div class="three">
<div class="three_img_2"></div>
</div>
<div class="four">
lorem ipsum dolor sit amet,consectetuer adipiscing elit.Donec libero.Suspendisse bibendum.Cras id rua.
<font style="text-decoration:underline; color:#FF0000">Morbi tincidunt,oeci ac conballis</font> aliquam,lectus turpis varius lorem,eu posuere nunc justo tempus leo.Donec
mattis,purus nec placerat bibendum,dui pede condimentum odio,ac blandit ante orci ut diam.Cras fringilla
magna.Phasellus suscopit,leo a pharetra condimentum,lorem tellus eleifend magna,eget fringilla velit magna id
neque,Cursbitur bel urna.In tristique orci porttitor ipsum dolor sit amet,consectetuer adipiscing elit.
Dones libero,Suspengisse bibendum.Cars id urna.Morbi tincidunt,orci ac convallis aliquam.lectus turpis varius
lorem,eu popuere nunc justo tempus leo.
</div>
<div class="five">
<b>Aenean consequat porttitor adipiscing.Nam pellentesque justo ut tortor congue lobortis.Donec venenatis sagittis fringilla.</b>Etiam nec libero magna,et dictum velit.Proin mauris,mattis eu elementum eget,commodo in nulla,Mauris posuere benenatis pretium,Maecenas a dui sed lorem aliquam sictum.Nunc urna leo,imperdiet eu bibendum ac,pretium ac massa.Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.Nulla facilisi.Quisque condimentum luctus ullamcorper.
</div>
<div class="six"><a href="#">Read more>></a></div>
</div>
<div id="content_right">
<div class="search">
<div class="search_text">
<form><input type="text" value="Search our ste:" class="form"/></form>
</div>
<div class="search_img">
</div>

</div>
<div class="siderbar_menu">
<h2>   Siderbar Menu</h2>
<ul>
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>Templateinfo</b></a></li>
<li><a href="#"><b>StylenDemo</b></a></li>
<li><a href="#"><b>Blog</b></a></li>
<li><a href="#"><b>Archines</b></a></li>
<li><a href="#"><b>Web Templates</b></a></li>
</ul>
<br />
<h2>   Sponsors</h2>

<div class="sponsors">
<p><b><a href="#">DreamTemplate</a></b><br />
Over 6000+Premium Web Templates</p>
<p><b><a href="#">TemplateeSOLD</a></b><br />
Premium WordPress & Joomla Themes</p>
<p><b><a href="#">ImHosted.com</a></b><br />
Affordable Web Hosting Provider</p>
<p><b><a href="#">MegaStockPhotos</a></b><br />
Unlimited Amazing Stock Photos</p>
<p><b><a href="#">Evrsoft</a></b><br />
Website Builer Software & Tools</p>
<p><b><a href="#">CSS Hub</a></b><br />
Premium CSS Templates</p>
</div>
</div>
</div>
</div>
</div>

</body>
</html>

2.About Us.html

<!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>无标题文档</title>
<style type="text/css">
#body
{
background:#000;
width:972px;
height:2100px;
margin-left:180px;
}
#head
{
width:960px;
height:70px;
background-image:url(images/header_bg.gif);
margin-left:6px;
padding-top:6px;
}
#img_bg
{
background-color:#FFF;
width:960px;
height:276px;
margin-left:6px;
padding-top:6px;
}
#img
{
background-image:url(images/hbg_img.jpg);
width:948px;
height:270px;
margin-left:6px;
}
#content
{
width:960px;
height:1800px;
background-color:#FFFFFF;
margin-left:6px;
margin-top:6px;
}
#content_left
{
width:66%;
height:800px;
float:left;
}
#content_right
{
width:34%;
height:800px;
float:left;
}
.logo
{
width:350px;
height:70px;
line-height:5px;
padding-top:10px;
padding-left:20px;
float:left;
}
.menu
{
float:left;
}
.menu ul li
{
list-style-type:none;
float:left;
padding-top:10px;
padding-left:10px;
color:#FFF;
}
.list
{
width:80px;
height:20px;
}
a:hover{ background:url(images/menu_a.gif) repeat-x scroll 0 0;
color:#000;
}
a {
width:100px;
height:30px;
text-decoration:none;
color:#FFF;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}
.one
{
width:600px;
height:40px;
padding-top:30px;
margin-left:30px;
font-size:30px;
color:#666666;
}

.two
{
width:606px;
margin-left:30px;
margin-top:12px;
line-height:23px;
font-size:16px;
}
.siderbar_menu ul a,.sponsors a
{
color:#000000;
text-decoration:none;
}
.search
{
margin-left:40px;
margin-top:35px;
width:200px;
height:36px;
background-color:#99CCCC;
}
.search_text
{

width:150px;
height:27px;
background-image:url(images/search.gif);
padding-top:9px;
padding-left:10px;
float:left;
color:#666666;
}
.search_img
{
width:40px;
height:36px;
background-image:url(images/search_btn.gif);
float:left;
}

.siderbar_menu ul
{
list-style-type:none;
line-height:30px;
text-align:left;
}
.sponsors
{
margin-left:40px;
}
.form{ width:150px;
border-style:hidden}

</style>

</head>

<body>
<div id="body">
<div id="head">
<div class="logo">
<p><font size="+3" color="#FFFFFF"><b>Web</b>temp</font></p>
<p><font size="-3"color="#FFFFFF">Simple web template</font></p>
</div>
<div class="menu">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about us.html">About Us</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact us.html">Contace Us</a></li>
</ul>
</div>
</div>
<div id="img_bg">
<div id="img"></div>
</div>
<div id="content">
<div id="content_left">
<div class="one">About to Company Name</div>
<div class="two">
<b>lorem ipsum dolor sit amet,consectetuer adipiscing elit.Donec libero.Suspendisse bibendum.Cras id rua.
Morbi tincidunt,oeci ac conballis aliquam</b>
</div>
<div class="two">
Cras fringilla
magna.Phasellus suscopit,leo a pharetra condimentum,lorem tellus eleifend magna,eget fringilla velit magna id
neque,Cursbitur bel urna.In tristique orci porttitor ipsum dolor sit amet,consectetuer adipiscing elit.
Dones libero,Suspengisse bibendum.Cars id urna.Morbi tincidunt,orci ac convallis aliquam.lectus turpis varius
lorem,eu popuere nunc justo tempus leo.
</div>
<div class="one">Our Mission</div>
<div class="two">
<b>lorem ipsum dolor sit amet,consectetuer adipiscing elit.Donec libero.Suspendisse bibendum.Cras id rua.
Morbi tincidunt,oeci ac conballis aliquam</b>
</div>
<div class="two">
Morbi tincidunt,oeci ac conballis aliquam,lectus turpis varius lorem,eu posuere nunc justo tempus leo.Donec
mattis,purus nec placerat bibendum,dui pede condimentum odio,ac blandit ante orci ut diam.Cras fringilla
magna.Phasellus suscopit,leo a pharetra condimentum,lorem tellus eleifend magna,eget fringilla velit magna id
neque,Cursbitur bel urna.In tristique orci porttitor ipsum dolor sit amet,consectetuer adipiscing elit.
Dones libero,Suspengisse bibendum.Cars id urna.Morbi tincidunt,orci ac convallis aliquam.lectus turpis varius
lorem,eu popuere nunc justo tempus leo.
</div>
<div class="two">
Aenean consequat porttitor adipiscing.Nam pellentesque justo ut tortor congue lobortis.Donec venenatis sagittis fringilla.</b>Etiam nec libero magna,et dictum velit.Proin mauris,mattis eu elementum eget,commodo in nulla,Mauris posuere benenatis pretium,Maecenas a dui sed lorem aliquam sictum.Nunc urna leo,imperdiet eu bibendum ac,pretium ac massa.Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.Nulla facilisi.Quisque condimentum luctus ullamcorper.
</div>
</div>
<div id="content_right">
<div class="search">
<div class="search_text">
<form><input type="text" value="Search our ste:" class="form"/></form>
</div>
<div class="search_img">
</div>

</div>
<div class="siderbar_menu">
<h2>   Siderbar Menu</h2>
<ul>
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>Templateinfo</b></a></li>
<li><a href="#"><b>StylenDemo</b></a></li>
<li><a href="#"><b>Blog</b></a></li>
<li><a href="#"><b>Archines</b></a></li>
<li><a href="#"><b>Web Templates</b></a></li>
</ul>
<br />
<h2>   Sponsors</h2>

<div class="sponsors">
<p><b><a href="#">DreamTemplate</a></b><br />
Over 6000+Premium Web Templates</p>
<p><b><a href="#">TemplateeSOLD</a></b><br />
Premium WordPress & Joomla Themes</p>
<p><b><a href="#">ImHosted.com</a></b><br />
Affordable Web Hosting Provider</p>
<p><b><a href="#">MegaStockPhotos</a></b><br />
Unlimited Amazing Stock Photos</p>
<p><b><a href="#">Evrsoft</a></b><br />
Website Builer Software & Tools</p>
<p><b><a href="#">CSS Hub</a></b><br />
Premium CSS Templates</p>
</div>
</div>
</div>
</div>
</div>

</body>
</html>

3.blog.html

<!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>无标题文档</title>
<style type="text/css">
#body
{
background:#000;
width:972px;
height:2100px;
margin-left:180px;
}
#head
{
width:960px;
height:70px;
background-image:url(images/header_bg.gif);
margin-left:6px;
padding-top:6px;
}
#img_bg
{
background-color:#FFF;
width:960px;
height:276px;
margin-left:6px;
padding-top:6px;
}
#img
{
background-image:url(images/hbg_img.jpg);
width:948px;
height:270px;
margin-left:6px;
}
#content
{
width:960px;
height:1800px;
background-color:#FFFFFF;
margin-left:6px;
margin-top:6px;
}
#content_left
{
width:66%;
height:800px;
float:left;
}
#content_right
{
width:34%;
height:800px;
float:left;
}
.logo
{
width:350px;
height:70px;
line-height:5px;
padding-top:10px;
padding-left:20px;
float:left;
}
.menu
{
float:left;
}
.menu ul li
{
list-style-type:none;
float:left;
padding-top:10px;
padding-left:10px;
color:#FFF;
}
.list
{
width:80px;
height:20px;
}
a:hover{ background:url(images/menu_a.gif) repeat-x scroll 0 0;
color:#000;
}
a {
width:100px;
height:30px;
text-decoration:none;
color:#FFF;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
}

.one
{
width:600px;
height:40px;
padding-top:30px;
margin-left:30px;
font-size:30px;
color:#666666;
}
.two
{
width:606px;
margin-left:30px;
margin-top:12px;
line-height:23px;
font-size:16px;
}
.two a
{
color:#FF0000
}
.two img
{
float:left;
}
.siderbar_menu ul a,.sponsors a
{
color:#000000;
text-decoration:none;
}
.search
{
margin-left:40px;
margin-top:35px;
width:200px;
height:36px;
background-color:#99CCCC;
}
.search_text
{

width:150px;
height:27px;
background-image:url(images/search.gif);
padding-top:9px;
padding-left:10px;
float:left;
color:#666666;
}
.search_img
{
width:40px;
height:36px;
background-image:url(images/search_btn.gif);
float:left;
}

.siderbar_menu ul
{
list-style-type:none;
line-height:30px;
text-align:left;
}
.sponsors
{
margin-left:40px;
}

.form{ width:150px;
border-style:hidden;}
</style>

</head>

<body>
<div id="body">
<div id="head">
<div class="logo">
<p><font size="+3" color="#FFFFFF"><b>Web</b>temp</font></p>
<p><font size="-3"color="#FFFFFF">Simple web template</font></p>
</div>
<div class="menu">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about us.html">About Us</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact us.html">Contace Us</a></li>
</ul>
</div>
</div>
<div id="img_bg">
<div id="img"></div>
</div>
<div id="content">
<div id="content_left">
<div class="one">A Blog Entry</div>
<div class="two">Posted by <a href="#">Webmaster</a>. Filed under <a href="#">templates</a>,<a href="#">Internet</a></div>
<div class="two">
lorem ipsum dolor sit amet,consectetuer adipiscing elit.Donec libero.Suspendisse bibendum.Cras id rua.
Morbi tincidunt,oeci ac conballis aliquam,lectus turpis varius lorem,eu posuere nunc justo tempus leo.Donec
mattis,purus nec placerat bibendum,dui pede condimentum odio,ac blandit ante orci ut diam.Cras fringilla
magna.Phasellus suscopit,leo a pharetra condimentum,lorem tellus eleifend magna,eget fringilla velit magna id
neque,Cursbitur bel urna.In tristique orci porttitor ipsum dolor sit amet,consectetuer adipiscing elit.
Dones libero,Suspengisse bibendum.Cars id urna.Morbi tincidunt,orci ac convallis aliquam.lectus turpis varius
lorem,eu popuere nunc justo tempus leo.
</div>
<div class="two">
Tagged:<a href="#">orci</a>,<a href="#">Iectus</a>,<a href="#">varius</a>,<a href="#">turpis</a>
</div>
<div class="two">
<a href="#">Comments(3)</a>.May27,2010.<a href="#">Edit</a>
</div>
<div class="one">3 Response</div>
<div class="two">
<img src="images/userpic.gif" />   <a href="#">admin</a> Says:<br />   April 20th.2009 at 2:17 pm<br /><br />

lorem ipsum dolor sit amet,consectetuer adipiscing elit.Donec libero.Suspendisse bibendum.<br /><br />

<img src="images/userpic.gif" />   <a href="#">Webmaster</a> Says:<br />   April 20th.2009 at 2:17 pm<br /><br />

lorem ipsum dolor sit amet,consectetuer adipiscing elit.Donec libero.Suspendisse bibendum.Cras id rua.
Morbi tincidunt,oeci ac conballisaliquam,lectus turpis varius lorem,eu posuere nunc justo tempus leo.<br /><br />

<img src="images/userpic.gif" />   <a href="#">admin</a> Says:<br />   April 20th.2009 at 2:17 pm<br /><br />

lorem ipsum dolor sit amet,consectetuer adipiscing elit.Donec libero.Suspendisse bibendum.<br /><br />

</div>
<div class="one">Leave a Reply</div>
<div class="two">
Name(required)<br />
<input type="text" style="width:500px;" /><br />

Email Address(required)<br />
<input type="text" style="width:500px;" /><br />

Website(required)<br />
<input type="text" style="width:500px;" /><br />

Your Message<br />
<textarea name="your message" cols="68" rows="10"></textarea>

</div>

</div>
<div id="content_right">
<div class="search">
<div class="search_text">
<form><input type="text" value="Search our ste:" class="form"/></form>
</div>
<div class="search_img">
</div>

</div>
<div class="siderbar_menu">
<h2>   Siderbar Menu</h2>
<ul>
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>Templateinfo</b></a></li>
<li><a href="#"><b>StylenDemo</b></a></li>
<li><a href="#"><b>Blog</b></a></li>
<li><a href="#"><b>Archines</b></a></li>
<li><a href="#"><b>Web Templates</b></a></li>
</ul>
<br />
<h2>   Sponsors</h2>

<div class="sponsors">
<p><b><a href="#">DreamTemplate</a></b><br />
Over 6000+Premium Web Templates</p>
<p><b><a href="#">TemplateeSOLD</a></b><br />
Premium WordPress & Joomla Themes</p>
<p><b><a href="#">ImHosted.com</a></b><br />
Affordable Web Hosting Provider</p>
<p><b><a href="#">MegaStockPhotos</a></b><br />
Unlimited Amazing Stock Photos</p>
<p><b><a href="#">Evrsoft</a></b><br />
Website Builer Software & Tools</p>
<p><b><a href="#">CSS Hub</a></b><br />
Premium CSS Templates</p>
</div>
</div>
</div>
</div>
</div>

</body>
</html>

4.contact us.html

5.support.html

小嘎子闯天涯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
自然网站

1.home.html无标题文档#body{background:#000;width:972px;height:2100px;margin-left:180px;}#head{width:960px;height:70px;background-image:url(images/header_bg.gif);margin
复制链接

扫一扫

专栏目录