A. 麻烦告知这道web前端题怎么做
这就是购物车的功能
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>购物车功能实现</title>
<styletype="text/css">
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
.main{
width:1200px;
margin:0auto;
}
.quanxuan,.quanxuan1{margin-top:20px;}
.checkbox{
width:16px;
height:16px;
border:1pxsolid#e5e5e5;
}
.checked{
background:url(images/i.png)no-repeat;
background-size:100%;
}
.rece{
margin-left:20px;
cursor:pointer;
display:block;
text-align:center;
width:20px;
height:20px;
background-color:#C1E2B3;
}
.add{
cursor:pointer;
text-align:center;
width:20px;
height:20px;
background-color:#C1E2B3;
}
.number{
width:50px;
height:20px;
padding-left:10px;
border:1pxsolid#e5e5e5;
background-color:#fff;
}
.sum{margin-left:100px;}
</style>
</head>
<body>
<divclass="main">
<divclass="quanxuan">
<pclass="checkboxfl"></p>
<pclass="fl">全选</p>
<divclass="clear"></div>
</div>
<divclass="all">
<divclass="quanxuan1">
<pclass="checkboxfl"></p>
<divclass="fl">
<divclass="fl">
<spanclass="recefl">-</span>
<spanclass="flnumber">1</span>
<spanclass="addfl">+</span>
<divclass="clear"></div>
</div>
<spanclass="flsum">300</span>
<divclass="clear"></div>
</div>
<divclass="clear"></div>
</div>
<divclass="quanxuan1">
<pclass="checkboxfl"></p>
<divclass="fl">
<divclass="fl">
<spanclass="recefl">-</span>
<spanclass="flnumber">1</span>
<spanclass="addfl">+</span>
<divclass="clear"></div>
</div>
<spanclass="flsum">300</span>
<divclass="clear"></div>
</div>
<divclass="clear"></div>
</div>
<divclass="quanxuan1">
<pclass="checkboxfl"></p>
<divclass="fl">
<divclass="fl">
<spanclass="recefl">-</span>
<spanclass="flnumber">1</span>
<spanclass="addfl">+</span>
<divclass="clear"></div>
</div>
<spanclass="flsum">300</span>
<divclass="clear"></div>
</div>
<divclass="clear"></div>
</div>
<divclass="quanxuan1">
<pclass="checkboxfl"></p>
<divclass="fl">
<divclass="fl">
<spanclass="recefl">-</span>
<spanclass="flnumber">1</span>
<spanclass="addfl">+</span>
<divclass="clear"></div>
</div>
<spanclass="flsum">300</span>
<divclass="clear"></div>
</div>
<divclass="clear"></div>
</div>
</div>
<!--计算总价-->
<spanclass="zong">0</span>
</div>
<scriptsrc="js/jquery-2.2.1.min.js"type="text/javascript"charset="utf-8"></script>
<scripttype="text/javascript"src="js/shop.js"></script>
</body>
</html>
$(function(){
//单选
$(".quanxuan1.checkbox").click(function(){
if($(this).hasClass("checked")){
$(this).removeClass("checked");
$(".quanxuan").find(".checkbox").removeClass("checked");
$(this).siblings("div").find(".sum").removeClass("yong");
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}else{
$(this).addClass("checked");
$(this).siblings("div").find(".sum").addClass("yong");
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}
})
//全选功能
$(".quanxuan.checkbox").click(function(){
if($(this).hasClass("checked")){
$(this).removeClass("checked");
$(".sum").removeClass("yong");
$(".quanxuan.checkbox").removeClass("checked");
$(".quanxuan1.checkbox").removeClass("checked");
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}else{
$(this).addClass("checked");
$(".sum").addClass("yong");
$(".quanxuan.checkbox").addClass("checked");
$(".quanxuan1.checkbox").addClass("checked");
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}
})
//增加数量
$(".add").click(function(){
what=$(this);
varnumadd=parseInt(what.prev().text());
varsum1=parseInt(what.parents("div").siblings(".sum").text());
varnum=parseInt(numadd)+1;
what.prev().text(num);
varsumd=sum1/numadd;
varsum2=sumd*num;
vara=what.parents("div").siblings(".sum").text(sum2);
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
})
//减少数量
$(".rece").click(function(){
what=$(this);
varnumadd=parseInt(what.next().text());
varsum1=parseInt(what.parents("div").siblings(".sum").text());
if(what.next().text()==1){
returnfalse;
}else{
varnum=parseInt(numadd)-1;
what.next().text(num);
varsumd=sum1/numadd;
varsum2=sumd*num;
vara=what.parents("div").siblings(".sum").text(sum2);
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}
})
})自己下载一个jQuery文件
B. 怎么制作网页呢
Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！
它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
那么我们应该怎么学习web前端开发这门技术呢 ？
现在很多小伙伴喜欢在互联网上找视频资料学习网页制作，但是光看视频你是不可能学会网页制作的，没有人指导你，而且很多视频已经过时了 ，并没有什么用! 如果你真的想学习网页制作这门技术，你可以来这个裙，前面是六 五 七，中间是I 三 柒，最后是9 0 6！ 在这里有最新的HTML课程 免费学习 也有很多人指导你进步，不需要你付出什么，只要你是真心想学习的，随便看看的就不要加了，加了也是浪费大家的时间 。
C. web前端开发需要掌握网页设计和UI设计吗就是把网页的模板、配色做好，最后做成一张整个网站
对呀，你理解的很对，web前端开发，就是做这些
D. 我学完了web前端的html.css.js，可不可以自己做网页，(不要数据写入的有数据库的那种)。
可以 不过据你所说 只用html css js 写出来的属于静态页 纯展示用的 意义不大 而且在做网页的时候 要注意不同浏览器内核的 兼容性问题
E. 做web前端如何做网页
如今Web前端开发是一门吃香的技术，前端更加容易好学，更多的人选择了Web前端开发工程师的职业。想要掌握Web前端技术的内容，能够达到企业的就业要求，需要付出更多的时间及努力。只要真正不断提升自身的技能，才能走更远。
如果你想要快速学习Web前端技术，专业全面的学习方式比较好，一般费用在2W左右，4-6个月左右。专业学习适合零基础的小白迅速成长，学习曲线先快后慢，也适合有一定基础的学员进阶学习，巩固知识的基础上，稳步进步突破职业瓶颈。
F. web前端怎么写好代码
web前端开发需要掌握的技术:
1、
学习html,这个是最简单的,也是最基础的。要熟练掌握div、form table、ul
li、p、span、font这些标签,这些都是最常用的,特别是div和table,div用于布局、table也可以用于布局,但是不灵活,基本
table是用来和数据打交道。
2、学习css,这里说的css不包括css3,一般我们看到web前端开发工程师的要求里面,有一个会使
用css+html或者css+div来进行界面布局,所以css是用于辅助html来布局和展示的,我们称之为“css样式”,为什么会说
css+div呢?因为我上面说了div就是html主要用于布局的东西,所以div就是核心掌握的东西!那么css肯定必须要配合div来使用才好。
css要熟练掌握float、position、width、height,以及对于的最大最小、会使用百分百、overflow、margin、
padding等等,这些都是跟布局 有关系的样式,一点要掌握。
3、学习js。
可能前两个大家觉得还过的去,看到js就蛋疼了,其实吧,js入门很简单的,不需要会很多东西的,只要会根据某个id、或者name拿到网页dom或者样
式、或者值,然后会给某个id或者name的元素标签赋值、或者追加数据、追html,这个是跟数据有关系的操作,然后数据逻辑判断,效果方面的,无非就
是跳转、弹框、隐藏什么的,把这些全部结合其他就是实际用途了,代码一点都不难,会了这些基础js,其他的直接网络就好了。然后看多了,用多了,就什么都
不是问题了。
4、学习jquery。jquery是相当于把js封装了一套的一个js插件,目的就是操作起来更方便,代码写的更少,jquery入门也很简单,那些是入门需要学的和js一样,只是换成了jq的代码。其他的一样网络就够了。
5、
最好会点后台语言,比如java、php,为什么呢?因为我们前台界面的数据都是从后台来的,如果会点后台代码,就知道怎么跟后台交互数据是最好的,
这样节约时间,也可以让前端代码更规范。不然可能因为你的写法和后端给来的数据不能结合上,那么前端代码又得重新写,那就更蛋疼了。
6、学
习css3+html5,为什么这个放最后呢?哈哈,因为我自己也不太会,毕竟术业有专攻嘛,虽然这个很流行,但是我是搞后端的,在工作中用不到
它,只有在自己网站需要改样式,或者朋友网站样式出问题的时候,我才会去临时去研究下。但是如果你们是准备专门搞前端,那么最好还是学一下的。
上
面6点,基本是一个搞web前端开发工程师需要掌握的技术,然后我也尽量的把自己的一点点经验告诉了大家,但是大家不要以为上面6点就只有我说的那么容
易,不,他们之所以被人使用,之所以这么火,就是因为强大!我说的这么简单仅仅是打消你们觉得很难的原因,万事开头难,我讲的都是入门的方法和技巧以及需
要知道的东西。另外告诉大家一个秘密,不要以为代码很难敲,现在什么语言都有自动提示代码的功能,只需要输入一个字符,两个字符,后面的代码都会弹出来让
你选择!还怕啥呢?所以你也不要怕你英语不好了。
G. web前端网页设计学习哪些内容
web前端网页设计学习哪些内容?
1、html语言。首先要学这个，任何网页的显示都要靠html语言来表达，浏览器解释html语言显示在我们面前。
2、服务器架设，要制作网页就需要架设服务器来调试你做出来的网页，有iis等很多种，可以在网上搜索得到。
3、css语言。用网页制作三剑客做出来的东西，css大部分是自动生成的，很难理解，需要学习基本的css知识，是步入高手的必经之路。css控制着网页图片、表格、文字等等内容在我们面前的显示样式，比如颜色，边框，大小等。
4、divcss布局。这个东西是走向专业制作的必经之路，网页元素靠它来搭建基本框架，像网络空间，QQ空间的皮肤等就是利用这个来做的。
5、数据库。走向动态网页的基础，比如网络知道的提问回答这些，都涉及数据库的读、写、改、删。常见的数据库有mysql、mssql、access等。数据库是所有软件的基础，80%以上的应用程序都涉及数据库，而作为网页制作来说没有必要学得很深，够用就行。
6、动态语言，asp，php，jsp，.net(c#等)。要操作数据库，交互就需要动态语言，云南昆明IT培训http://www.kmbdqn.cn/发现现在好多动态语言像php都有“框架”，用框架建站好比用活动板房的零件建房子，全部自己写好比一块一块砖砌房子。
7，java。网页里面的验证码，弹窗，特效等就靠它了，一个没有java的页面基本没有，这个也有好多的框架可用，这个语言是难的，也是强大的，网页木马，病毒大多用这个语言。
8、平面涉及软件。flash，photoshop等，页面美化还要靠图片等东西。
这些个东西你会一个，或者一个都不会，都能做出一定水平的网页(用三剑客，或者直接用word做好后另存为htm文件就行)，要深入的学，这些知识基本的。
H. web前端怎么做多页网页
在和后端请求数据的时候，发送data:{page:1}。后端通过page内容截取对应的内容返回你数据，比如page=1返回前1-10，page=2返回11-20。总页数的话，每次请求给你返回个total/10的数据就好，或者返回来总数量你自己算。每次跳转下一页面page+1，跳转指定页面则发送当前页面数就好
I. 求大神做个web前端开发的网页
你 匿名 提问 ，如何私聊？ 做网页没有问题 ，你私聊我吧 。谈谈 什么价位。以及你的需求 ，你不能说 你做旅游的 你连图片都不给我吧 ，还有你们的 旅游的 介绍，什么旅游团 ？等等 这些基本的信息 。
J. 参加Web前端面试一定看的Web前端面试题库（一）
今天小编要跟大家分享的文章是关于参加Web前端面试一定看的Web前端面试题库。正在学习web前端知识准备参加web前端面试的小伙伴们来和小编一起看一看吧。
HTML(5)和CSS3方面
01．前端与后端数据交互的格式有哪些，为什么大部分现在都用json而不用xml？
答：XML：
JSON：{name:”知了堂”,age:3}
JSON书写方便节省字节，更轻量，前后台都有直接解析JSON的方法（JSON.stringfity/parse）使用方便。
02．Flex布局熟悉吗，说几个常用的属性。
答：这个几乎每天都在用，还是挺熟悉的。
__
display：flex
___align-items多个
__
align-content：单个
___justify-content
___justify-items
___flex-direction
__
flex-wrap：
__
flex-basic：初始盒子宽度_lex
_
_lex-grow：增长因子2004*40=1601,1,1,21/5*40_lex
___flex-shrink
:缩减因子20060*4=240
03.说一下CSS盒模型。
答：CSS的盒模型包含了以下几个内容margin,padding,border,content。
在计算盒子宽高的时候，IE和Chrome会有一些区别，IE算到border，Chrome的宽度只包含content区域，因此CSS3提供了box-sizing这个属性来修改。
04.CSS常用选择器，选择器权重问题。
答：*(has，not，target，root。。。。)通配符，ID，class，attr属性，element，子代（>+~）,
___UI状态伪类选择器（hover,active,link,seceted..，checked），
___结构性伪类选择器(nth-child,fist-child,last,nth-of-type...before,after....)
___!important
>style>id>class>elemnet>伪类和属性
05.请用5种方式实现元素垂直居中。
答：
（1）flex
（2）Tranform
（3）定位+margin负值（知道子节点宽高）
（4）定位+margin:auto
（5）JS动态计算top、left值
06.什么是BFC？垂直margin重叠是为什么？怎么解决这个问题？
答：
概念：BFC全称BlockFormatting
Context，中文意思为块级格式上下文。
通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。比如清除浮动）并且在一个BFC中，块元素与行元素都会垂直的沿着其父元素的边框排列。
如何触发BFC
1.浮动元素，float除none以外的值
2.position的值不为static或者relative
3.display不为none
4.overflow除了visible以外的值
BFC的应用
1.解决浮动塌陷问题
2.自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow：hidden。）
3.解决设置margin值重叠问题。
总结：
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
07.什么是浮动，有什么作用，有何副作用，以及如何清除浮动？
答：浮动是使用给节点添加float属性，最初的设计是用来实现文字环绕的。
添加了float的节点脱离文档流，同时触发节点的BFC，让节点往一个方向靠，并排成一行。
当一个父节点的子节点全部浮动，就会造成父节点高度塌陷，
解决的办法首先是可以给父节点主动添加高度值，再者利用只要有一个子节点不浮动原理来添加一个不浮动的节点（通常使用伪元素before，after），再者还可以触发父节点的bfc，常用的定位，或者overflow：hidden。
08.CSS里面有哪些相对单位？都是相对什么的？
答：REM,EM,VW,VH等
__
REM：相对于根节点html的font-size
__
EM：父节点的font-size
__W：视口的宽度为100VW，相对于把视口分为100份
__
VH：视口高度为100VH，同理
__陨系ノ欢伎梢栽谝贫俗鲆趁媸逝洌ǔJ褂_EM和VW
09.fixed是相对于谁定位的？如果加上transform会出现问题吗？
答：fixed定位相对于浏览器视口来定位的。
添加上transform以后，fixed定位会失效。如果fixed元素的祖先有transform属性,则fixed元素会相对与这个祖先计算,而不是视口。
10.为什么不推荐用style内联元素？内联元素有什么缺点？（css文件可以缓存）
答：首先是style是节点的属性，不能被缓存；代码的可读性和可维护性相对弱一些，特别是多人协作开发的时候。但是如果一个页面的style样式足够少的时候，可以使用style元素，因为一次请求最多携带14K的数据，如果足够小，还可以节约一次请求。
11.简单描述http与https协议，以及为什么要三次握手？什么是长链接？
答：http与https都是目前主流传输协议。
目前http协议已经发展到2.0阶段，支持长链接，断点续传，cache缓存策略，多路复用，服务器推送等。
https相对于http更安全，增加了证书SSL加密，端口是433。
客户端SYN=1,Seq
=x，服务端接受到后，服务端就知道了，有一个客户端要链接我，然后服务器就会开启一个TCPsocket的端口，然后返回数据给前端也是SYN=1,SEQ=Y,ACK=x+1，客户端接受到后，在发一个seq，和ACK+1.主要是为了防止开启无用的链接，或者网络延迟丢包，服务器无法确定到底客户端有没有收到消息。
在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经建立的连接。
Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。实现长连接需要客户端和服务端都支持长连接。
为何需要长链接?
长链接可以省去较多的TCP建立和关闭的操作，减少浪费，节约时间。
12.http常见状态码有哪些？301和302的区别是什么？304是指什么？
答：404：找不到资源；
500：服务器内部错误；
200：请求成功，并返回数据；
301：永久重定向；
302：_偈币贫墒褂迷_RI；
304：资源未修改，可使用缓存；
400：请求语法错误（一般为参数错误）；
403：没有权限访问。。。等
13.浏览器页面渲染的流程是什么（输入url后页面发生什么）？
答：首先dns解析IP，建立tcp链接下载资源，构建dom树，当遇到link标签，会下载并执行解析css（不会阻止dom树的构建）当遇到script标签的是，dom树构建会暂停，下载并执行完js才会继续（defer（下载延迟执行），async（异步下载并执行））然后再布局和绘制（layout,paint）最后再render。
14.什么是reflow与repain？哪些操作会触发reflow，如何避免？
答：reflow：回流，当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。
__repain：重绘，当元素的样式（布局不发生）发生改变的时候。
以下常见操作都会触发：
浏览器窗口大小改变
元素尺寸、位置、内容发生改变
元素字体大小变化
添加或者删除可见的dom元素
激活CSS伪类（例如：:hover）等
尽量减少DOM操作。
15.HTML5常用的API有哪些？你用过哪些？
答：video、audio，获取dom的方式（queryselector），websocket
Canvas，svg，requestAnimationFrame，Geolocation，stroage，notification，OrientationAPI用于检测手机的摆放方向等
16.请列举出几个常见的浏览器兼容性问题？
答：现在市面上IE678基本已经停止使用了，所以尽量不要说这方面的兼容性。
1、不同浏览器的默认margin和padding不一致
2、图片的默认间距不一致
3、获取视口的宽高window.innerheight/width
4、CSS3的动画，过渡，渐变，flex也有
5、Canvas，SVG
6、IE9以下不能的opacity，使用filter:alpha(opacity=50);
7、event.offsetX/Y
8、绑定事件IE9才支持
17.什么是浏览器缓存（知道什么是强缓存和协商缓存）？
答：当浏览器访问过后的资源，会被浏览器缓存的本地，当下次在访问页面的时候，如果没有过期，直接读取缓存，加快浏览器的加载效率。
http缓存机制：
1、Expires：通过设置最大缓存时间，当时间超过了就去服务器下载，
2、http1.1，cache-control：max-age=time，当time过期后，检测etag带上etag往服务器发请求，如果etag没变，直接告诉浏览器读本地缓存，如果没有etag就会检测Last-Modified，判断如果上一次更改的时候，距离本次访问时间比较久，说明文件没有发生改变，返回304。
强缓存就是当前访问时间还在设置的最大时间范围内。
协商缓存就是时间过了，通过检查etag或者last-modifed来使用缓存的机制。
18.说一下浏览器垃圾回收机制
答：老：标记清除算法，GC会检测当前对象有没有被变量所引用，如果没有就回收。
新：Scavenge，把内存空间分为两部分，分别为From空间和To空间。当一个空间满了以后，会把空间中活动对象转移到另外一个空间，这样互换。
以上就是小编今天为大家分享的关于参加Web前端面试一定看的Web前端面试题库的文章，希望本篇文章能够对正准备参加web前端面试的小伙伴们有所帮助，想要了解web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利！