整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
017年11月16日，久游網(wǎng)將攜正版敢達(dá)IP游戲《機(jī)動(dòng)戰(zhàn)士敢達(dá)OL》出現(xiàn)在2017GTL武漢總決賽現(xiàn)場(chǎng)！屆時(shí)GTL比賽主舞臺(tái)將打破次元壁，為各位玩家呈現(xiàn)一個(gè)宏大的敢達(dá)世界。
GTL聯(lián)賽，全稱技嘉TOP聯(lián)盟高校電子競(jìng)技，是技嘉金牌主板發(fā)起主辦的全國(guó)高校競(jìng)技聯(lián)賽，作為高校玩家自己的聯(lián)賽，整個(gè)賽事的執(zhí)行將由技嘉Top聯(lián)盟成員同學(xué)完成，旨在激發(fā)高校學(xué)生的賽事組織潛能，營(yíng)造良好的高校體育競(jìng)技氛圍，展現(xiàn)高校學(xué)生的競(jìng)技風(fēng)采，同時(shí)通過技嘉Top聯(lián)盟實(shí)現(xiàn)全國(guó)高校學(xué)生的互動(dòng)交流。如今GTL已經(jīng)覆蓋全國(guó)超過1000所大中院校，成為全國(guó)高校最受歡迎，最具人氣的全國(guó)高校電競(jìng)盛會(huì)。
在本次2017GTL武漢總決賽上，《機(jī)動(dòng)戰(zhàn)士敢達(dá)OL》的頂尖機(jī)師玩家們將在這里展開一場(chǎng)巔峰表演賽，向各位敢達(dá)粉絲展示游戲中的精彩對(duì)決。表演賽將以6V6局地戰(zhàn)的開打，將高手間的操作發(fā)揮對(duì)決發(fā)揮到極致，讓所有人都能觀賞到一場(chǎng)最為淋漓盡致的視覺盛宴。
據(jù)悉，游戲現(xiàn)在已經(jīng)進(jìn)行到了”逆襲的夏亞”新版本，“沙扎比”“ν敢達(dá)”等耳熟能詳?shù)母疫_(dá)系列機(jī)體已悄然上線。作為一款擁有正版敢達(dá)IP，多種類型上百臺(tái)機(jī)體，《機(jī)動(dòng)戰(zhàn)士敢達(dá)OL》一直以來(lái)都在不斷推陳出新，不斷更新更多的內(nèi)容。而在不久之后，還有全新的機(jī)體即將加入到游戲之中。
想知道更多游戲詳情的玩家，請(qǐng)進(jìn)入游戲官網(wǎng)（http://ms.9you.com）,或在11月16日晚親臨武漢大學(xué)GTL比賽現(xiàn)場(chǎng)一探究竟吧！
《機(jī)動(dòng)戰(zhàn)士敢達(dá)OL》是由日本萬(wàn)代南夢(mèng)宮在線研發(fā)，國(guó)內(nèi)久游網(wǎng)獨(dú)家代理的TPS機(jī)甲大作。忠于原著的U.C.時(shí)代世界線，豐富的MS機(jī)體，多變的戰(zhàn)場(chǎng)局勢(shì)，定必讓你猶如親臨敢達(dá)對(duì)戰(zhàn)的最前線！
《機(jī)動(dòng)戰(zhàn)士敢達(dá)OL》官網(wǎng)：http://ms.9you.com/
《機(jī)動(dòng)戰(zhàn)士敢達(dá)OL》論壇：http://bbs.9you.com/forum-177-1.html
《機(jī)動(dòng)戰(zhàn)士敢達(dá)OL》玩家交流群：424290076
HTML是用來(lái)開發(fā)網(wǎng)頁(yè)的，它是開發(fā)網(wǎng)頁(yè)的語(yǔ)言
全稱HyperText Mark-up Language，超文本標(biāo)記語(yǔ)言
標(biāo)記就是標(biāo)簽
<標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等，標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的。
超文本 兩層含義：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁(yè)標(biāo)題</title>
</head>
<body>
網(wǎng)頁(yè)顯示內(nèi)容
</body>
</html>第一行<!DOCTYPE html>是文檔聲明
用來(lái)指定頁(yè)面所使用的html的版本, 這里聲明的是一個(gè)html5的文檔
<html>...</html>標(biāo)簽是開發(fā)人員在告訴瀏覽器
整個(gè)網(wǎng)頁(yè)是從<html>這里開始的，到</html>結(jié)束
也就是html文檔的開始和結(jié)束標(biāo)簽
<head>...</head>標(biāo)簽用于定義文檔的頭部
是負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的
<body>...</body>標(biāo)簽是編寫網(wǎng)頁(yè)上顯示的內(nèi)容
網(wǎng)頁(yè)文件的后綴是.html, 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)
VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費(fèi)、開源的跨平臺(tái)代碼編輯器
目前是前端(網(wǎng)頁(yè))開發(fā)使用最多的一款軟件開發(fā)工具
下載網(wǎng)址: https://code.visualstudio.com/Download
選擇對(duì)應(yīng)的安裝包進(jìn)行下載:
安裝一切默認(rèn)
1 標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫
2 根據(jù)標(biāo)簽的書寫形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的一對(duì)標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽 2.2 單標(biāo)簽是一個(gè)標(biāo)簽組成，沒有標(biāo)簽內(nèi)容， 比如: img標(biāo)簽
標(biāo)簽的使用形式
列表標(biāo)簽
網(wǎng)頁(yè)效果
表格標(biāo)簽
<table>標(biāo)簽：表示一個(gè)表格
<tr>標(biāo)簽：表示表格中的一行
<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭
屬性設(shè)置
border: 1px solid black:設(shè)置邊框和顏色
border-collapse: collapse:設(shè)置邊框合并
網(wǎng)頁(yè)效果
表單標(biāo)簽
表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器
<form>標(biāo)簽 表示表單標(biāo)簽，定義整體的表單區(qū)域
一個(gè)表單中有很多信息組成,比如 姓名,愛好,地址等,這些內(nèi)容有很多其他標(biāo)簽來(lái)承載
這些標(biāo)簽稱為表單元素標(biāo)簽
網(wǎng)頁(yè)效果
表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器
兩種方式的區(qū)別:
表單元素屬性設(shè)置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
姓名 type="text" 定義單行文本輸入框
密碼 type="password" 定義密碼輸入框
性別 type="radio" 定義單選框
愛好 type="checkbox" 定義復(fù)選框
照片 type="file" 定義上傳文件
個(gè)人描述 <textarea></textarea> 定義多行文本輸入框
地址 <select></select> 定義下拉列表
提交 type="submit" 定義提交按鈕
重置 type="reset" 定義重置按鈕
按鈕 type="button" 定義一個(gè)普通按鈕
-->
<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個(gè)人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>
點(diǎn)擊提交：
可以看到服務(wù)器收到了請(qǐng)求報(bào)文。
試了阿里、美團(tuán)與滴滴后，我有了幾個(gè)重大發(fā)現(xiàn)…>>>
html標(biāo)簽是由<>包圍的關(guān)鍵詞 html標(biāo)簽是成對(duì)出現(xiàn)的 有部分標(biāo)簽是沒有結(jié)束標(biāo)簽的，叫單標(biāo)簽， 頁(yè)面中所有的內(nèi)容，都是要放在HTML標(biāo)簽中的
HTML標(biāo)簽分三部分：
標(biāo)簽名稱
標(biāo)簽內(nèi)容
標(biāo)簽屬性
HTML標(biāo)簽具有語(yǔ)義化：
語(yǔ)義化就是僅通過標(biāo)簽名就能判斷出該標(biāo)簽的內(nèi)容
語(yǔ)義化的作用： 網(wǎng)頁(yè)結(jié)構(gòu)層次更清晰 更加容易被搜索出來(lái) 更加讓屏幕閱讀器讀出該頁(yè)面的內(nèi)容
標(biāo)簽的內(nèi)容就是在一對(duì)標(biāo)簽內(nèi)部的內(nèi)容 標(biāo)簽的內(nèi)容可以是其他標(biāo)簽
class屬性：用于定義元素的類名
id屬性：用于指定元素的唯一id
style屬性：用于指定元素的行內(nèi)樣式
title屬性：用于指定元素的額外信息
accesskey屬性： 用于指定激活元素的快捷鍵
tabindex屬性：用于指定元素在tab鍵下的次序
dir屬性：用于指定元素中內(nèi)容的文本方向，屬性值為ltr 或 rtl，left to right 和 right to left
leng屬性： 用于指定元素內(nèi)容的語(yǔ)言。
onload:在頁(yè)面加載結(jié)束之后觸發(fā)
onunload：在用戶從頁(yè)面離開時(shí)發(fā)生，如點(diǎn)擊跳轉(zhuǎn)，頁(yè)面重載，關(guān)閉瀏覽器窗口等。
form：表單事件
onblur：當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)
onchange:在元素的元素值被改變時(shí)觸發(fā)
onfocus:當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)
onreset:當(dāng)表單中的重置按鈕被點(diǎn)擊時(shí)
onselect:在元素中文本被選中后觸發(fā)
onsubmit:在提交表單時(shí)觸發(fā)
keyboard：鍵盤事件
onkeydown:在用戶按下按鍵時(shí)觸發(fā)
onkeypress:在用戶按下按鍵后，按著按鍵時(shí)觸發(fā)，該屬性不會(huì)對(duì)所有按鍵生效
不生效的有：alt, ctrl, shift, esc
onkeyup:當(dāng)用戶釋放按鍵時(shí)觸發(fā)
Mouse：鼠標(biāo)事件
onclick:當(dāng)在元素上發(fā)生鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)
onblclick: 當(dāng)元素上發(fā)生鼠標(biāo)雙擊時(shí)觸發(fā)
onmousedown:當(dāng)元素上按下鼠標(biāo)按鈕時(shí)觸發(fā)
onmousemove:當(dāng)鼠標(biāo)指針移動(dòng)到元素上觸發(fā)
onmouseout:當(dāng)元素指針移出元素時(shí)觸發(fā)
onmouseover:當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)
onmouseup: 當(dāng)在元素上釋放鼠標(biāo)時(shí)觸發(fā)
media:媒體事件
onabort:當(dāng)退出時(shí)觸發(fā)
onwaiting:當(dāng)媒體已停止播放但打算繼續(xù)播放時(shí)觸發(fā)
文本標(biāo)簽
段落標(biāo)簽用來(lái)描述一段文字
標(biāo)題標(biāo)簽用來(lái)描述一個(gè)標(biāo)題
標(biāo)題標(biāo)簽總有六級(jí)。
用于強(qiáng)調(diào)某些文字的重要性
多媒體標(biāo)簽
鏈接標(biāo)簽<a></a> 圖片標(biāo)簽<img/> 視頻標(biāo)簽<video></video>
<video src="da.mp4" controls="controls">
音頻標(biāo)簽<audio></audio>
<audio src="a.mp3"></audio>
列表 無(wú)序列表標(biāo)簽
<ul><li></li></ul>
<li></li>代表無(wú)序列表中的每一個(gè)元素
有序列表
<ol><li></li></ol>
定義列表<dl></dl> <dt></dt>定義列表中的項(xiàng)目 <dd></dd>描述列表中的項(xiàng)目
<dl> <dt></dt> <dd></dd> <dd></dd> </dl>
表格： 表格標(biāo)簽<table> 表格的行<tr> 表頭<th> 單元格<td>
表格合并
同一行內(nèi)，合并幾列colspan="2"
同一列內(nèi)，合并幾行rowspan="2"
表單標(biāo)簽<form>
<form></form>表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來(lái)的數(shù)據(jù)。
<form method="傳送方式" action="服務(wù)器文件">
action:瀏覽者輸入的數(shù)據(jù)被傳送到的地方，比如一個(gè)php頁(yè)面
method:數(shù)據(jù)傳送的方式
輸入標(biāo)簽<input>
input name為文本框命名，用于提交表單，后臺(tái)接收數(shù)據(jù)用 value為文本輸入框設(shè)置默認(rèn)值 type通過定義不同的type類型，input的功能有所不同
type功能： text，password，radio，checkbox，file，button，reset，submit，email，url，number，range，date，color
<button>按鈕： button標(biāo)簽的功能與input按鈕功能相同，button是雙標(biāo)簽，內(nèi)部可以嵌套其他行內(nèi)元素。
下拉選擇框select
<select> <option value="book"></option> <option value="go" selected="selected"> go </option> <option value="sport"></option> </select>
文本域textarea cols:多行輸入域的列數(shù) rows:多行輸入域的行數(shù)
其他語(yǔ)義化標(biāo)簽 div盒子 俗稱盒子,division分割
在網(wǎng)頁(yè)制作過程中，可以把一些獨(dú)立的邏輯部分劃分出來(lái)，放在一個(gè)div標(biāo)簽中，這個(gè)div標(biāo)簽的作用就是相當(dāng)于一個(gè)容器。
什么是邏輯部分，它是頁(yè)面上相互關(guān)聯(lián)的一組的元素，如網(wǎng)頁(yè)中的獨(dú)立的欄目版塊，就是一個(gè)典型的邏輯部分。
網(wǎng)頁(yè)頭部header
html5新增語(yǔ)義化標(biāo)簽，定義網(wǎng)頁(yè)的頭部
主要用于布局，分割頁(yè)面的結(jié)構(gòu)
底部信息footer
html5新增語(yǔ)義化標(biāo)簽，定義網(wǎng)頁(yè)的底部
主要用于布局，分割頁(yè)面的結(jié)構(gòu)
導(dǎo)航nav
html5新增語(yǔ)義化標(biāo)簽，定義一個(gè)導(dǎo)航 主要用于布局，分割頁(yè)面的結(jié)構(gòu)
文章article
html5新增語(yǔ)義化標(biāo)簽，定義一篇文章 主要用于布局，分割頁(yè)面的結(jié)構(gòu)
側(cè)壁欄aside
語(yǔ)義化標(biāo)簽，定義主題內(nèi)容外的信息 主要用于布局，分割頁(yè)面的結(jié)構(gòu)
時(shí)間標(biāo)簽time 語(yǔ)義化標(biāo)簽，定義一個(gè)時(shí)間
網(wǎng)頁(yè)結(jié)構(gòu)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <div> </div> </html>
<!DOCTYPE html>定義文檔類型，告知瀏覽器用哪一種標(biāo)準(zhǔn)解釋HTML。
<html></html>可告知瀏覽器其自身是一個(gè)Html文檔。
head定義文檔的頭部 頭部元素title,script,style,link,meta
title定義文檔的標(biāo)題 link標(biāo)簽將css樣式文件鏈接到html文件內(nèi)
meta定義文檔的元數(shù)據(jù)
每個(gè)網(wǎng)頁(yè)都是由不同的功能模塊組成的，因此在將制作網(wǎng)頁(yè)的時(shí)候，我們要將網(wǎng)頁(yè)的每個(gè)功能模塊分開
常見多由頭部區(qū)，展示圖片區(qū)域，主題區(qū)域，底部信息區(qū)域組成。
網(wǎng)頁(yè)由上到下，由內(nèi)到外
div,header,footer,nav,article,aside等標(biāo)簽多用于模塊劃分
css全稱為層疊樣式表，它主要用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字的大小，顏色，字體加粗等。
css代碼通常存放在style標(biāo)簽內(nèi)
css樣式由選擇符和聲明組成，而聲明由屬性和值組成
選擇符{屬性：值}
選擇符，叫選擇器
css放置 直接書寫在標(biāo)簽的style屬性中，不建議使用
內(nèi)聯(lián)樣式表 外聯(lián)樣式表
css中的繼承
不可繼承樣式： display,margin,border,padding,background,height,min-height,max-height,width,min-width,max-width,overflow,position,left,right,top,bottom,z-index,float,clear
可以繼承的樣式 letter-spacing,word-spacing,white-space,line-height,color,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transform,direction,visibility,cursor
選擇器的種類
標(biāo)簽選擇器 通配符選擇器 屬性選擇器 后代選擇器 一級(jí)子元素選擇器 id選擇器 class選擇器 偽類選擇器
選擇某個(gè)父元素的直接子元素 后代選擇器是選擇父元素的所有子孫元素，一級(jí)子元素原則器只選擇第一級(jí)子元素。
:hover鼠標(biāo)移入某個(gè)元素
.box:hover{
color:red;
}
:before在某個(gè)元素的前面插入內(nèi)容
div:before{
content: '內(nèi)容';
background-color: yellow;
color: red;
font-weight: bold;
}
:after在某個(gè)元素的后面插入內(nèi)容
div:after{
content: '內(nèi)容';
background-color: yellow;
color: red;
font-weight: bold;
}
群組選擇器 可以對(duì)多個(gè)不同的選擇器設(shè)置相同的樣式
選擇器的優(yōu)先級(jí)：
權(quán)重計(jì)算方式：
標(biāo)簽選擇器：1, class選擇器：10, id選擇器：100, 行內(nèi)樣式：100, !important最高級(jí)別，提高樣式權(quán)重，擁有最高級(jí)別 就近原則
css樣式屬性
background-color background-image background-position 背景圖片不會(huì)占位
背景圖片重復(fù)background-repeat
background-repeat: no-repeat no-repeat: 設(shè)置圖像不重復(fù)，常用 round: 自動(dòng)縮放直到適應(yīng)并填充整個(gè)容器 space:以相同的間距平鋪且填充滿整個(gè)容器
背景圖片定位 background-attachment
background-attachment:fixed
背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)
background-attachment的值可以是scroll跟隨滾動(dòng)，fixed固定。
字體
font-family字體 font-size font-weight: normal,bold,bolder,lighter,100-900(400=normal,700=bold)
color字體顏色
字體斜體font-style normal文本正常顯示 italic文本斜體顯示 oblique文本傾斜顯示
文本屬性 行高line-height 文本水平對(duì)齊方式 text-align left,center,right
文本所在行高的垂直對(duì)齊方式vertical-align
baseline默認(rèn) sub垂直對(duì)齊文本的下標(biāo) super垂直對(duì)齊文本的上標(biāo) top對(duì)象的頂端與所在容器的頂端對(duì)齊 text-top對(duì)象的頂端與所在行文字頂端對(duì)齊
middle元素對(duì)象基于基線垂直對(duì)齊 bottom對(duì)象的底端與所在行的文字底部對(duì)齊 text-bottom對(duì)象的底端與所在行文字的底端對(duì)齊
文本縮進(jìn)text-indent text-indent: 2em;
字母之間的間距l(xiāng)etter-spacing
單詞之間的間距word-spacing
文本的大小寫： text-transform
capitalize:文本中的每個(gè)單詞以大寫字母開頭 uppercase:定義僅有大寫字母 lowercase:定義僅有小寫字母
文本的修飾text-decoration none默認(rèn) underline下劃線 overline上劃線 line-through中線
自動(dòng)換行word-wrap
word-wrap: break-word;
基本樣式： width height
cursor鼠標(biāo)樣式： 定義鼠標(biāo)的樣式cursor:pointer
default:默認(rèn) pointer:小手形狀 move:移動(dòng)形狀
透明度opacity opacity:0.3
可見性：visibillity
visibility: hidden visible 元素可見 hidden 元素不可見
collapse:當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列，不會(huì)影響表格的布局。
溢出隱藏overflow
設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度以及寬度時(shí)如何顯示內(nèi)容
visible默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外
hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的
scroll內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容
auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看
邊框顏色： outline
input文本框入框自帶邊框，我們可以通過outline修改邊框
outline: 1px solid #ccc;
outline: none 清除邊框
樣式重置：
一開始沒有css樣式，為了界面美觀，很多元素自帶margin,padding等樣式，但這些樣式在不同瀏覽器的值都是不一樣的，需要將css樣式重置，保證在不同瀏覽器中顯示一致。 清除元素的margin和padding 去掉自帶的列表符 去掉自帶的下劃線
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
