溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“DIV CSS布局的方法”，在日常操作中，相信很多人在DIV CSS布局的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”DIV CSS布局的方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
布局知識：
DIV+CSS布局，CSS布局是網頁html通過div標簽+css樣式表代碼開發制作的（html）網頁的統稱。
div+css布局好處：便于維護，有利seo（谷歌將網頁打開速度作為排名因素及SEO因素），網頁打開速度更快，符合web標準等。
制作div+css網頁前思考布局：
首先我們拿到一張網頁美工圖片我們將從上下、上中下、左右、上中（中包括左右）下布局框架來思考。
下面通過一個實例講解下CSS布局分析，我們以DIVCSS5列表頁面分析css布局：
首先我們可以分析出我們DIV CSS布局重構此頁面結構框架，我們可以看出是 上、中、下結構，其中又包括了左右結構。
由此我們就要寫此頁面CSS和html時候就先從上到下 從外到內原則寫css與html。
我們首先建一個web的文件夾并在此文件夾里新建html頁面命名為index.html ，css文件命名為index.css。這里有個訣竅就是可以導入模板方式來建css與html初始頁面，然后將css文件引用到html，也就是我在模板里介紹的css模板，再在CSS模板的基礎上再寫再添加css。
以下是index.html 的html代碼：
| 以下為引用的內容： <!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=gb2312" /> <title>css布局案例實驗頁面-www.億速云.com.cn</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">我是頭部（上）</div> <div id="centers"> <div class="c_left">我是中的左</div> <div class="c_right">我是中的右</div> <div class="clear"> </div> </div> <div id="footer">我是底部（下）</div> </body> </html> |
index .css的CSS代碼如下：
| 以下為引用的內容： body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h2, h3, h4, h5, h6, h7, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;} ol, ul ,li{list-style: none;} img {border: 0;} body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;} .clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;} .clear{clear:both;height:1px; margin-top:-1px; width:100%;} .dis{display:block;} .undis{display:none;} /*此上面代碼是初始CSS模板，下面是新寫CSS布局框架代碼*/ #header ,#centers ,#footer{ width:100%; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;} #header{ height:68px; border:1px solid #CCCCCC; } #centers{ padding:8px 0;} #footer{ border-top:1px solid #CCCCCC; background:#F2F2F2;} #centers .c_left{ float:left; width:230px; border:1px solid #00CC66; background:#F7F7F7; margin-right:5px; } #centers .c_right{ float:left; width:500px;border:1px solid #00CC66; background:#F7F7F7} |
你可以考出此兩段代碼新建個試試，我們就布局出以上美工頁面CSS和html框架，然后根據各內容繼續添加CSS與html源代碼。
到此，關于“DIV CSS布局的方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
