『壹』 前端開發珠寶行業經驗
前端簡介
Web前端開發工程師是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過5年。Web前端開發是從網頁製作演變而來的，名稱上有很明顯的時代特徵。隨著人們對用戶體驗的要求越來越高，前端開發的技術難度越來越大，Web前端開發工程師這一職業終於從設計和製作不分的局面中獨立出來。
早期的前端其實就是Table布局，後來發展到所謂的Div + CSS網站重構，再到現在的讓人眼花繚亂的各種各樣的新技術，Web前端技術發展是非常快速的，因此選擇了前端這個行業就意味著不停的學習吧。讓我們先看看張克軍繪制的前端知識體系結構：
前端開發的核心是HTML + CSS + JavaScript。本質上它們構成一個MVC框架，即HTML作為信息模型（Model），CSS控制樣式（View），JavaScript負責調度數據和實現某種展現邏輯（Controller）。
HTML
1. 標簽的分類
1. 標簽表示一個元素
2. 按性質劃分: Block-Level和Inline-Level
3. 按語義劃分:
Headings : h1, h2, h3, h4, h5, h6
Paragraphs : p
Text Formatting : em, strong, sub, del, ins, small
Lists : ul, li, ol, dl, dt, dd
Tables : table, thead, tbody, tr, th, td
Forms and Input : form, input, select, textarea
Others : div, span, a, img, <!---->
HTML5 : header, footer, article, section
2. XHTML
XHTML 於2000年的1月26日成為 W3C 標准。W3C 將 XHTML 定義為最新的HTML版本。XHTML 將逐漸取代 HTML。XHTML是通過把 HTML 和 XML 各自的長處加以結合形成的。XHTML 語法規則如下：
屬性名和標簽名稱必須小寫
屬性值必須加引號
屬性不能簡寫
用 Id 屬性代替 name 屬性
XHTML 元素必須被正確地嵌套
XHTML 元素必須被關閉
3. 標簽的語義化
為表達語義而標記文檔，而不是為了樣式，結構良好的文檔可以向瀏覽器傳達盡可能多的語義，不論是瀏覽器位於掌上電腦還是時髦的桌面圖形瀏覽器。結構良好的文檔都能向用戶傳達可視化的語義，即使是在老的瀏覽器，或是在被用戶關閉了 CSS 的現代瀏覽器中。同時結構良好的HTML代碼也有助於搜索引擎索引你的網站。
不要使用table布局，table是用來表格顯示的。
不要到處濫用div標簽，div是用來分塊用的。
不要使用樣式標簽，如font, center, big, small, b, i，樣式可以用CSS來控制，b和i可以用strong和em來代替。
不要使用換行標簽<br />和空格來控制樣式，請用CSS。
盡量不要使用內聯CSS
CSS
1. CSS基礎知識
層疊和繼承
優先順序
盒模型
定位
浮動
2. CSS進階
CSS Sprite
瀏覽器兼容性
IE HasLayout和Block Format Content
CSS Frameworks
CSS3
CSS性能優化
LESS and SASS
CSS Sprite
CSS Sprite主要用於前端性能優化的一種技術，原理是通過將多張背景圖片合成在一張圖片上從而減少HTTP請求，加快載入速度。
瀏覽器兼容性
絕大部分情況下我們需要考慮瀏覽器的兼容性，目前正在使用的瀏覽器版本非常多，IE6, IE7, IE8, IE9, IE10, Chrome, Firefox, Safari。
IE HasLayout和Block Format Content
IE HasLayout是一個 Internet Explorer for Windows的私有概念，它決定了一個元素如何顯示以及約束其包含的內容、如何與其他元素交互和建立聯系、如何響應和傳遞應用程序事件、用戶事件等。這種渲染特性可以通過某些 CSS 屬性被不可逆轉地觸發。而有些 HTML 元素則默認就具有」layout」。目前只有IE6和IE7有這個概率。BFC是 W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。這個其實和瀏覽器的兼容性有關，因為絕大部分的兼容性問題都是它們引起的。參考： CSS BFC和IE Haslayout介紹
CSS Framework
CSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁面排版、網格布局、表單樣式、通用規則等代碼塊,用於簡化web前端開發的工作，提高工作效率。目前常見框架有：
960 Grid System
Blueprint CSS
Bluetrip
Minimum Page
還是一個比較出名和特殊的框架是Twitter的 Bootstrap 。Bootstrap是快速開發Web應用程序的前端工具包。它是一個CSS和HTML的集合，它使用了最新的瀏覽器技術，給你的Web開發提供了時尚的版式，表單，buttons，表格，網格系統等等。它是基於Less開發的。不支持IE6，在IE7和IE8里效果也不咋地。
CSS3
雖然CSS3還沒有正式成為標准，但是包括IE9+, chrome, Firefox等現代瀏覽器都支持CSS3。CSS提供了好多以前需要用JavaScript和切圖才能搞定的功能，目前主要功能有：
圓角
多背景
@font-face
動畫與漸變
漸變色
Box陰影
RGBa-加入透明色
文字陰影
CSS性能優化
CSS 代碼是控制頁面顯示樣式與效果的最直接「工具」，但是在性能調優時他們通常被 Web 開發工程師所忽略，而事實上不規范的 CSS 會對頁面渲染的效率有嚴重影響，尤其是對於結構復雜的 Web 2.0 頁面，這種影響更是不可磨滅。所以，寫出規范的、高性能的 CSS 代碼會極大的提高應用程序的效率。參考 CSS性能優化探討
LESS和SASS
LESS 和 SASS 都是 CSS 預處理器，用來為 CSS 增加一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你可以在 CSS 中使用變數、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可以讓你的 CSS 更見簡潔，適應性更強，代碼更直觀等諸多好處。
SASS 基於Ruby開發。 LESS 既可以在客戶端運行，也可以藉助Node.js或者Rhino在服務端運行。
『貳』 BLUE引擎為什麼沒有時裝和6格拜託各位大神
更新0825引擎 查看原帖>>
『叄』 前端開發應該知道的幾個CSS網頁表單布局技巧
1、絕對定位
在絕大過程中，想確定一個元素在網站當中的固定位置，絕對定位是實現這個方式的解決辦法。在網頁當中，絕對定位可精確的控制元素在網頁當中的位置，我們可使用頂部、底部、左側和右側，附上一個像素值來控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS設置一個元素的位置從瀏覽器的頂部和右邊保持50px。你也可以在div內使用絕對定位。
2、覆蓋所有樣式
寫CSS的時候都應該知道，當你想給一個元素添加一個新的CSS樣式，但這個樣式之前已經被定義過了。此時我們可以採用！important來定義。
例如，如果我想在我的網站的特定部分的H3標題是紅色而不是黃色，可以使用下面的CSS：
.section h3 {color:red !important; }
3、居中
居中分很多情況，一般會分成文本居中和DIV的內容居中。
文本居中
文本居中使用text-align：center; 。如果想讓文本在左右兩側，可以使用左側或右側。
DIV內容
DIV內容居中跟文本居中不一樣。CSS可以這樣定義：
#div1 { display: block; margin: auto; width: anything under 100% }
把寬度設置為「100％以下」的原因是因為如果它是100％寬度，那麼如果是全寬度，並且不需要居中。最好有一個固定的寬度，如60％或550像素等。
4、垂直對齊（對於一行文本）
要使菜單的高度和文本的行高一致，可以這么設置：
.nav li{line-height:50px; height:50px;}
5、懸停效果
這適用於按鈕，文本鏈接，網站的部分，圖標等等。如果你想做一個懸停效果，可以試試：
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
這個功能可以讓你的h2標簽的顏色從黑色變成黃色。
6、懸停效果過渡
對於懸停效果，如使用菜單或網站上的圖像，我們肯定不希望顏色快速貼近結果，所以我們可以通過使用時間變化來達到過渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
這就使得樣式上的改變，可以是從黑色變黃色的過渡時間是0.5秒，而不是立即變成黃色。這使得懸停效果更加和諧而不會顯得太突兀。
7、a標簽的狀態
我們在遇到a標簽的時候，一定要給a標簽做樣式定義，否則特別容易造成用戶在使用上的困惑。通過樣式可以讓用戶知道這個鏈接是否被點擊過，更利於用戶體驗。
a:link {color: blue; } a:visited {color: red; }
8、輕松調整圖像大小以適應
說到這個樣式，我之前不知道可以通過以下方式達到圖片的自適應效果。作為一個新手，我相信這個效果肯定有很多人都想做，當然，我提供的方法也只是其中的一種：
img {max-width:100%;height:auto;}
這個樣式意味著最大的圖像可能是100％，並根據圖像寬度自動計算高度。在某些情況下，您可能還必須指定寬度為100％。
9、父級元素和子元素
如果ni不希望選擇任意的後代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器：
h1 > strong {color:red;}
特殊情況下你可能會想定義第N個子元素的樣式，這樣就可以用到下面這個樣式：li:nth-child(n)
具體的使用方法可以去w3school上看。
10、將CSS應用於多個類或選擇器
如果你想要在所有圖片，博客部分和側邊欄上添加相同的邊框。你不必寫出相同的CSS樣式重復3次。只需列出這些項目，用逗號分隔：
.blog,img,.sidebar {border: 1px solid #000;}
『肆』 目前比較火的web前端 論壇和博客有哪些
目前比較火的論壇博客有哪些? 這里收集一些比較好的技術開發者社區供大家參考，具體如下：
1、快速開發平台社區 -天翎論壇，主要是以Java低代碼開發平台為主的技術性論壇社區，目前低代碼平台商用授權對外開放；
2、CSDN -專業開發者社區 IT技術交流平台；
3、IT圈，圈圈精彩 - 原軟媒論壇、IT之家，國內最人氣的科技社交圈層,繼軟媒論壇、IT之家社區演變而來；
4、51CTO技術論壇-中國領先的IT技術社區 國內主流IT技術社區，論壇擁有大批IT技術人/IT專家；
5、ITPUB技術論壇-中國專業的IT技術社區。
『伍』 如何機會web前端技術，設計一個網站
我來 see my name ,find me.
『陸』 前端網站有那些
blueidea、站酷、懶人系列等等，還有很多個人博客！
『柒』 小白求教用class="blue"為什麼顏色不改變 莫笑小白，額是設計想努力改行做前端~~多謝~~~
class是一個類選擇器
如果想改變顏色可以這樣寫：
p /*定義p標簽屬性*/
{font-size:40px; /*定義字體大小*/
color:#F00; /*定義字體顏色*/
font-weight:bold;} /*定義字體加粗*/
p.blue{color:red;} /*定義類"blue"字體顏色
</style>
</head>
<body>
<p>標記選擇器</p>
<p>標記選擇器</p>
<p>標記選擇器</p>
<p class="blue">標記選擇器</p>
<p class="blue">標記選擇器</p>
<p>標記選擇器</p>
或者這樣寫：
<p style="cloor:blue;">標記選擇器</p>
類的css選擇器是一個「 .」小點來定義樣式
如
.ble{定義該類的樣式}
『捌』 前端，有n多個div 一共有五種背景顏色，在考慮與後台對接的情況，怎麼讓div添加任意一種背景顏
在資料庫中增加一個顏色欄位，在後台為每個數據設定顏色，這樣你在頁面輸出數據的同時，把顏色的欄位值一起輸出頁面，這個時候可以根據CSS或者JS來設定該數據所在的DIV顯示什麼顏色。
例如：
---------------------------------------------------
資料庫中的欄位值
id name color
1 AA公司 red
2 BB公司 blue
3 CC公司 yellow
4 DD公司 black
-----------------------------------------------
前端頁面
<?php
while($row=$result->fetch_assoc()){
echo"<divclass='".$row["color"]."'>".$row["name"]."</div>";
}
?>
----------------------------------------------------
CSS代碼：
.red { background-color: red; }
.blue { background-color: blue; }
.yellow { background-color: yellow; }
.black { background-color: black; }
-----------------------------------------------------
這個是簡易說明，比較簡單用的是CSS來判斷，為每個color設定一個背景色。