從psd檔案到html

2021-09-26 23:05:41 字數 1404 閱讀 8329

css檔案，html結構，多考慮

良好的**規範和命名

巧妙屬性和元素配合，還有沒有更好的方案

相容和細節的處理（放大100%以上，才能看出端倪）

css hack處理

公共部分

公共部分 

section.section-main>.inner-center
section.section-main>.inner-center


aside.aside-left


main.main>.content


section.section-main>.inner-center


aside.aside-left


main.main>.content


aside.aside-right


.inner-center
所有寬度都以畫素為單位，這種布局最簡便，適用於一些本身內容比較少的頁面。

無論瀏覽器視窗多大，它們的尺寸總是不變，無法充分利用可用空間。此時可以使用

min-width: 980px
配合

min-width
的使用，頁面部分內容如三欄布局可以使用百分比來設定寬度(流式布局)，實現當瀏覽器視窗寬度小於設計稿寬度時，允許出現橫向滾動條，頁面內容寬度保持不變，但是當瀏覽器視窗寬度大於設計稿寬度時，頁面內容的寬度保持和瀏覽器視窗寬度一致

連線 以中劃線連線，如.item-img

使用兩個中劃線表示特殊化，如.item-img.item-img--small表示在.item-img的基礎上特殊化

js操作的類統一加上js-字首

不要超過四個class組合使用，如.a.b.c.d

乙個類名，不要超過三個單詞的連線。

主體結構命名前加上該頁的命名，如index-banner，index-main。

public-header,article-header，index-banner,index-panel
通過層級關係特殊化類，一般子元素接著父元素的最後乙個單詞（繼承式）

ul.card-list 


li.list-item 


a.item-img-link>img.item-img 


h3.item-tt>a.item-tt-link 


p.item-text

psd轉換為html案例

overflow hidden overflow hidden white space nowrap text overflow ellipsis width 0 height 0 border left 10 px solid transparent border right 10 px soli...

psd做成HTML相關參考頁面

前端製作 美工 是怎麼把psd製作成頁面的？美工怎麼做的我不清楚，因為我是做前端的，我就從前端這個角度說吧。首先拿到psd，先分析哪些是要匯出為的，哪些是可以自己用 完成的。將全部匯出，要做成雪碧圖的都做成雪碧圖 然後直接開始碼 在谷歌瀏覽器或者火狐中測試，不要用ie做第一次測試。1.對照設計圖，寫...

從ML到HTML到XHTML再到XML

1.w3c 全球資訊網聯盟 world wide web consortium 2 ml markup language 標記語言 1.標識性置標語言 外語 presentational markup 是在編碼過程中，標記文件的結構資訊。例如，在文字檔案中,檔案的標題可能需要用特定的格式表示 居中，...