經(jīng)典款:960 gird

柵格化沒有統(tǒng)一標(biāo)準(zhǔn),根據(jù)實(shí)際需要建立就好了,數(shù)值盡量使用6或8的倍數(shù)
隨科技發(fā)展,現(xiàn)如今小屏電腦占比愈發(fā)減少,設(shè)計(jì)圖推薦使用1200的寬度進(jìn)行設(shè)計(jì)

自" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 「網(wǎng)頁設(shè)計(jì)」淺談網(wǎng)頁柵格化設(shè)計(jì)

「網(wǎng)頁設(shè)計(jì)」淺談網(wǎng)頁柵格化設(shè)計(jì)

時(shí)間:2023-10-11 23:12:02 | 來源:網(wǎng)站運(yùn)營

時(shí)間:2023-10-11 23:12:02 來源:網(wǎng)站運(yùn)營

「網(wǎng)頁設(shè)計(jì)」淺談網(wǎng)頁柵格化設(shè)計(jì):

柵格化布局

設(shè)計(jì)參數(shù)
經(jīng)典款:960 gird

柵格化沒有統(tǒng)一標(biāo)準(zhǔn),根據(jù)實(shí)際需要建立就好了,數(shù)值盡量使用6或8的倍數(shù)
隨科技發(fā)展,現(xiàn)如今小屏電腦占比愈發(fā)減少,設(shè)計(jì)圖推薦使用1200的寬度進(jìn)行設(shè)計(jì)

自適應(yīng)與響應(yīng)式的區(qū)別

簡單來說,自適應(yīng)的界面變化再刷新后才會(huì)變化;響應(yīng)式的話,改變?yōu)g覽器邊框的時(shí)候就頁面布局就會(huì)隨之改變。

響應(yīng)式布局的參數(shù)

設(shè)計(jì)前最好確定前端同學(xué)使用的哪款框架,如Bootstrap(寬480/768/992/1200,12列)
Bootstrap的可視化布局工具:https://www.bootcss.com/p/layoutit/,感興趣的可以試試
Bootstrap 擴(kuò)展閱讀:https://blog.csdn.net/learning_web/article/details/89638933


命名規(guī)范

(僅作參考,設(shè)計(jì)前最好跟前端統(tǒng)一命名)

1. 網(wǎng)站設(shè)計(jì)及基本框架結(jié)構(gòu)

1.1 Container
“container“ 就是將頁面中的所有元素包在一起的部分,這部分還可以命名為: “wrapper“, “wrap“, “page“.

1.2 Header
“header” 是網(wǎng)站頁面的頭部區(qū)域,一般來講,它包含網(wǎng)站的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).

1.3 Navbar
“navbar“等同于橫向的導(dǎo)航欄,是最典型的網(wǎng)頁元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.

1.4 Menu
“Menu”區(qū)域包含一般的鏈接和菜單,這部分還可以命名為: “subNav “, “l(fā)inks“,“sidebar-main”.

1.5 Main
“Main”是網(wǎng)站的主要區(qū)域,如果是博客的話它將包含的日志。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。

1.6 Sidebar
“Sidebar” 部分可以包含網(wǎng)站的次要內(nèi)容,比如最近更新內(nèi)容列表、關(guān)于網(wǎng)站的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.

1.7 Footer
“Footer”包含網(wǎng)站的一些附加信息,這部分還可以命名為: “copyright“.

2. 注意事項(xiàng)

2.1盡量考慮為元素命名其本身的作用或”用意”,達(dá)到語義化。
不要使用表面形式的命名.
如:red/left/big等。

2.2組合命名規(guī)則:[元素類型]-[元素作用/內(nèi)容]
如:搜索按鈕: btn-search
登錄表單:form-login
新聞列表:list-news

2.3 涉及到交互行為的元素命名
凡涉及交互行為的元素通常會(huì)有正常、懸停、點(diǎn)擊和已瀏覽等不同樣式,命名可參考以下規(guī)則:
鼠標(biāo)懸停::hover 點(diǎn)擊:click 已瀏覽:visited
如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited

3、常用命名匯總

頁頭:header
登錄條:loginbar
標(biāo)志:logo
側(cè)欄:sidebar
廣告條:banner
導(dǎo)航:nav
子導(dǎo)航:subNav
菜單:menu
子菜單:subMenu
下拉菜單:dropMenu
工具條: toolbar
表單:form
欄目:column
箭頭:arrow
搜索:search
搜索按鈕:btn-search
滾動(dòng)條:scroll
內(nèi)容:content
標(biāo)簽頁:tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標(biāo)題:title
鏈接:links
頁腳:footer
服務(wù):service
熱點(diǎn):hot
新聞:news
下載:download
注冊:register
狀態(tài):status
按鈕:btn
投票:vote
合作伙伴:partner
版權(quán):copyright
網(wǎng)站地圖: sitemap







關(guān)鍵詞:設(shè)計(jì),淺談

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉