㈠ 前端開發都包括哪些技術
前端開發是創建Web頁面或app等前端界面呈現給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互 [1] 。隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。
前端開發則是網站的前台代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級版本HTML5、CSS3，以及SVG等。
前端開發需要學習的技術
1 掌握基本web前端開發技術：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug
2 必須掌握網站性能優化、SEO和伺服器端開發技術的基礎知識
3 必須學會運用各種web前端開發與測試工具進行輔助開發
4 除了掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等
5 未來web前端開發工程師還要研究HTML5、web視覺設計、網站配色、網站交互設計模式等相關技術
web前端有廣闊的發展空間，app、小程序、移動端、pc端等都網站是需要前端技術的開發支持才能夠完成，技術門檻相對較低、需求量較大，薪資待遇良好。只要是互聯網端的客戶界面，就需要前端來製作完成，前端開發的編程量不大，但是需要部分編程，入門簡單，但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...
㈡ 前端代碼DIV+CSS關於定位
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>關於定位</title>
<styletype="text/css">
body{
margin-left:0px;
margin-top:0px;
margin-right:00px;
}
#header{
width:800px;
height:30px;
background-color:#9F9;
}
#main{
width:800px;
height:auto;
background-color:#FF6;
position:relative;
}
#one{
width:300px;
height:200px;
background-color:#F30;
position:absolute;
left:0px;
top:0px;
}
#tow{
width:490px;
height:200px;
background-color:#93F;
position:absolute;
left:310px;
top:0px;
}
#three{
width:400px;
height:200px;
background-color:#390;
position:absolute;
left:0px;
top:210px;
}
#four{
width:390px;
height:200px;
background-color:#66F;
position:absolute;
left:410px;
top:210px;
}
#foot{
width:960px;
height:30px;
background-color:#3C9;
}
</style>
<scripttype="text/javascript"src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<divalign="center">
<divid="header"align="center">頭部</div>
<divid="main">
<divid="one">one</div>
<divid="tow">tow</div>
<divid="three">three</div>
<divid="four">four</div>
</div>
<divid="foot"align="left">版權</div>
</div>
</body>
<scripttype="text/javascript">
$(document).ready(function(){
varlast=$("#main>div").last();
vartop=last.css("top").replace("px","");
top=parseInt(top);
varheight=last.css("height").replace("px","");
height=parseInt(height);
varmainHeight=top+height;
$("#main").css("height",mainHeight+"px");
});
</script>
</html>
你的布局style都不用改，只需要在頁面載入完成後，計算出div#main中的div佔用的實際高度，並賦值給div#main。
計算原理：div#main中的每一個div都是設置了固定的top和height的，那麼最後一個div的top+height肯定就是div#main的實際佔用高度。
代碼中，我引用了jquery的css方法，你如果不jquery也可以自己用js原生寫。還有什麼問題就追問哈。
㈢ 網頁前端代碼用css如何實現如下圖不規則的圖片排列。滑鼠經過圖片突出顯示大圖
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
html,body{margin:0;padding:0;}
.box{margin:0auto;width:400px;transform:rotate(-45deg);}
span{display:inline-block;width:50px;height:50px;margin:01px2px0;background-color:lightblue;transition:1s;}
span:hover{transform:scale(3);background-color:red;}
</style>
</head>
<body>
<divclass="box">
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
代碼實現的是不規則排列和滑鼠滑過放大，至於點擊出現左右箭頭切換就要用到JS了
㈣ Web前端項目中編寫CSS代碼的幾點建議
明白何謂Margin Collapse
使用Flexbox進行布局
使用CSS Reset
一切應為Border-box
以背景圖方式使用Images
Better Table Borders
注釋格式優化
使用Kebab-case命名變
避免重復代碼
㈤ 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點就只有我說的那麼容
易,不,他們之所以被人使用,之所以這么火,就是因為強大!我說的這么簡單僅僅是打消你們覺得很難的原因,萬事開頭難,我講的都是入門的方法和技巧以及需
要知道的東西。另外告訴大家一個秘密,不要以為代碼很難敲,現在什麼語言都有自動提示代碼的功能,只需要輸入一個字元,兩個字元,後面的代碼都會彈出來讓
你選擇!還怕啥呢?所以你也不要怕你英語不好了。
㈥ Web前端面試指導（五十）：CSS樣式書寫有哪些
一、CSS書寫順序
1.位置屬性(position, top, right,z-index, display, float等)
2.大小(width, height, padding,margin)
3.文字系列(font, line-height,letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、CSS書寫規范
1.使用CSS縮寫屬性
CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
2.去掉小數點前的「0」
3.簡寫命名
很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！
4.16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。
5連字元CSS選擇器命名規范
1）長名稱或片語可以使用中橫線來為選擇器命名。
2）不建議使用「_」下劃線來命名CSS選擇器，為什麼呢？
輸入的時候少按一個shift鍵；瀏覽器兼容問題（比如使用_tips的選擇器命名，在IE6是無效的）能良好區分JavaScript變數命名（JS變數命名是用「_」）
6.不要隨意使用id
id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復使用，另外id的優先順序優先與class，所以id應該按需使用，而不能濫用。
7.為選擇器添加狀態前綴
有時候可以給選擇器添加一個表示狀態的前綴，讓語義更明了，比如下圖是添加了「.is-」前綴。
三、CSS命名規范
常用的CSS命名規則
頭：header
內容：content/Container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：right
滾動：scroll
內容：content
標簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guide
服務：service
注冊：regsiter
狀態：status
投票：vote
合作夥伴：partner
ID的命名-頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
ID的命名-導航
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
ID的命名-功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作夥伴：partner
友情鏈接：link
版權：right
四、注釋規范
/* Header */
內容區
/* End Header */
五、注意事項
1.一律小寫;
2.盡量用英文;
3.盡量不縮寫，除非一看就明白的單詞。
六、CSS樣式表文件命名
主要的 master.css
模塊 mole.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css
㈦ 前端代碼div+css是什麼意思
在前端代碼中，通常使用div+css來布局用戶頁面。通過這種組合方式，可以將網頁的內容與樣式分離，提高了前端開發的速度。下面就來使用div+css來實現兩種導航欄的編寫吧！
1.導航欄一：
<div id='menu'>
<a href="#">鏈接</a>|
<a href="#">鏈接</a>|
<a href="#">鏈接</a>|
<a href="#">鏈接</a>|
<a href="#">鏈接</a>
</div>
*{margin:0;padding:0}
#menu{
min-width:400px;
height:20px;
background:#pink;
text-align:center;
line-height:20px;
font-size:10px;
}
#menu a{
padding:10px;
color:blue;
text-decoration:none;
font-weight:bold
}
#menu a:hover{color:red}
2.導航欄二：
<ul id="menu">
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
</ul>
*{margin:0;padding:0}
body{min-width:500px;}
li{list-style:none}
body{text-align:center}
a{text-decoration:none}
a:hover{color:#BA2636}
#menu{ width:100%; height:3.75rem; background:#00A2CA;}
#menu li{display:inline; height:3.75rem}
#menu li a{display:inline-block; padding:0 1.25rem; height:3.75rem; line-height:3.75rem;
color:#FFF;font-weight:bold;font-size:1rem}
#menu li a:hover{background:#0095BB}
㈧ 網頁前端開發如何寫出整潔的css代碼和切圖到底是個什麼意思
網頁前端開發如何寫出整潔的css代碼和切圖，所指的是基於web的前端開發流程，製作者需要有一定的制圖以及前端代碼基礎。
使用制圖軟體中畫好效果圖。
使用制圖軟體根據頁面製作需求劃分切片，輸出。
使用代碼編寫軟體編寫前端的html、css代碼，整合切圖寫出完整的前端頁面。
前端代碼除了html和css之外，也可以增加js以滿足頁面交互需求。
制圖軟體推薦PS、FW，代碼編寫軟體推薦DW、HBuilder。
㈨ css的書寫規范，有哪些注意點
命名，製表符，簡寫，縮寫，等
㈩ html代碼和css代碼應該由程序員寫，還是由美工寫
Web前端設計主要分為5個步驟：
1.看需求;
2.畫草圖;
3.設計界面;
4.前端代碼編寫;
5.兼容性調試。
網頁美工是精通美學，photoshop（PS），FLASH，dreamwaver（DW）等一網站製作軟體的網路人員，且必須具有良好的創意和一定程度的審美觀。必要時需要一定的策劃知識。為網站所有的頁面畫出來並用DW和css排版出來。頁面必須清晰簡潔，還要適宜後台調用。
網頁美工是美工用Dreamwerver等網頁編輯軟體把已經設計好的平面效果圖，製做成HTML靜態網頁文件。這里就要求美工用到CSS和DIV技術了，也就是所謂的切圖。說的詳細一點就是，網頁美工一般需要精通PHOTOSHOP/CSS/HTML/JAVASCRIPT等網路語言或工具進行網頁框架，色彩，基調，創意等處理。