height:250px;
width:60%;
border:10px solid #000000;
background-color: #FFFF33;
float:right;
margin:10px;
}
2 float屬性用來設置流布局，也就是象水一樣自動流動。如果是左邊的話 left就會自動和最左邊的
一個對象的旁邊靠齊
3 position用來設置位置的，有相對relative和 絕對absolute
4 margin是用來設置對象和外面的對象之間的距離的 也就是對象的邊外延
.cent{
margin-top:100px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
}
左右設置為auto則為居中 浏覽器在判斷的時候會將左右邊界設置為相同距離所以會居中
順序是上右下左
4 CSS的盒模型，對象的真實寬度是由對象的寬度+左右填充+左右邊框+左右邊界構成。
CSS注釋只能用/**/
6 2列自適應布局
.left
{
float:left;
height:250px;
width:30%;
background-color:#000000;
border:1px solid:#FFFF33;
position:relative;
}
.right
{
height:250px;
background-color:#CCCC00;
margin-left:32%;
}
多應用與blog系統中，這個好 正好拿來用用
7 2列左邊固定 右邊寬度自適應
在right中不設置任何右邊寬度的值
.left
{
float:left;
height:250px;
width:120px;
background-color:#000000;
border:5px solid:#FFFF33;
margin:10px;
}
.right
{
border:5px solid:#000000;
background-color:#FF0000;
margin:10px;
height:250px;
}
8 2列固定寬度居中
需要一個嵌套的div
<div id="cent" class="cent">
<div id="left" class="left">此處顯示新 left 標簽的內容</div>
<div id="right" class="right">此處顯示新 Div 標簽的內容</div>
</div>
.cent
{ margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
width:490px;
}
.left
{
float:left;
height:250px;
width:100px;
background-color:#000000;
border:10px solid:#FF0000;
}
.right
{
float:left;
height:250px;
width:350px;
background-color:#FF0000;
border:10px solid:#000000;
}
9 3列固定寬度布局內容自動調整
缺陷： 浏覽器縮的太小的話就難看了
.left
{
float:left;
height:250px;
width:200px;
background-color:#000000;
border:10px solid:#FF0000;
}
.cent
{
border:10px solid:#FFFF33;
height:250px;
width:480px;
background-color:#FF0000;
float:left;
}
.right
{
float:left;
height:250px;
width:200px;
background-color:#FF0000;
border:10px solid:#000000;
}
10 3列固定列寬度布局 內容也固定了
浏覽器怎麼變內容都不會變
.left
{
float:left;
height:250px;
width:200px;
background-color:#000000;
border:10px solid:#FF0000;
position:absolute;
left:0px;
top:0px;
}
.cent
{
border:10px solid:#FFFF33;
height:250px;
width:440px;
background-color:#FF0000;
position:absolute;
margin-right:220px;
margin-left:220px;
margin-top:0px;
}
.right
{
float:left;
height:250px;
width:200px;
background-color:#FF0000;
border:10px solid:#000000;
position:absolute;
left:680px;
top:0px;
}
body
{
margin:0px 0px 0px 0px;邊界
padding:0px 0px 0px 0px;填充就是距離內部的多遠 把哪個部分填充掉
}
11 頂行三列式布局
.left
{
float:left;
height:250px;
width:200px;
background-color:#000000;
border:10px solid:#FF0000;
position:absolute;
left:0px;
top:120px;
}
.cent
{
border:10px solid:#FFFF33;
height:250px;
width:440px;
background-color:#FF0000;
position:absolute;
margin-right:220px;
margin-left:220px;
margin-top:10px;
}
.right
{
float:left;
height:250px;
width:200px;
background-color:#FF0000;
border:10px solid:#000000;
position:absolute;
left:680px;
top:120px;
}.top
{
background-color:#0033CC;
border:10px solid:#000000;
height:100px;
margin-top:0px;
margin-right:0px;
margin-left:0px;
}
12 一個對象的高度是否使用白分比顯示，取決於對象的父級對象。
例如<body>
<div class="div1">此處顯示新 Div 標簽的內容</div>
</body>
.div1 {
height:100%;
background-color:#FF0000;
}
高度就不能顯示出100%
只有用了這個樣式表後
body
{
margin:0px 0px 0px 0px;
height:100%;
}才能顯示出100%
13 在使用div嵌套的時候，如果外層對象的尺寸大小不允許被改變，就是說寬和高是固定的 這個時候使用填充的話如果左和上都填充20px就相當於把外層對象的寬和高都增加了20px，這時候裡面對象就可能不處在中間位置了，改變的辦法是把外層對象高和寬都減少20px;還有一種辦法是設置內層對象的邊界值，不設置外層對象的填充值
14 CSS導行欄動態菜單
<div id="globalLink"> <a href="#" id="gl1" class="glink" onmouSEOver="ehandler
(event,menuitem1);">global link</a></div>
<div id="subglobal1" class="subglobalNav"> <a href="#">subglobal1 link</a> | <a
href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a>
| <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
link</a> </div>
CSS如下
.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}
a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}
Javascript如下
<script type="text/Javascript">
<!--
var menuitem1 = new menu(7,1,"hidden");
var menuitem2 = new menu(7,2,"hidden");
var menuitem3 = new menu(7,3,"hidden");
var menuitem4 = new menu(7,4,"hidden");
var menuitem5 = new menu(7,5,"hidden");
var menuitem6 = new menu(7,6,"hidden");
var menuitem7 = new menu(7,7,"hidden");
// -->
</script>
<script type="text/Javascript">
<!--
var time = 3000;
var numofitems = 7;
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = allitems;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event)
{
if ((event.clientY <48)||(event.clIEntY > 107)){
clIEntY 事件屬性返回當事件被觸發時鼠標指針向對於浏覽器頁面（客戶區）的垂直坐標。用的時候需要修改
這個數值
for (var i=1; i<= numofitems; i++){
var shutdiv =eval(''menuitem''+i+''.thediv'');
shutdiv.style.visibility=''hidden'';
}
}
}
// -->
應用的時候注意在body裡面添加方法closesubnav
