‘壹’ 前端开发珠宝行业经验
前端简介
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设定一个背景色。