室內設計
 
尚佶網頁設計主選單
網頁美編設計製作
行動手機‧行動電視
網頁設計
網頁設計
最新訊息:
  網頁設計全球效應
  網頁設計的行銷效用?
作品設計歷程:
  昇華文件櫃有限公司
Shen Hua Filing Cabinet
File Cabinet
  戀戀紅葡萄酒酒莊 酒莊
  美和美吊扇公司
  HCB AUTO TOOLS
  鳳凰企業社
  國立中正大學行銷創意研究中心
  銘輝毛刷有限公司
  大業國中 嘉義市 97 海洋教育計畫
  鳳凰冰涼巾公司
  進泉瓜子
  金鴻勝酒廠
  集順汽車椅套
  嘉義市97教學卓越計畫
  鉅祥工具開發有限公司
更多作品 >>
 

 

 

 

 

 

 

 

filing cabinet file cabinet 新恩嘉義神經內科 新恩嘉義神經內科

 

 
 
網頁設計+創意=100%網站 arrow 網頁設計資訊 arrow css網頁設計文字多行多列設定   
css網頁設計文字多行多列設定 E-mail
2008/05/20, 週二

18.jpg

網頁美編

css網頁設計文字多行多列設定<hr>-網頁水平線-↑向上

我們在做網頁設計的時候,通常對於文字的規範,並每有一定的規範,因此讓網頁的文字的編排控制,產生不一至的成果,如果能有一個統一的文字規範,網頁設計的文字效果也會比較一至。以下是規範css的網頁設計文字的多行多列設定:

<!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 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: #000000;
}
#head{
  margin-right:auto;
  margin-left:auto;
  width:770px;
  height:80px;
  background:#A66300;
}
.nav{
  clear:both;
  margin-right:auto;
  margin-left:auto;
  width:770px;
  height:25px;
  line-height:25px;
  background:#415800;
}
#main_box{  /*網頁設計正文區大容器*/
  width:770px;
  margin-right:auto;
  margin-left:auto;
  background:#EFEFEF;
}
.row{  /*定義每行*/
  width:100%;
  clear:both;
}
.left,.right{
  float:left;
  width:150px;
  background:#A6A6A6;
}
.right{
  float:right;
}
.left2{    /*用在四列佈局上*/
  float:left;
  width:235px;
  background:#333;
  color:#FFF;
}
.left3{  /*用在五列佈局上*/
  border-right:1px solid #FFF;
  width:153px;
  background:#888;
  float:left;
}
.middle{
  width:470px;
  background:#6699CC;
  float:left;
}
#foot{
  margin-right:auto;
  margin-left:auto;
  width:770px;
  background:#A66300;
  clear:both;
}
-->
</style>
</head>
<body>
  <div id="head"></div>
  <div class="nav">nav</div>
  
  <!--網頁設計內容區開始-->
  <div id="main_box">
    <!--三列左側-->
    <div class="row">
      <div class="left">
        <p>.left{<br />
        float:left;<br />
        width:150px;<br />
        background:#A6A6A6;<br />
        }</p>
     </div>
      
      <div class="middle">
        <p>.middle{<br />
        width:470px;<br />
        background:#6699CC;<br />
        float:left;<br />
        }</p>
      </div>
      
      <div class="right">
        <p>.right{ <br />
        float:right;<br />
        width:150px;<br />
        background:#999;<br />
        } </p>
      </div>
    </div>
    <!--三列結束-->
    <div class="nav">nav</div>
    <!--四列開始-->
    <div class="row">
      <div class="left2">
       <p>四列的第一列</p>
       <p> </p>
     </div>    
      <div class="left">
        <p>四列的第二列</p>
        <p> </p>
      </div>
      <div class="left2">
       <p>四列的第三列</p>
       <p> </p>
      </div>
      <div class="right">
       <p>四列的第四列</p>
       <p> </p>
      </div>
    </div>
    <!--四列結束-->
   <div class="nav">nav</div>
    <!--五列開始-->
    <div class="row">
      <div class="left3">
       <p>這是網頁設計五列的第一列</p>
       <p> </p>
       <p> </p>
      </div>
      <div class="left3">
       <p>這是五列的第二列</p>
       <p> </p>
       <p> </p>
      </div>
      <div class="left3">
       <p>這是五列的第三列</p>
       <p> </p>
       <p> </p>
      </div>
      <div class="left3">
       <p>這是五列的第四列</p>
       <p> </p>
       <p> </p>
      </div>
      <div class="left3">
       <p>這是五列的第五列</p>
       <p> </p>
       <p> </p>
      </div>                        
    </div>
  </div>
  
  <!--網頁設計尾部區-->
  <div id="foot">
    #foot{<br />
    margin-right:auto;<br />
    margin-left:auto;<br />
    width:770px;
    <br />
    background:#A66300;<br />
    clear:both;<br />
    }
  </div>
  <!--End-->
</body>
</html>

 

網頁美編
網頁美編
< 上一頁   下一頁 >
top_18.jpg
 
 
尚佶網頁設計 2011 © copyright 版權所有.All rights reserved.
 
©2011 Sungie