㈠ 前端拿到UI設計的圖 如何開始布局設計
前端拿到UI設計的圖 開始布局設計的方法
布局是頁面構成的前提，是後續展開交互和視覺設計的基礎。設計者在選擇布局之前，需要注意以下幾點原則：
明確用戶在此場景中完成的主要任務和需獲取的決策信息。
明確決策信息和操作的優先順序及內容特點，選擇合理布局。
一、常用布局
網站展示頁、Dashboard、列表頁、表格頁、詳情頁、表單頁。在設計前先了解這些模板有助於讓用戶快速找到適合自己產品的頁面布局。
1、網站展示頁
網站展示頁（即官網頁）通常是用戶了解網站或產品的第一步。這類頁面通常會包含產品展示圖，簡短的產品介紹信息，以及用戶登錄入口等。在設計時我們建議：
明確你要傳達的內容，保持簡短而清晰的文案。
搭配清晰、直觀的產品圖片，有助於加深用戶對產品的理解和記憶。
2、控制台頁
控制台頁（Dashboard）集合了大量多樣化的信息（如數字，圖形，文案等），需要一目瞭然地將關鍵信息展示給用戶。因此，如何將龐大復雜的信息精簡清晰地展示出來，是設計此類頁面的關鍵。在設計時要注意以下幾點：
按照信息的重要程度來組織頁面排版，突出展示關鍵信息。
將數據可視化，讓用戶可以直觀地了解關鍵信息及整體情況。
合理地使用顏色及柵格排版，減輕用戶的視覺負擔。
3、列表頁
列表設計是並列式展現信息，方便用戶能快速查看基本信息及操作。因此，信息的「可閱讀性」及「可操作性」是設計的關鍵。在設計時要注意以下幾點：
根據用戶需求來定義信息展示的等級，僅展示關鍵信息及操作。
當信息內容較為復雜時，可將次要的信息折疊或放到詳情頁面中，以遞進的方式讓用戶獲得更多的信息。
4、表格頁
表格作為多維信息展示的載體，使復雜的信息更易於閱讀與理解。它的易讀性，便捷性，易操作性對產品的體驗起著舉足輕重的作用。因此，我們在設計時要注意以下幾點：
構造清晰的表格布局，有利於提升讀者對信息的接收速度和理解程度。
更多地展示用戶所必須的信息，通過視覺上的調優突出展示重點信息。
當界面需要在一個很大的多縱行表格中展示數據，或每一橫列數據有多行信息時，可以巧妙地運用橫向或縱向斑馬條，使得信息條目之間更為分明，視覺上更易區分。
5、詳情頁
詳情頁面一般會承載大量的基本信息，擴展信息，或者狀態信息。對於信息效率和優先順序判定的要求會比較高。清晰的布局能幫助快速看到關鍵信息，提高決策效率。這設計時有以下幾點需要注意：
清晰的排版格式，易於閱讀的文本大小及間距，都是影響用戶獲取信息效率的關鍵因素。
圖文搭配比單文本展示信息能更好地提高用戶的理解。
6、表單頁
表單頁通常用來執行登錄、注冊、預定、下單、評論等任務，是產品中數據錄入必不可少的頁面模式。因此，舒適的表單設計，可以引導用戶高效地完成表單背後的工作流程：
考慮用戶的瀏覽方式，提供清晰的用戶視線瀏覽路徑；
內容是表單的核心，保證表單的內容精簡（盡量避免多餘的輸入項）；
標簽的命名要易於用戶閱讀和理解，避免模糊的描述給用戶造成困擾；
醒目的提交或完成按鈕，放在用戶的瀏覽線的終點更有利於用戶的完成操作。
二、柵格
我們通過定義網格、間距來呈現產品布局的最佳效果，設計師在設計時可按（移動：『頁面總寬 750px，內容區 750px』，PC：『頁面總寬 1440px，內容區 1208px』）來設定，並在此基礎上以 12等分的柵格來劃分整個設計建議區域。
建議橫向排列的區塊數量最多四個，最少一個，以保證視覺層面的舒適感。
註：圖中灰色部分為柵格的列，定義為『Column』，白色部分為柵格的間隔，定義為『Gutter』。
柵格公式：
我們為頁面中柵格的 Gutter 設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。
網站展示頁和 Dashboard 的 Gutter 寬度為 24px。
列表、表格、詳情和表單頁面的 Gutter 寬度為 16px。
㈡ 如何用GitHub來展示前端頁面
1、New reposipory
2、進入本機目錄 此處以在d:vuedemo為例
3、git init
git add *
git commit -m "first commit"
git remote add origin <server>
git push -u origin master
4、關鍵步驟
輸入gh-pages後創建即可，這樣的方式會直接拷貝master分支的所有文件到gh-pages分支，也可以用命令行的形式創建並重新上傳一份新的代碼
（1）新建並切換到gh-pages分支
git checkout --orphan gh-pages
（2）之後的操作和之前一樣，只是push的時候是gh-pages
git add *
git commit -m "update"
git push -u origin gh-pages
如此，demo項目就多了一個gh-pages分支，裡面的代碼文件就可以用來展示頁面了。
㈢ web前端頁面展示是如何實現的
使用freemarker是最方便的
添加依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
然後直接在src\main\resources\templates，寫.ftl文件作為前端頁面就行了
㈣ 後台上傳圖片與文字，並排版。前端如何原樣展示
前台的展示，是靠自己CSS去控制，但如果你是用編輯器編輯內容上傳，那前台顯示內容的時候，就是你編排好的原樣輸出。
㈤ 請教XX管理系統的前端頁面展示和後端許可權控制的一般解決方案
前端面向的是用戶編程，就是用戶可以看得到摸得到的。UI就是其中的一部分。後端是面向服務(伺服器)編程，用戶是無須知道裡面的操作的。舉個例子。比如簡單的登陸功能。前端的只要做好兩個文本控制項與一個按鈕控制項，並且監聽按鈕的點擊事件，將兩個文本的參數按照協議發送到伺服器端上。這就是前端要做的。而後端，伺服器就要接收發送過來的消息並且調用資料庫驗證用戶名與密碼。成功後返回結果。
㈥ 來個懂CSS的前端大神，教教我做下面這個圖片展示的網頁效果
請使用js來做! 不過下起來太復雜了! 最好用框架! 好像有這類框架, 專門用來統計制圖表用的
㈦ 前端如果有成千上萬的頁面該如何處理
一、圖片處理
1. 圖片：大小的控制與使用
以淘寶為例，你搜索的所有產品的列表頁面，每個產品都有一個概略圖（小圖），
點開一個產品的頁面可以看到產品展示圖（中圖），點擊圖片後可以看到原始圖（大圖），如果上面提到的三個頁面都用用戶上傳的原始圖，僅用控制顯示大小，頁面性能如何，可想而知，用PC機還好，如果用戶用移動設備加3G網路訪問，5分鍾也打不頁面，就是打開了，流量也用完了。
所以我們說為你的網站針對不同的情況不同的頁面，採用不同的圖像文件，當然屏幕解析度也要考慮進去，如果有人用iphone打開和ipad打開，就不需要顯示像PC機上那麼大的圖片了，只要適應設備就可以了，那你可能要問怎麼做。
通過CSS Media Querises,可以輕松做到，你可以訪問http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 了解更多信息：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
2. 壓縮
傳送圖像的時候單單控制適當的尺寸往往是不夠的。不少文件格式在不失真的前提下可以被壓縮很多。有一類應用程序可以達到這個效果。比如Photoshop有個很好的功能叫做Save for Web and Devices，還有我個人覺得多用PNG是個可以考慮的方案
3. Sprite
增加應用程序性能的方法之一，是減少到伺服器的請求數。每一個新圖像代表一個請求數。有一個辦法是將幾個圖片合並成一個，合並之後的圖像叫做一個sprite，這個功能在淘寶你也會發現，在CSS中改變背景層的位置，就能准確的把特定部分的圖像顯示出來。比如Twitter Bootstrap利用sprites來製作內部圖標，訪問http://getbootstrap.com/2.3.2/ 你會了解更多
在CSS中，你可以參照以下方式，顯示你喜歡的sprite部分：
.icon-edit {
background-image: url("../img/glyphicons-halflings-white.png
");
background-position: -96px -72px;
}
4. 超高速緩存
瀏覽器超高速緩存十分好用。盡管有時在開發過程中會導致一些非常有趣的情況，但它確實有助於提高你的網站的性能。所有瀏覽器的超高速緩存下來的內容包括圖片、JavaScript或者CSS。有幾種方法可以控制緩存，建議你閱讀相關文章。
5. 預讀取
HTML 5有一個很好的功能叫做預讀取，它讓瀏覽器提前下載你馬上需要用到的資源：
<link rel="prefetch" href="/images/background.jpg">
6. 數據URI方案/內聯圖像
幾年前我曾開發了一個簡單的網頁，只包含一個HTML文件夾，但當然裡面應該還包括一些我需要的圖像。數據URI方案幫助我解決了問題。我們的想法是將圖像轉換成一個base64編碼的字元串，並將其放置在src屬性中的img標簽里，例如：
Html代碼
<img src="data:image/png;base64,//8/==" alt="Red dot">
通過這種方法，你的圖像實際上在HTML中並保存了一個HTTP請求。你的圖像越大的話，字元串就越長。
㈧ web前端圖表展示
毫無疑問 必須用 highcharts 啊， 專門針對圖表的一個插件，方便好用！ 極力推薦http://www.highcharts.com/demo/area-inverted/gray
㈨ 這種前端頁面效果是如何實現的請大神指教。
用CSS3和JS，或者單用JS也可以，原理就是監測元素到窗口的距離，當元素距窗口達到指定距離時，添加或刪除相應的CSS，讓元素移動，當然，JS也可以
㈩ 什麼叫智能電商應用前端頁面主要指的哪部分
你問的是不是「前台頁面」？如果是的話，電商系統中，消費者（購買者）登陸後看到的是前台頁面，商家登錄後看到的是後台頁面。
「前端頁面」的意思，就是APP或瀏覽器中展示的網頁或APP頁面了，相對的概念是後端，即伺服器。