17.css
17.html
page1.html
page2.html
page3.html
page4.html
来源：《精通CSS+DIV网页样式与布局》
body{
background-color:#2a3a00;
margin: 0px;
padding:0px;
text-align:center;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
#container{
position:relative;
margin:1px auto 0px auto;
width:640px;
text-align:left;
background:#FFFFFF url(left_bg.jpg) repeat-y;
/* 修补#navigation的背景色问题 */
}
#navigation {
width:150px;
float:left; /* 左浮动 */
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #b9ff00; /* 添加下划线 */
}
#navigation li a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #3c5300; /* 左边的粗红边 */
border-right:1px solid #3c5300; /* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
background-color:#729e00;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#587a00; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
#text{
float:left;
width:460px;
margin:10px 15px 35px 15px;
}
#text h3{
font-size:15px;
margin:0px 0px 10px 0px;
padding:10px 0px 1px 0px;
border-bottom:1px dotted #777777; /* 下划点线 */
}
#text a:link, #text a:visited{
color:#afcd00;
text-decoration:none;
}
#text a:hover{
color:#000000;
text-decoration:underline;
}
#footer{
clear:both;
text-align:center;
background-color:#c7db51;
margin:0px; padding:1px;
}
#footer a:link, #footer a:visited{
color:#475300;
text-decoration:none;
}
#footer a:hover{
color:#000000;
text-decoration:line-through;
}
background-color:#2a3a00;
margin: 0px;
padding:0px;
text-align:center;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
#container{
position:relative;
margin:1px auto 0px auto;
width:640px;
text-align:left;
background:#FFFFFF url(left_bg.jpg) repeat-y;
/* 修补#navigation的背景色问题 */
}
#navigation {
width:150px;
float:left; /* 左浮动 */
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #b9ff00; /* 添加下划线 */
}
#navigation li a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #3c5300; /* 左边的粗红边 */
border-right:1px solid #3c5300; /* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
background-color:#729e00;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#587a00; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
#text{
float:left;
width:460px;
margin:10px 15px 35px 15px;
}
#text h3{
font-size:15px;
margin:0px 0px 10px 0px;
padding:10px 0px 1px 0px;
border-bottom:1px dotted #777777; /* 下划点线 */
}
#text a:link, #text a:visited{
color:#afcd00;
text-decoration:none;
}
#text a:hover{
color:#000000;
text-decoration:underline;
}
#footer{
clear:both;
text-align:center;
background-color:#c7db51;
margin:0px; padding:1px;
}
#footer a:link, #footer a:visited{
color:#475300;
text-decoration:none;
}
#footer a:hover{
color:#000000;
text-decoration:line-through;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>World Trans</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="pic"><a href="page1.html"><img src="index.jpg"></a></div>
<div id="intro"><a href="page1.html">思想和文化的交流始于文字，我们以新颖而行之有效的方式为您提供实际的服务。</a></div>
<div id="llinks">
<ul>
<li><a href="page1.html">翻译服务</a></li>
<li><a href="page2.html">服务流程</a></li>
<li><a href="page3.html">网站建设</a></li>
<li><a href="page4.html">付费</a></li>
</ul>
</div>
</div>
</body>
</html>
<html>
<head>
<title>World Trans</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="pic"><a href="page1.html"><img src="index.jpg"></a></div>
<div id="intro"><a href="page1.html">思想和文化的交流始于文字，我们以新颖而行之有效的方式为您提供实际的服务。</a></div>
<div id="llinks">
<ul>
<li><a href="page1.html">翻译服务</a></li>
<li><a href="page2.html">服务流程</a></li>
<li><a href="page3.html">网站建设</a></li>
<li><a href="page4.html">付费</a></li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>World Word</title>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="banner"><a href="17.html"><img src="banner.jpg" border="0"></a></div>
<div id="navigation">
<ul>
<li><a href="page1.html">翻译服务</a></li>
<li><a href="page2.html">网站建设</a></li>
<li><a href="page3.html">服务流程</a></li>
<li><a href="page4.html">付费</a></li>
</ul>
</div>
<div id="text">
<h3>为您提供精准的翻译服务</h3>
<p>您是否要将某些文档翻译成标准的英语版本？您是否担心译文会不符合西方语系的语言习惯？您是否遇到语言障碍而放缓向境外拓展业务的步伐？您是否受到时而需要处理外文资料的困扰？</p>
<p>让我们来帮您解决这些问题。我们这里提供的服务<a href="page3.html">快捷</a> 、高效、准确，而且<a href="page4.html">付费</a>方便。您无需走出家门，就可同我们一起走完服务的全过程，甚至包括付费。</p>
<p>我们有来自中国和新加坡的翻译专家，他们具有得天独厚的语言基础和深厚的文化背景。他们合作的结晶一定是非常贴切而精美的译文作品。我们会分配以您的目标语种为 母语 的翻译员为你翻译，同时他们也 精通 您的源语语种。</p>
<p>您若有此需求或任何疑问，请浏览我们的网站，也可随时同我们联系，您会得到耐心的解答。我们的联系方式是: <a href="mailto:demo@demo.com">demo@demo.com</a>。</p>
</div>
<div id="footer">联系我们: <a href="mailto:demo@demo.com">demo@demo.com</a></div>
</div>
</body>
</html>
<html>
<head>
<title>World Word</title>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="banner"><a href="17.html"><img src="banner.jpg" border="0"></a></div>
<div id="navigation">
<ul>
<li><a href="page1.html">翻译服务</a></li>
<li><a href="page2.html">网站建设</a></li>
<li><a href="page3.html">服务流程</a></li>
<li><a href="page4.html">付费</a></li>
</ul>
</div>
<div id="text">
<h3>为您提供精准的翻译服务</h3>
<p>您是否要将某些文档翻译成标准的英语版本？您是否担心译文会不符合西方语系的语言习惯？您是否遇到语言障碍而放缓向境外拓展业务的步伐？您是否受到时而需要处理外文资料的困扰？</p>
<p>让我们来帮您解决这些问题。我们这里提供的服务<a href="page3.html">快捷</a> 、高效、准确，而且<a href="page4.html">付费</a>方便。您无需走出家门，就可同我们一起走完服务的全过程，甚至包括付费。</p>
<p>我们有来自中国和新加坡的翻译专家，他们具有得天独厚的语言基础和深厚的文化背景。他们合作的结晶一定是非常贴切而精美的译文作品。我们会分配以您的目标语种为 母语 的翻译员为你翻译，同时他们也 精通 您的源语语种。</p>
<p>您若有此需求或任何疑问，请浏览我们的网站，也可随时同我们联系，您会得到耐心的解答。我们的联系方式是: <a href="mailto:demo@demo.com">demo@demo.com</a>。</p>
</div>
<div id="footer">联系我们: <a href="mailto:demo@demo.com">demo@demo.com</a></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>World Word</title>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="banner"><a href="17.html"><img src="banner.jpg" border="0"></a></div>
<div id="navigation">
<ul>
<li><a href="page1.html">翻译服务</a></li>
<li><a href="page2.html">网站建设</a></li>
<li><a href="page3.html">服务流程</a></li>
<li><a href="page4.html">付费</a></li>
</ul>
</div>
<div id="text">
<h3>网站建设</h3>
<p>一幅美观而高效的页面、一个强而有力的标志是其所有者的形象，也是他向外展示自己而给人留下深刻印象的第一个机会。它所具有的美应该能抓住浏览者的眼睛，它所包含的内容应该能锁住他们的心。</p>
<p>这需要一支熟练而具有市场观念的团队来实现。这就是您选择“World-Trans”的原因，让我们来帮您实现上述目的。我们的团队会把他们丰富的经验、知识及才干注入到您的网站中。</p>
<p>当然，如果您需要，由于我们得天独厚的业务专长，我们也可以将您的网站无缝地制作成英文版/中文版。</p>
<p>敬请垂询: <a href="mailto:demo@demo.com">demo@demo.com</a></p>
</div>
<div id="footer">联系我们: <a href="mailto:demo@demo.com">demo@demo.com</a></div>
</div>
</body>
</html>
<html>
<head>
<title>World Word</title>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="banner"><a href="17.html"><img src="banner.jpg" border="0"></a></div>
<div id="navigation">
<ul>
<li><a href="page1.html">翻译服务</a></li>
<li><a href="page2.html">网站建设</a></li>
<li><a href="page3.html">服务流程</a></li>
<li><a href="page4.html">付费</a></li>
</ul>
</div>
<div id="text">
<h3>网站建设</h3>
<p>一幅美观而高效的页面、一个强而有力的标志是其所有者的形象，也是他向外展示自己而给人留下深刻印象的第一个机会。它所具有的美应该能抓住浏览者的眼睛，它所包含的内容应该能锁住他们的心。</p>
<p>这需要一支熟练而具有市场观念的团队来实现。这就是您选择“World-Trans”的原因，让我们来帮您实现上述目的。我们的团队会把他们丰富的经验、知识及才干注入到您的网站中。</p>
<p>当然，如果您需要，由于我们得天独厚的业务专长，我们也可以将您的网站无缝地制作成英文版/中文版。</p>
<p>敬请垂询: <a href="mailto:demo@demo.com">demo@demo.com</a></p>
</div>
<div id="footer">联系我们: <a href="mailto:demo@demo.com">demo@demo.com</a></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>World Word</title>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="banner"><a href="17.html"><img src="banner.jpg" border="0"></a></div>
<div id="navigation">
<ul>
<li><a href="page1.html">翻译服务</a></li>
<li><a href="page2.html">网站建设</a></li>
<li><a href="page3.html">服务流程</a></li>
<li><a href="page4.html">付费</a></li>
</ul>
</div>
<div id="text">
<h3>工作流程</h3>
<p>首先烦请您将需求用<a href="mailto:demo@demo.com">E-mail</a>的方式发给我们，我们承诺决不泄漏其内容。 </p>
<p>请将您的需求上传至: <a href="mailto:demo@demo.com">demo@demo.com</a></p>
<p> 我们会回复您服务的价格，同时会给您一个业务号。</p>
<p>您若接受，便可在我们列出的<a href="page4.html">付费方式</a>中任选一种付费，之后发E-mail <a href="mailto:demo@demo.com">通知我们</a>，请一并告知我们分配给您的业务号和银行转账的业务号。款一到，我们立刻通知您翻译工作已在进行中，并同您保持联络。</p>
</div>
<div id="footer">联系我们: <a href="mailto:demo@demo.com">demo@demo.com</a></div>
</div>
</body>
</html>
<html>
<head>
<title>World Word</title>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="banner"><a href="17.html"><img src="banner.jpg" border="0"></a></div>
<div id="navigation">
<ul>
<li><a href="page1.html">翻译服务</a></li>
<li><a href="page2.html">网站建设</a></li>
<li><a href="page3.html">服务流程</a></li>
<li><a href="page4.html">付费</a></li>
</ul>
</div>
<div id="text">
<h3>工作流程</h3>
<p>首先烦请您将需求用<a href="mailto:demo@demo.com">E-mail</a>的方式发给我们，我们承诺决不泄漏其内容。 </p>
<p>请将您的需求上传至: <a href="mailto:demo@demo.com">demo@demo.com</a></p>
<p> 我们会回复您服务的价格，同时会给您一个业务号。</p>
<p>您若接受，便可在我们列出的<a href="page4.html">付费方式</a>中任选一种付费，之后发E-mail <a href="mailto:demo@demo.com">通知我们</a>，请一并告知我们分配给您的业务号和银行转账的业务号。款一到，我们立刻通知您翻译工作已在进行中，并同您保持联络。</p>
</div>
<div id="footer">联系我们: <a href="mailto:demo@demo.com">demo@demo.com</a></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>World Word</title>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="banner"><a href="17.html"><img src="banner.jpg" border="0"></a></div>
<div id="navigation">
<ul>
<li><a href="page1.html">翻译服务</a></li>
<li><a href="page2.html">网站建设</a></li>
<li><a href="page3.html">服务流程</a></li>
<li><a href="page4.html">付费</a></li>
</ul>
</div>
<div id="text">
<h3>付费</h3>
<p>在中国付费: </p>
<p>无论您在中国的那个省份，只要您在下述银行之一拥有账号就可实现付费。如果该省开通电话服务或网上银行，您可实现足不出户享有我们的翻译服务全过程。</p>
<p>建设银行 </p>
<p>账号: xxxxxxxxxxxxxxxxxxx 收款人: <strong>某某</strong></p>
<p>网上银行: <a href="#">http://www.ccb.cn </a></p>
<p>电话服务转账: <strong>95533 </strong></p>
<h3>工商银行 </h3>
<p>账号: xxxxxxxxxxxxxxxxxxx 收款人：<strong>某某</strong></p>
<p>网上银行: <a href="#">http://www.icbc.com.cn </a></p>
<p>电话服务转账: <strong>95588 </strong></p>
</div>
<div id="footer">联系我们: <a href="mailto:demo@demo.com">demo@demo.com</a></div>
</div>
</body>
</html>
<html>
<head>
<title>World Word</title>
<link href="17.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="banner"><a href="17.html"><img src="banner.jpg" border="0"></a></div>
<div id="navigation">
<ul>
<li><a href="page1.html">翻译服务</a></li>
<li><a href="page2.html">网站建设</a></li>
<li><a href="page3.html">服务流程</a></li>
<li><a href="page4.html">付费</a></li>
</ul>
</div>
<div id="text">
<h3>付费</h3>
<p>在中国付费: </p>
<p>无论您在中国的那个省份，只要您在下述银行之一拥有账号就可实现付费。如果该省开通电话服务或网上银行，您可实现足不出户享有我们的翻译服务全过程。</p>
<p>建设银行 </p>
<p>账号: xxxxxxxxxxxxxxxxxxx 收款人: <strong>某某</strong></p>
<p>网上银行: <a href="#">http://www.ccb.cn </a></p>
<p>电话服务转账: <strong>95533 </strong></p>
<h3>工商银行 </h3>
<p>账号: xxxxxxxxxxxxxxxxxxx 收款人：<strong>某某</strong></p>
<p>网上银行: <a href="#">http://www.icbc.com.cn </a></p>
<p>电话服务转账: <strong>95588 </strong></p>
</div>
<div id="footer">联系我们: <a href="mailto:demo@demo.com">demo@demo.com</a></div>
</div>
</body>
</html>
来源：《精通CSS+DIV网页样式与布局》
