|
2008/05/20, Tuesday |
|
|
 |
css網頁設計文字多行多列設定
我們在做網頁設計的時候，通常對於文字的規範，並每有一定的規範，因此讓網頁的文字的編排控制，產生不一至的成果，如果能有一個統一的文字規範，網頁設計的文字效果也會比較一至。以下是規範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>
|
|
 |
|
