-
結構和表現分離查看全部
-
學習完成查看全部
-
一開始在頭標簽設置了overflow：hidden清除了所有浮動，導致demo3,溢出的頭像寫不出來，，，，看來浮動也不能隨意清除查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>編程挑戰-圖片背景</title> <style type="text/css"> body{ margin:0;} div{background:#460E29;width:700px;padding:20px} img{padding:1px 25px 37px 25px;margin-right:10px;background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);} </style> </head> <!-- 存在img標簽，并且img標簽設置了底圖，底圖為自動鋪滿 通過分析得知：img標簽本身src的圖片尺寸小于底圖的圖片尺寸，這就導致底圖被img本身的圖片壓住了，而圖片是沒透明度的 所以底圖無法顯示。底圖是帶邊框花紋的，邊框內部大小跟img圖片大小相同，所以我們對img標簽設置padding屬性，給img內部4個方向填充一個邊框花紋的距離，這樣底圖的邊框花紋就能顯示出來。我們要知道，填充區域是空白的距離。 盒子模型五個層次的上下關系，從上到下依次為border content&padding background-image background-color margin 由于沒有為content設置內邊距，所以content覆蓋了盒子內部，當設置了padding之后，就露出了部分被遮擋的內容 --> <body> <div><img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /> <img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /> <img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /> <img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /> </div> </body> </html>查看全部
-
在網頁制作中，面對設計圖，網頁制作人員一般遵循原則: 先考慮設計圖中的文字內容和內容模塊之間的關系，重點放在編寫html結構和語義化，然后考慮布局和表現形式。查看全部
-
結構和表現分離個人理解： 通過案例感覺 這個不僅僅是指將結構和對應的表現通過html和單獨的css樣式進行拆分設計這么簡單，更重要的是，我們能夠通過頁面的圓形設計圖，提煉出盡可能少的結構和恰當的表現配合使用，從而達到減少訪問的資源，優化代碼的目的。 一句話，能用表現的，就不要使用不必要的機構。查看全部
-
html：結構 css：表現 javascript：行為查看全部
-
這個。。。不明白啊。。。查看全部
-
所以在做設計圖的時候，也可以先單純的考慮需要搭建的主要內容，以及放的位置，然后再想他的樣式風格。力求在不改變html結構的情況下用css調整想要的效果查看全部
-
借鑒： 1、拿到一個網頁的設計圖時，首先關注網頁的文字內容及內容模塊之間的關系，把重點放在編寫html語義化的代碼上，而不要過多的考慮設計圖上的布局樣式，等html按內容編寫完以后再考慮樣式如何實現，力求不改變樣式結構的基礎上完成要求的視覺效果。語義化的主要目的就是讓大家直觀的認識標簽(markup)和屬性(attribute)的用途和作用！ 2、利用margin屬性來移動設置html結構.margin可以是負值，通過負值，可以使該內容進行移動！實現四個方向的移動。在結構（HTML）和樣式（css）中，可以先把內容通過HTML寫出來，再利用margin移動位置，實現排版，降低樣式和結構的耦合，并且減少代碼。 排行榜制作 <div class="rank" <h5>排行榜</h5> <h6>根據網絡投票</h6> 設置<h5>背景圖標 在之后設置<h6> margin:25px 0 0 50px(根據右外邊距移到 排行榜下margin值設置為負值，可使元素往反方向位移）查看全部
-
結構與表現的分離： text-indent：使文本縮進到想要的位置。 只是一行簡短文字數字，可以用段落排版的思路來“定位”，即用text-indent：**px 縮進來達到目的。 如果設置一個極小的負值，則可以在瀏覽器上隱藏文本，卻又能被搜索引擎搜索到查看全部
-
初級思路：div.main -> div.left{float:left;} -> img -> div.right{float:left;} -> h3+p 中級思路：div.main -> img{float:left;} -> div.right{float:left;} -> h3+p 高級思路：div.main{margin-left:100px;} -> img{margin-left:-100px;float:left;} -> h3 -> p 高級思路：先按結構和語義編寫代碼，然后進行css樣式設置，減少HTML與CSS契合度（層數越少越好）查看全部
-
在網頁制作中，面對設計圖，網頁制作人員一般遵循原則: 先考慮設計圖中的文字內容和內容模塊之間的關系，重點放在編寫html結構和語義化，然后考慮布局和表現形式。查看全部
-
所以在做設計圖的時候，也可以先單純的考慮需要搭建的主要內容，以及放的位置，然后再想他的樣式風格。力求在不改變html結構的情況下用css調整想要的效果查看全部
-
text-indent文本縮進查看全部
舉報
0/150
提交
取消