效果
語法: 類選擇器名稱 { }
語法:標簽名 { }
常見的行內元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等,其 中<span>是最典型的行內元素
行內元素的特點:
1、相鄰行內元素在一行上,一行可以顯示多個。
2、高度,寬度直接設置無效
3、寬度默認是本身內容的寬度
4、行內元素只能容納文本或其它行內元素
注意:
1、鏈接里不能再放其它鏈接
2、特殊情況<a>鏈接里面可以放塊級元素,但是給<a>轉換一下塊級模式最安全。
常見的塊元素有<h1>--<h6>,<p>,<div>,<ul>,<ol>,<li>等,其中<div>是最典型的塊元素
塊元素的特點:
1、獨占一行。
2、高度,寬度,外邊距以及內邊距都可以控制。
3、寬度默認是容器(父級容器的100%)
4、是一個容器及盒子,里面可以放行內或者塊級元素
注意:
1、文字類的元素內不能使用塊級元素
2、<p>標簽主要用于存放文字,因此<p>里面不能放塊級元素,特別是不能放<div>
3、同理,<h1>--<h6>等都是文字類塊級元素,里面也不能放其它塊級元素
iv+css排版是最新的網頁排版理念,完全有別舊的排版方式(比如說table排版)。首先在頁面整體上進行div標簽劃分內容區域,然后再用css進行定位,最后再對相應的區域添加內容。div+css這種排版十分簡單,而且相對容易操作。下面為大家介紹css+div布局方法。
1、用div將頁面劃分
用div將頁面劃分這是對網站頁面排版第一步,網頁整體框架確定后才能進行下一步。主要是用div劃分出各個內容區域,以最簡單的頁面框架為例,頁面一般有banner、主體內容、菜單主導航、頁面底部(footer又叫腳注)幾個部分構成,每個部分分別由自己的id來標識。如圖所示:
2.設計各內容塊的位置
頁面內容確定后,則需要根據內容本身去考慮夜班的版型,例如菜單、雙欄、左右中,一般小型網站采用都是兩欄,大型網站和一些門戶網站大都使用左中右三欄,一般是建議使用兩欄。等內容塊確定后就可以使用css直接定位了。
3、用css定位
把頁面框架確定后就可以css對各個設計的內容塊進行定位,然后對各個塊進行整體規劃,最后再添加內容。網頁帶入如下
網頁效果
上面的排版是比較簡單的,用了兩次浮動(float)定位、5次居中對齊、1次清除浮動。banner區域一般放置圖片,導航放置都是鏈接可以直接放a標簽或者是ul標簽、h2標簽套用a標簽,網站主體內容一般放置,鏈接(ul或者ol標簽套用a標簽)、圖片、內容摘要(p標簽套用a標簽)。最后給大家留一個作業上面的代碼最少可以精簡3處,你能找出來幾處嗎?
關于css+div布局方法先聊到這,有興趣可以自己動手實踐一下,每天學習一個知識點,每日寄語-“寧可辛苦一陣子,不要苦一輩子。”
js代碼:
<script type="text/javascript">
window.onload=window.onresize=function(){
if(document.getElementById("mm2").clientHeight < document.getElementById("mm1").clientHeight){
document.getElementById("mm2").style.height=document.getElementById("mm1").offsetHeight + "px";
}else{
document.getElementById("mm1").style.height=document.getElementById("mm2").offsetHeight + "px";
}
}
</script>
這里只計算本身的高度,不含邊框、內外邊距的因素
這個方法,很多大網站在使用,如163,sina等。這個方法,很多大網站在使用,如163,sina等。原理是利用了背景圖的repeat-y重復,從而達到看起來左右一致的效果
HTML代碼:
<div id="wrap">
<div id="column1">這是第一列</div>
<div id="column1">這是第二列</div>
<div class="clear"></div>
</div>
CSS代碼:
#wrap{ width:776px; background:url("bg.gif") repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
HTML代碼:
<div id="container">
<div id="leftRail">
<p>Left Sidebar</p>
<p>Left Sidebar</p>
<p>Left Sidebar</p>
<p>Left Sidebar</p>
</div>
<div id="center"><p>Center Column Content</p></div>
<div id="rightRail"><p>Right Sidebar</p></div>
</div>
CSS代碼:
body{
margin:0 100px;
padding:0 200px 0 150px;
}
#container{
background-color:#0ff;
float:left;
width:100%;
border-left:150px solid #0f0;
border-right:200px solid #f00;
margin-left:-150px;
margin-right:-200px;
display:inline; /* So IE plays nice */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:100%;
margin-right:-100%;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
原理:
作者: Alan Pearce
原文: Multi-Column Layouts Climb Out of the Box
地址: http://alistapart.com/articles/multicolumnlayouts
我們都了解擁有相同高度的布局是很麻煩的事,有很多相關資料提到過相關設計方法,所以在這我就不多做解釋了。
最近在研究一個兩個欄目的動態布局,每個欄目背景不同。我立刻想起了Dan Cederholm的Faux Columns,但我仍然需要一個動態布局的方法。我又看了完美布局的文章One True Layout,但是有很多bug,需要許多注釋和程序。甚至考慮用JavaScrip來實現欄目始終保持同一高度,但是不行。絕望之余,幾乎要用table布局,不,一定還有更好的方法。我想著一個問題“盒子外面是什么”,border!如果我可以使“sidebar”(或"rail")的div相對與“content”的div浮動,就可以實現多欄目相同高度。這個方法在很多地方介紹過:Douglas Livingstone的introduced ,Holly的extended John Bergevin的Position Is Everything。由one true layout的方法發展而來,用更簡潔清楚的代碼 實現了兩個欄目的動態變化。
給content div右加border,顏色寬度和rail一樣,并相對于rail浮動。Margin:-150px;使rail div移到margin騰出的空間。如果content div變得比rail div 高,border隨content div變高。視覺效果就是好像rail div也在變高。container的顏色設定和content div一樣,如果rail div達到最高,container隨之變高,這樣就給我們content變高的效果。
看看效果。See it in action 。試試改變字體大小,布局隨之變化。
3個欄目:3個顏色
3個欄目的布局有點不同:直接給container div加border.
中間的欄目margin-right:-150px 使左邊的rail div始終沿中間欄目的左沿浮動,使旁邊欄目在正確的位置顯示。還有一些方法可以實現,但這個方法最好,更易實現流動布局(動態布局)。
因為邊欄在container div外,浮動在border上。使用overflow: hidden使之隱藏:IE不支持,Firefox可以實現。邊欄不需要設置顏色,它會于container div的顏色保持一致。
流動布局
了解定寬布局之后,我嘗試把這個方法用到動態布局中去。邊欄仍然需要設置固定寬度,很多瀏覽器不支持border:**%的屬性。但是我們可以使中間欄目自適應。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。