應該怎樣進一步學習寫樣式_html/css_WEB-ITnose

回復討論(解決方案)

把小塊放大就是大塊，大塊里面再寫小塊。
頁面就是有無數(shù)個小塊組成的！

注意塊與塊之間的邏輯，通過做實際的項目來練習，你會發(fā)現(xiàn)過程中會出現(xiàn)很多問題，然后通過自己上網(wǎng)查找，或者問別人，慢慢的你就會發(fā)現(xiàn)你寫整個頁面也得心應手了。

一個大頁面，一般是分幾個功能塊
比如：頁頭、頁腳、中間有幾屏
先分大塊，再在指定了寬高的區(qū)域中定小塊。

比如頁面寬度都是1000px那么定義一個樣式： .main{width:1000px;margin:0 auto;}
然后頁面中間的幾屏，分成幾個大div，定義：
css有一種用法是這樣，就是可以在class里面加多個css類名： ， 你用.main定義統(tǒng)一的寬度和居中，用第二個類名，定義這一個小區(qū)塊的最外層元素，以免頁面元素過多，造成沖突。
.container-aa .layout-left{width:700px;float:left;}
.container-aa .layout-right{width:300px;float:left;}

左側(cè)內(nèi)容區(qū)
右側(cè)內(nèi)容區(qū)

然后就可以往下繼續(xù)寫里面的內(nèi)容
通常只指定寬度，不指定高度，由內(nèi)容往下?lián)胃叨取?

在劃分小塊，或者切割小容器盒子時，注意最好切成：1行多列，或者多行1列的方式，比較容易控制。
當然，如果是圖片冊那種規(guī)矩的多行多列，正常作就行了。


除了上面的布局外，你還需要寫一些初始reset樣式
body,div,ul,li,h1,h2,h3,h4,h5,h6,p,form,img{margin:0;padding:0;border:0;}
body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,address,code,del,dfn,em,img,ins,strike,strong,dl,dt,dd,ol,ul,li,form,label,fieldset,legend{margin:0;padding:0;border:0;}
div,span,a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:none;}
body{font-family:'Microsoft YaHei','微軟雅黑';}
a{color:#666;text-decoration:none;}
a:link{color:#666;}
a:visited{color:#666;}
a:hover, a:active{color:#ff7200;outline:0;}

還有一些“零件”樣式，比如：
.etc{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} /*省略號*/
.wrap{word-wrap:break-word;}/*強制換行*/
.nowrap{white-space:nowrap;}/*禁止換行*/
.clearfix:after {content:'';display:block;height:0;overflow:hidden;clear:both;}

通常先畫個布局圖，然后把各塊大小弄上，最后潤色完善。
雖然用DW畫布局很方便，但我還是喜歡用筆畫出來，直接上碼。

一點一點寫，用dom結(jié)構(gòu)的最小節(jié)點 去寫，每個都寫 最后放到一起就是一個大頁面的

學著手寫，多做幾個網(wǎng)站就熟悉了！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com