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

回復討論(解決方案)

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

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

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

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

左側內容區
右側內容區

然后就可以往下繼續寫里面的內容
通常只指定寬度，不指定高度，由內容往下撐高度。

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


除了上面的布局外，你還需要寫一些初始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結構的最小節點 去寫，每個都寫 最后放到一起就是一個大頁面的

學著手寫，多做幾個網站就熟悉了！

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