div css左右浮動布局的方法是什么

這篇文章主要介紹“div css左右浮動布局的方法是什么”，在日常操作中，相信很多人在div css左右浮動布局的方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”div css左右浮動布局的方法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

需要div+css布局案例效果圖（縮?。?/p>

一、DIVCSS5實例布局技術點說明 

1、圖片切出說明：首先切好左邊logo圖片，右邊廣告圖片（切圖注意不影響圖片質(zhì)量情況盡量寬度高度尺寸切小）。
2、采用float:left和float:right布局：一般遇到內(nèi)容靠左和靠右的，通常使用css float浮動布局
3、logo布局：一般logo圖片布局時作為css背景圖片布局，使用h2標簽，對應h2標簽內(nèi)容打上網(wǎng)站名稱（公司名稱等）文字，并且加上超鏈接a標簽，這時利用CSS縮進隱藏文字同時超鏈接不丟失任然生效（這樣布局有利于搜索引擎優(yōu)化哦）。
4、右側廣告圖片：直接在html中使用img標簽即可。

二、要使用CSS樣式單詞列表   

1、height 設置高度
2、width 設置寬度
3、float 設置浮動（float:left、float:right）
4、overflow清除浮動(overflow:hidden)
5、margin 設置布局居中(margin:0 auto)
使用什么樣式均由美工圖中分析得出而非想設置什么樣式就設置什么樣式。

三、css實例    

1、首先切出左邊LOGO圖片和右邊廣告圖片（這里不再切圖演示，在VIP教程有切圖教程，相信參加DIVCSS5培訓同學在課堂已經(jīng)學會切圖）

切出兩張圖片素材

2、引人DIVCSS5初始化模板，在此基礎上進行實例布局

3、將圖片拷貝入模板images文件夾（共2張）

4、因為布局靠左靠右，所以肯定有一個外層盒子，我們命名為#header（html5 header標簽），從美工圖分析（軟件分析）得出寬度為700px，布局居中。

5、在模板基礎上布局HTML代碼

<div id="header">     <h2 id="logo"><a href="http://www.億速云.com/">DIVCSS5網(wǎng)站</a></h2>     <div class="right-ad"><img src="images/rt-ad.jpg" /></div> </div>

以上設置<div id="header"></div>布局居中，<h2 id="logo"><h2>設置布局左側logo，將圖片作為背景，<div class="right-ad"></div>設置靠右div盒子裝廣告圖片。

6、在模板基礎上布局CSS代碼

#header{ margin:15px auto; width:700px; overflow:hidden} /* DIVCSS5設置布局居中，寬度和具有清除浮動功能overflow:hidden，不設置高度 */ h2#logo{ float:left; height:70px; background:url(logo.jpg) no-repeat; width:174px} h2#logo a{ display:block; width:100%; height:100%; text-indent:-9999px} /* DIVCSS5設置text-indent隱藏文字， display:block; 讓a形成塊以便同時設置寬度高度生效 */ .right-ad{float:right} /* 只需要設置靠右即可 */

7、布局效果截圖

css div布局案例截圖

到此，關于“div css左右浮動布局的方法是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>