DIV+CSS(1)

由此我們就要寫此頁面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.divcss5.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, h1, h2, h3, h4, h5, h6, 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源代碼。
以上是我們今天講解的css布局_div css布局重要及說明,希望對您有幫助。以上案例未詳解希望你親自多實踐,只有實踐才能練好技術。