(3)CSS代码：

#goodsList{
width:1210px;
height:auto;
margin:20px auto 0px;
overflow:hidden;
}
#goodsList.goodsItem{
width:220px;
height:330px;
margin:0px 22px 22px 0px;
/* background:pink; */
overflow: hidden;
float: left;
/* position:relative; */
/* z-index: 1; */
}
#goodsList .goodsItem .goodsItemWrap{
/* position: absolute; */
width:220px;
height:315px;
background-color: #fff;
margin:0px;
padding: 4px;
border: 1px solid #f5f5f5;
border-radius:3px;
} /* .
goodsItem:hover .
goodsItemWrap{
height:auto;
margin:-3px;
border:4px solid #bc0000;
border-radius: 0;
} */
.goodsImg{
/* position:relative;
display: block;
table-layout: fixed; */
height:210px;
width:210px;
padding:0;
margin:0;
margin-bottom:5px;
} .
goodsImg a, .
goodsImgimg{
/* display:table-cell; */
max-height: 210px;
max-width: 100%;
/* text-align: center;
vertical-align: middle; */
} .
goodsPrice{
font-family: arial,verdana,sans-serif! important;
color:#c00;
font-size: 14px;
height:30px;
line-height: 30px;
margin:0 0 5px;
/* letter-spacing: normal; */
/* overflow:inhert! important; */
white-space: nowrap;
} .
goodsPriceem{
font-style:normal ;
font-weight: 400;
font-size: 20px;
} .
goodsPriceemb{
margin-right: 2px;
font-weight: 700;
font-size: 14px;
/* vertical-align: middle; */
} .
goodsPrice .
average{
/* display:inline-block; */
white-space: nowrap;
padding:0 5px;
color: #999;
} .
goodsTitle{
color:#666;
height:30px;
line-height: 30px;
margin-bottom: 3px;
overflow:hidden;
} .
goodsTitlea{
color:333;
} .
goodsTitle a:hover{
color:#c00;
} .
goodsStatus{
height:32px;
border:0;
border-top:1px solid #eee;
margin-bottom: 0;
color:#999;
overflow:hidden;
} .
goodsStatus span{
display:inline-block;
float:left;
border-right: 1px solid #eee;
width:45%;
padding:10px 1px;
margin-right: 6px;
line-height: 12px;
font-size: 12px;
text-align: left;
} .
goodsStatusem{
color:#b57c5b;
font-size: 12px;
font-weight: 700;
}
span.norightborder{
border-right: 0px;

(4)与后台开发人员交接，将前端完成的页面交给后台。

设计节点研究

从对历史沿用来进行的剖析来看，Web的发展历程中，先后经历了HTML技术，经历了css2．0站点的构建以及维护，并且最终塑造出了以CSS+DIV作为主要技术的页面重构技术。而且是以java这种成熟语言以及相关应用产品的制作网站、SNS、网页游戏、博客、微薄等的陆续出现为显著特点，并且促使形成了网站制作设计的前段开发的引领者。

在当下进行的开发研究里，于围绕“用户体验”展开的前端开发范畴内，在设计、可用性、前端开发以及UED团队所涉及的技能型要求方面，实现了相关程度的提升。在侧重软件开发技术这一情况中，涵盖诸如通、Ajax等Web开发技术，HTML/XHTML、CSS等网页制作技术，（C/C++／PHP/Java等的算法、数据结构以及后台开发，对W3C标准及其数据分离、Web语义化等的理解所进行的开发设计，在应用领域的实践过程里取得了极大程度的提高。

对于web前端开发而言，存在技术条件要求，这包括对各种页面布局的掌握，面向对象编程方面的能力，JS模块化编程的相关知识，设计模式的理解，以及前端MVC的基础把控；网站性能优化设计条件涵盖SEO及其HTTP请求次数、图片整合技术等；并且还得学会uI设计，前端工程师的uI设计，特别是对于设计出处于理想状态下的设计作品，有着直接的促进作用：后台编程语言作为协同前段设计的重要沟通平面，页面制作与后台的契合以及对相关代码的掌握，对于满足公司前段开发岗位支持及其语言基础要求，具备切实有效的数据交换价值。Web前端开发技术所应用的构成框架里前端机构培训，涉及到JQuew，关乎前端模块化开发的价值，还有Web前端的性能优化方案以及uI的艺术设计，通过案例分析、功能模块设计、技术实现等方式来综合达成。

技术与优化

关于Web前端开发技术

能从实践经验晓得，对Web前端开发技术的优化影响最为重大的是HTML、CSS，这三种均归属于网页的关键语言，它们各自存有独特之处，还各自占据着职能，在执行标准方面也有着诸多区别，然而知晓Web前端开发的人都清楚，这三者间有着诸多联系，属于相互协作相互推动的关系，所以在Web前端开发技术优化里不能无视这三者的重要性，网络环境常见的是B/S结构，它具备自身的特点。

基于网络环境的性质着手予以分析，能够明确，当下浏览器客户端展开的分析途径契合现代社会技术发展特性，致使所有事情均可顺利推进。鉴于现代网络发展速度极快且具备显著复杂性，造成网页涌现许多问题，针对这一连串问题，怎样提升浏览用户体验感遂成为Web前端开发技术与优化的关键目标。一般而言浏览用户都要从网址起始进行输入，他们会发出请求，此请求的对象是URL。在这一系列内容发生完毕后，服务器便会借助自身功能针对域名展开分析，最终得出的结果便是生活中人人都能理解的 IP 地址，此时计算机才会依据该 IP 地址去访问此地址上的事物与内容。在这一系列活动里，浏览器呈现出的是对数据的整理，还会经由一定程序将其展示于页面上，如此资源展示才会合理，我们平常所见的网页内容皆是经过浏览器排版处理的。具体形式如图 1 所示：

那些常常基于网站制作的Web前端开发技术总涵盖诸多信息与数据。其链接建立以及数据库建立均需精准且有效。就像Web服务器，它主要作用是针对文件内容以及URL参数来进行资源调用。这样就能获取组织数据，并生成HTML页面的有效性。很多情况下，服务器能够完成HTTP请求，并且服务器具备传输文件的功能。而浏览器所起的作用是接收文件。正在运行着链接资源文件获取进程的网页读取通道，针对已经接收的文件要进行分析，还要以此为由向服务器发送请求，目的是获得链接资源文件，而且这一过程是在浏览器中完成的。

针对HTTP请求的优化

信息若需要发生传递，且要呈现于具体的浏览用户眼前，那它便需要网页的存在，这是网页存在的价值呀，用户借助网页去获取自身想要的信息与数据。互联网发展速度极快，并且实时更新，信息的获取时间以及过程都得处于最佳值之内，唯有如此才会吸引更多用户，也才会满足用户对快速浏览信息所提出的具体要求。信息本身的价值不会因网页而得以体现，网页仅仅起着为用户提供信息的那份作用。但当换个角度去看待此问题时，从获取信息的角度看待信息，会使信息呈现出不同的一面，这会对社会行为产生影响。

有鉴于此，针对于HTTP请求所开展的优化，归属于Web前端开发技术之优化范畴。需针对请求之内容达成筛选，请求普遍而言应当实属必要之况，则方才能够切实从根源上提升Web前端开发技术的整体水准。于此列举示例对完整的HTTP请求予以说明，其所含内容极为丰富，诸如常见的数据发送，简历服务器，以及建立浏览器链接等。通常情况下，要是环境不一样，HTTP请求耗费的时间便会存在差异，每一个请求的时间相互累加之后，时间成本就会提升，这对网络资源造成的浪费极大。因而，在Web前端开发技术里，HTTP请求优化重点旨在针对时间使用方面展开优化，而且重点往往会放置于请求数量的把控之上。时间的优化能够借助合并文件予以达成。

用这样的办法去控制时间，能够使请求于第二次的时候就达成，至于图片，则能够运用不同链接映射不同区域的方式，在此种方式之下的Web前端开发技术优化成效会更好。首先，在这一环节当中，有着这样一个情况，那就是技术人员需要予以注意，注意的内容，则是针对内联图像的处理以及优化。为什么要这么做？是为了能够真正地达到优化HTTP请求的效果，达成这个效果的话，就必须要重视每一个细节。那么内联图像的处理和优化具体是怎样的？它就是要确保文本以及图像能够同时进行下载，只有这样做，才会给浏览用户带来最佳的体验感。有了最佳体验感之后，也才会因此而获得浏览用户的好评。另外，本身图像和文本的同时下载，它也是衡量一个网站基本质量好与坏的标准。

针对文件规模的优化

文件规模呈现出复杂性，对其进行优化会面临诸多困难，因其内容琐碎，难以构建系统的优化方案。一般而言，优化文件规模要从CSS、文件入手，不过这只是文件规模优化的部分内容。其他还涵盖相应代码的优化，就具体文件而言，其包含的信息繁多，且与用户浏览体验直接相关，所以必须针对这些文件规模进行优化。这里要提出来的一个重点是，在针对文件规模作优化时，要结合 HTML 标签来进行，这也是文件规模优化的重点之一，针对它的优化涵盖标签剔除，这么做是为了有效防止内联式出现，而内联式的出现会影响整个浏览器的运行。

此外，于实践来讲，还需着重关注CSS代码的优化，这可是一项相当重要的工作呢，优化之时要与Web前端开发技术相结合，在这个基础之上展开，从而达成客观性以及系统性，正确去应对客户的浏览习惯与需求。在这一优化内容里，HTML标签的合理剔除所强调的是合理性，所以在Web前端开发技术优化进程中，不能出现矫枉过正的状况，得充分考量具体情形，把HTML标签剔除把控在合理范畴内，唯有如此，才会提升技术的有效性。

针对内容的优化

不得不在基于网站制作的Web前端开发技术与优化中重视内容的优化，因为这一部分内容关乎网页的运行效果。在实际操作里，鉴于内容优化具有特殊性，所以要充分考量各个方面的情形。这里仅从两个角度展开分析，从而针对内容优化的方式给出意见。优化内容时需把注意力放在样式表上，当样式表被置于顶部时，那么通常被置于底部的便是。从另外一个角度来说，它是针对CSS的，因为CSS有着覆盖叠成这种特殊性，所以在进行优化之时，要考虑到它的这个特点来开展操作。我们能够明白，通常情况下浏览器在加载完各种信息以及数据以后，它会针对网页的内容施行渲染，以此提高用户的浏览体验感受。

所以鉴于这样的特性，在针对内容予以优化之际，也就是针对Web前端开发技术开展优化之时，得着手CSS加载的优化工作。前面提及的将会实施优化，那么会把它放置在底部，在这样的情形下，为了让页面下载的成效更优，要保证人的行动不会对页面产生消极性的作用。这样就能防止组建下载速度太过缓慢，以及页面延长加载时间过于漫长等状况的发生。总得来说，针对内容进行优化的时候要全面考量到细节对整体的影响与作用。

针对DNS的查询次数的优化

致使网页时间成本增加的另外一个缘由是DNS，所以要针对其开展优化，具体而言就是针对DNS的查询次数予以优化。通常我们所见到的DNS每次解析都需耗费二十毫秒至一百二十毫秒的时间。在这样一种前提状况下，会产生一个问题，即当解析请求过于频繁时，网页会反应不及，并且时间成本也在持续叠加，最终造成的后果是信息传输的速度连带呈现的速度不断减低，甚至会出现迟缓的情形。此外，依据 DNS 的查询请求的性质而言，我们能够明确，它实际上仍旧归属于浏览器的基础内容里的某一种。这意味着，在查询请求达成之前，此域名里的全部内容都会始终维持原本的状态，不会出现下载的情况。

所以，于Web前端开发技术优化里，重视DNS的查询请求优化，对提升整体水平有着积极意义。另外，有个值得探讨的问题是重定向问题，因重定向的性质致使其会让时间成本增加，不过因它受多种因素影响，故而优化时更要注重细节。比如，可在其中添加“/”，以使时间成本降低些许。