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培訓官網，最後祝願小夥伴們工作順利！