CSS+DIV-小型工做室

17.css

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;
}

17.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 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>

page1.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>

page2.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>

page3.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>

page4.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>

来源：《精通CSS+DIV网页样式与布局 》