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網頁樣式與佈局 》