了得網圖書_Web前端開發案例教程——HTML5+CSS3+JavaScript+JQuery+Bootst

第1章 Web前端開發概述\t1
1．1Web概述2
1．1．1Web客戶端技術2
1．1．2Web服務器端技術2
1．1．3超文本傳輸協議3
1．1．4統一資源定位符3
1．2HTML3
1．2．1HTML簡介3
1．2．2HTML的發展4
1．3CSS4
1．3．1CSS簡介4
1．3．2CSS的特點5
1．4JavaScript5
1．4．1JavaScript簡介5
1．4．2JavaScript的特點6
1．5jQuery6
1．6Bootstrap7
1．7其他前端框架7
1．7．1Angular7
1．7．2React7
1．7．3Vue7
小結8
第2章HTML5基礎Ⅰ9
2．1HTML5的新特性10
2．2HTML5文檔結構11
2．2．1基本結構11
2．2．2編輯工具12
2．3HTML5頭部標簽13
2．3．1標簽13<br>2．3．2<meta>標簽14<br>2．3．3<link>標簽14<br>2．3．4<style>標簽14<br>2．3．5<script>標簽15<br>2．4塊級標簽15<br>2．4．1基本的塊級標簽15<br>2．4．2常用於布局的塊級標簽17<br>2．5行級標簽22<br>2．5．1圖像標簽<img/>22<br>2．5．2圖片列表標簽<figure>和<figcaption>23<br>2．5．3範圍標簽25<br>2．5．4換行標簽<br/>25<br>2．5．5超鏈接標簽<a>26<br>2．6W3C標準30<br>2．6．1W3C提倡的Web頁面結構30<br>2．6．2HTML5的基本規範素和媒體支持31<br>2．7實踐指導34<br>小結35<br>拓展訓練36<br>第3章HTML5基礎Ⅱ37<br>3．1表格基礎38<br>3．1．1表格結構39<br>3．1．2表格標簽40<br>3．1．3表格屬性設置41<br>3．1．4跨行和跨列設置42<br>3．2表單45<br>3．2．1表單標簽47<br>3．2．2表單域47<br>3．2．3表單按鈕53<br>3．2．4HTML5新增的表單屬性54<br>3．2．5HTML5新增表單標簽55<br>3．2．6表單驗證56<br>3．3表格布局57<br>3．3．1應用場景57<br>3．3．2圖文布局57<br>3．3．3表單布局59<br>3．3．4表格的嵌套布局61<br>3．4<iframe>框架63<br>3．4．1<iframe>的用法64<br>3．4．2設置<iframe>常用屬性64<br>3．5實踐指導65<br>小結67<br>拓展訓練67<br>第4章CSS3基礎70<br>4．1CSS3簡介71<br>4．2CSS3基本語法72<br>4．2．1CSS3基本結構72<br>4．2．2在HTML5中引入CSS3樣式表72<br>4．2．3CSS3基本選擇器76<br>4．2．4CSS層疊性、繼承性和重要性80<br>4．2．5多選擇器的常用符號及組合82<br>4．3CSS的常用屬性82<br>4．3．1CSS的屬性單位82<br>4．3．2字體屬性83<br>4．3．3文本屬性85<br>4．3．4背景屬性87<br>4．3．5列表的常用屬性88<br>4．3．6超鏈接偽類樣式89<br>4．4實踐指導91<br>小結93<br>拓展訓練94<br>第5章CSS3布局95<br>5．1盒子模型及應用96<br>5．1．1盒子模型96<br>5．1．2盒子屬性96<br>5．2DIV+CSS3布局100<br>5．2．1<div>標簽的樣式設置100<br>5．2．2布局頁面設置102<br>5．2．3<div>標簽的嵌套103<br>5．2．4display屬性104<br>5．2．5<div>標簽的浮動106<br>5．2．6<div>標簽的定位109<br>5．2．7圓角邊框112<br>5．2．8典型的DIV+CSS3整體頁面布局113<br>5．3典型的局部布局115<br>5．3．1<div>-<ul>-<li>局部布局115<br>5．3．2<div>-<dl>-<dt>-<dd>局部布局119<br>5．4實踐指導121<br>小結123<br>拓展訓練124<br>第6章網站設計125<br>6．1網站開發流程126<br>6．1．1需求分析126<br>6．1．2偽界面設計127<br>6．1．3網站制作127<br>6．1．4測試網頁128<br>6．1．5發布網站128<br>6．2創建站點128<br>6．3頁面布局技術130<br>6．3．1表格布局130<br>6．3．2框架布局130<br>6．3．3DIV+CSS3布局131<br>6．4網頁制作131<br>6．4．1制作首頁布局131<br>6．4．2制作網頁模板132<br>6．4．3制作樣式表文件和其他頁面綁定133<br>6．4．4設置頁面間的鏈接135<br>6．5測試並發布網站135<br>6．5．1測試內容135<br>6．5．2發布站點136<br>6．6實踐指導139<br>小結141<br>拓展訓練141<br>第7章JavaScript基礎142<br>7．1JavaScript簡介143<br>7．1．1JavaScript的基本結構143<br>7．1．2腳本的執行原理145<br>7．2JavaScript基礎語法145<br>7．2．1變量146<br>7．2．2數據類型146<br>7．2．3注釋148<br>7．2．4運算符148<br>7．2．5常用的輸入/輸出148<br>7．3流程控制149<br>7．3．1分支結構149<br>7．3．2循環結構152<br>7．3．3轉移結構155<br>7．4函數157<br>7．4．1內置繫統函數157<br>7．4．2自定義函數159<br>7．5實踐指導160<br>小結164<br>拓展訓練164<br>第8章JavaScript對像165<br>8．1JavaScript核心對像166<br>8．1．1數組對像166<br>8．1．2字符串對像167<br>8．1．3日期對像170<br>8．1．4數學對像173<br>8．2自定義對像175<br>8．2．1對像的制作和使用175<br>8．2．2在對像內設定方法177<br>8．2．3將對像作為對像屬性使用178<br>8．3JavaScript的事件180<br>8．4實踐指導182<br>小結183<br>拓展訓練183<br>第9章JavaScript DOM185<br>9．1DOM概述186<br>9．2window對像187<br>9．2．1常用屬性187<br>9．2．2常用方法187<br>9．2．3常用事件189<br>9．3document對像191<br>9．3．1常用屬性191<br>9．3．2常用方法192<br>9．4其他對像194<br>9．4．1history對像194<br>9．4．2location對像195<br>9．4．3表單對像196<br>9．5DOM編程應用198<br>9．5素的顯示和隱藏198<br>9．5．2復選框全選效果202<br>9．6實踐指導204<br>小結205<br>拓展訓練205<br>第10章jQuery基礎206<br>10．1jQuery簡介207<br>10．1．1jQuery的使用207<br>10．1．2jQuery工廠函數208<br>10．2DOM對像與jQuery對像的相互轉換208<br>10．3jQuery的選擇器210<br>10．3．1基本選擇器210<br>10．3．2層次選擇器211<br>10．3．3過濾選擇器213<br>10．3．4表單選擇器221<br>10．4實踐指導223<br>小結223<br>拓展訓練223<br>第11章jQuery應用224<br>11．1jQuery的事件綁定225<br>11．1．1jQuery事件225<br>11．1．2常用的綁定方法225<br>11．1．3使用jQuery操作DOM227<br>11．2jQuery的動畫函數236<br>11．2．1show()和hide()函數236<br>11．2．2fadeIn()和fadeOut()函數237<br>11．2．3自定義動畫238<br>11．3jQuery的簡單應用239<br>11．3．1功能需求239<br>11．3．2功能實現240<br>11．4實踐指導246<br>小結246<br>拓展訓練246<br>第12章響應式布局247<br>12．1視口248<br>12．1．1PC端視口248<br>12．1．2移動端視口248<br>12．2媒體查詢與百分比布局250<br>12．2．1媒體查詢250<br>12．2．2百分比布局251<br>12．3柵格繫統254<br>12．3．1柵格繫統簡介254<br>12．3．2柵格繫統的應用254<br>12．4彈性盒布局255<br>12．4．1彈性盒布局簡介255<br>12．4．2彈性盒布局的應用258<br>12．5實踐指導261<br>小結262<br>拓展訓練262<br>第13章Bootstrap技術263<br>13．1Bootstrap技術簡介264<br>13．1．1Bootstrap技術基本介紹264<br>13．1．2Bootstrap技術的基本用法264<br>13．2柵格繫統265<br>13．3CSS全局樣式269<br>13．3．1基礎排版269<br>13．3．2表單270<br>13．3．3按鈕273<br>13．3．4圖片273<br>13．4Bootstrap組件274<br>13．4．1圖標274<br>13．4．2下拉菜單276<br>13．4．3輸入框278<br>13．4．4導航與導航條279<br>13．4．5縮略圖與媒體對像286<br>13．4．6列表組289<br>13．5實踐指導290<br>小結291<br>拓展訓練291<br>第14章綜合案例292<br>14．1網頁概述293<br>14．1．1導航條293<br>14．1．2搜索欄293<br>14．1．3滾動式信息欄294<br>14．1．4其素294<br>14．2導航條295<br>14．3搜索欄298<br>14．4滾動式推薦欄299<br>14．5其素301<br>14．5．1用戶信息欄301<br>14．5．2美食信息欄302<br>14．5．3特殊服務欄303<br>14．5．4外部鏈接欄304<br>14．5．5網頁信息欄305<br>14．5．6至頂（to-top）306<br>小結308<br>拓展訓練308</div> </div> <div>查看全部↓</div> </div> <br/><br><br>"</td></tr><tr> <td> </td></tr></table> </td></tr><tr valign=top><td colspan=4 height="53"> <table border=0 cellpadding=0 cellspacing=0 width="98%" align="center"><tbody><tr valign=bottom> <td colspan=2 height=23><span class="bt_1">網友評論</span> 我們期待著您對此商品發表評論</td> </tr><tr valign=top><td colspan=2> <table bgcolor=#000000 border=0 cellpadding=0 cellspacing=0 height=1 width="100%"> <tbody><tr> <td></td></tr></tbody> </table> </td></tr><tr valign=top><td colspan=2> <table align=center border=0 cellpadding=4 cellspacing=0 width=400> <tbody><tr align=middle><td width="100%"> <div align=center> <input style="FONT-SIZE: 12px" type=button value="我要評論" onClick="javascript:open('forum.asp?method=blank&id=491704056','','');"></div> </td></tr></tbody> </table> <div></div></td></tr><tr valign=top><td colspan=2> </td></tr></tbody> </table> </td></tr><tr valign=top><td colspan=4> <table width="98%" border="0" cellspacing="0" cellpadding="0" align="center"><tr> <td class="bt_1" height="26">相關商品</td> </tr><tr> <td height="1" bgcolor="#000000"></td> </tr><tr> <td valign="top"></td></tr><tr> <td valign="top"></td></tr><tr> <td> </td></tr></table> </td></tr></tbody> </table> </td></tr></table> </td></tr></table> <TABLE cellSpacing=0 cellPadding=0 width=1000 align=center border=0> <TBODY> <TR> <TD><IMG height=5 src="/liaode/images/bottom_01.jpg" width=1000></TD></TR> <TR> <TD align=middle> <TABLE class=size cellSpacing=1 cellPadding=0 width="100%" bgColor=ffffff><TBODY> <TR> <TD width="100%" height=15 align=center> <a href="contact.asp?t=3" class="links6" target=_blank><font color=red><b>在線留言</b></font></a> 商品價格為新臺幣 </TD> </tr> <TR> <TD width="100%" height=15 align=center> <a href="help.html" class="links6">關於我們</a> <a href="help.html" class="links6">送貨時間</a> <a href="help.html" class="links6">安全付款</a> <a href="user.asp" class="links6">會員登入</a> <a href="user.asp" class="links6">加入會員</a> <a href="user.asp?method=fillbill" class="links6">我的帳戶</a> <a href="help_5.html" class="links6"><font color=red>網站聯盟</font></a> </TD> </tr> <TR> <TD width="100%" height=15 align=center> <a href="http://www.liaode.com.tw/sitemap.htm" title="DVD" target="_blank" class="links6"><strong>DVD</strong></a> <a href="http://www.liaode.com.tw/sitemap.xml" title="連續劇" target="_blank" class="links6"><strong>連續劇</strong></a> Copyright © 2024, Digital 了得網 Co., Ltd. </TD> </tr> </TBODY></TABLE></TD></TR></TBODY></TABLE> <style type="text/css"> .ui-scrolltop:hover { opacity: 1; filter: alpha(opacity=100); -moz-transition: opacity 0.3s ease-in,opacity 0.3s ease-out; -webkit-transition: opacity 0.3s ease-in,opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-in,opacity 0.3s ease-out; transition: opacity 0.3s ease-in,opacity 0.3s ease-out; } .ui-scrolltop { display: block; position: fixed; _position: absolute; right: 10px; bottom: 200px; z-index: 9999; height: 60px; width: 60px; text-indent: -999999px; overflow: hidden; background: #000 url(http://liaode.com.tw/images/untitled.png) 18px 21px no-repeat; opacity: 0.5; filter: alpha(opacity=50); cursor: pointer; -moz-transition: opacity 0.3s ease-in,opacity 0.3s ease-out; -webkit-transition: opacity 0.3s ease-in,opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-in,opacity 0.3s ease-out; transition: opacity 0.3s ease-in,opacity 0.3s ease-out; } </style> <a id="J_ScrollTopBtn" class="ui-scrolltop" title="返回頂部" href="#top">返回頂部</a>  <script type="text/javascript"> var pkBaseURL = (("https:" == document.location.protocol) ? "https://www.conn.tw/" : "http://adcenter.conn.tw/"); document.write(unescape("%3Cscript src='" + pkBaseURL + "track/oeya_url_cookie.js' type='text/javascript'%3E%3C/script%3E")); </script><script type="text/javascript"> var manu_code = '9nTT0aH7gmjA948'; var code='member'; var code_value='$member'; var code_sub=''; var pro_info=''; var action_name = ''; url = pkBaseURL + "track/oeya_url_cookie.php"; oeya_log(action_name, manu_code, url,code,code_value,code_sub,pro_info); </script>   <div id="dialog-warning" style="display:none;" title="提示"> <p><span class="red">請選擇顏色、尺碼等選項！</span></p></div><div id="dialog-confirm" style="display:none;" title="提示"> <p><span class="red">已成功加入購物車！</span></p></div></body></html>

商品搜索

商品分类

【醫學】

【各大出版社】

【医学】

【各大出版社】

編輯推薦

內容簡介

作者簡介

目錄