人人都能學懂的前端開發

加百利

  • 出版商: 機械工業
  • 出版日期: 2024-06-01
  • 售價: $714
  • 貴賓價: 9.5$678
  • 語言: 簡體中文
  • 頁數: 270
  • 裝訂: 平裝
  • ISBN: 7111753798
  • ISBN-13: 9787111753797
  • 立即出貨

買這商品的人也買了...

商品描述

雖然HTML/CSS作為非常經典的技術,已經有很多人寫過相關的教程,但它仍然沒有足夠簡單到任何人都可以嘗試來學習。
儘管作為前端技術方向,它有著豐富的介面交互,但裡面隱藏的邏輯規則很容易被忽略。
本書的主要內容為HTML/CSS的相關技術,包含了基礎標籤、智慧表單和語意化標籤等,
同時也解說了CSS選擇器、文字修飾、圖片修飾、浮動、溢位、
經典盒模型與彈性盒模型、偽元素等,除PC端佈局外還講解了針對行動端的網頁適配。
為了更好的閱讀體驗和學習效果,本書除了全彩印刷、掃碼看視頻,還大膽地做了幾項創新性嘗試,
包括預計閱讀時間、知識補給站、程式設計單字表、知識點案例化,以及線上練習平台等。
即便是非理工科出身的人,或是已經脫離系統學習多年的上班族,只要你對網頁製作有興趣,就可以學懂書中的內容。
本書的讀者對象主要針對網頁開發零基礎的人群,以及一些非電腦專業的網頁開發愛好者。
程式設計並非程式設計師的專利,作者希望本書能大幅降低讀者入門HTML/CSS的難度。

目錄大綱

前言
第1章 準備工作
1.1什麼是前端
1.1.1一道經典的面試題
1.1.2前端後端怎麼區分
1.1.3一些小問題
1.2網頁為什麼叫HTML
1.2.1常見瀏覽器介紹
1.2.2瀏覽器的規格與W3C
1.3編寫第一個網頁
1.4開發前的準備工作
1.4.1使用開發工具
1.4.2代碼基本規範
補給1:什麼是IP
補給2:什麼是DNS
補給3:你了解網域嗎
補給4:什麼是伺服器
補給5:修改檔案副檔名
補給6:何為綠色軟體
第2章 準備工作
2.1寫一篇博客
2.2製作百度新聞列表
2.2.1無序列表
2.2.2有序列表
2.3在網頁中加入圖片
2.3.1圖片的排列方式
2.3.2百分比大小
2.4如何取得自己喜歡的圖片
2.4.1圖片另存為
2.4.2開發者工具
2.5先搞懂路徑問題
2.5.1相對路徑與絕對路徑的區分
2.5.2圖片介紹練習
2.6來模擬個百度雲盤
2.7批量的數據展示
2.8個人履歷製作
2.9QQ登入表單
2.10其他屬性
補給1:表單的密碼管理
補給2:常見的圖片格式
第3章 樣式基礎與佈局
3.1認識CSS
3.1.1結構表現分離
3.1.2感受樣式的作用
3.1.3提取自己想要的顏色
3.2容器的作用
3.2.1給一篇文章排版
3.2.2div容器
3.2.3span容器
3.3樣式選擇器
3.4樣式為什麼會重疊
3.5優先權可以精確的計算嗎
3.5.1選擇器的權重值
3.5.2頭條新聞列表
補給1:顏色為什麼用十六進位表示
補給2:什麼是ID
補給3:程式碼註解的重要性
補給4:什麼是權重值
第4章 圖文的基本處理與混排
4.1文字樣式的處理
4.1.1字體基礎樣式
4.1.2字體排列方式
4.2新增背景圖
4.2.1背景圖與img標籤的區別
4.2.2背景圖的平鋪
4.2.3背景圖的定位
4.2.4平舖的巧妙利用
4.3浮動佈局
4.3.1文字環繞
4.3.2水平排列
4.3.3高度塌陷
4.3.4清除浮動影響
4.4完成一個聊天對話框
4.5浮動的進階
4.5.1浮動元素的排列原則
4.5.2右浮動的順序問題
4.5.3浮動元素的重疊問題
4.6為什麼需要盒子模型
4.6.1外邊距margin
4.6.2填充padding
4.6.3邊框border
4.7完成一個更複雜的佈局
4.8命令的簡寫形式
4.8.1背景background
4.8.2邊框border
4.8.3font字體
4.8.4margin邊距
4.8.5color顏色
4.8.6padding填充
補給1:瀏覽器中的座標系
補給2:控制面板的使用
第5章 頁面佈局與基本交互
5.1了解元素類型
5.1.1block與inline
5.1.2水平排列的差異
5.2精準的定位元素
5.2.1相對定位與絕對定位
5.2.2坐標體系
5.2.3固定定位
5.2.4如何確定參考系
5.3滑鼠的hover效果
5.4濾鏡相冊
5.5精靈圖
補給:製作精靈圖片
第6章 智慧表單與BFC規則
6.1語意化標籤
6.1.1語意化的作用
6.1.2常見標籤
6.2智慧表單製作
6.3其他屬性
6.3.1關於resize屬性
6.3.2關於outline屬性
6.4overflow的作用
6.5適當了解BFC
補給1:什麼是URL
補給2:程式漏洞為什麼叫BUG
第7章 進階選擇器與動畫
7.1文件圖示的添加
7.1.1nth-child(n)
7.1.2屬性選擇器
7.1.3nth-of-type(n)
7.2電影IMDB排行
7.3如何學習不常見的CSS選擇器
7.4一個精緻的開關
7.4.1陰影的概念
7.4.2偽元素
7.4.3背景過渡
7.4.4盒子陰影
7.4.5複選框的:checked狀態
7.5過渡效果
7.5.1幀和幀率的概念
7.5.2transition屬性
7.5.3升級照片牆
7.6綜合練習
7.7字體圖標
補給1:什麼是Unicode
補給2:計算機為什麼會採用二進位
補給3:硬碟為什麼會縮水
第8章 變形與3D
8.1元素也能變形
8.1.1定位與過渡的結合
8.1.2位移
8.1.3縮放
8.1.4旋轉
8.1.5綜合練習
8.2高級擴展
8.2.1透視與3D效果
8.2.23D翻轉菜單
8.2.3自訂幀動畫
第9章 行動端佈局
9.1什麼叫響應式網頁
9.1.1響應式網頁佈局
9.1.2媒介查詢
9.2PC端與行動端的差別
9.3行動裝置網頁適配
9.4viewport
9.5進階技巧
補給:什麼是像素
第10章 佈置神器flex
10.1彈性盒模型
10.1.1display:flex
10.1.2flex的佈局特性
10.1.3水平垂直居中
10.1.4強而有力的彈性盒模型
10.2行動端網頁綜合練習
第11章 項目實戰:製作個人站點
11.1為什麼需要個人網站
11.2動手之前先學點設計
11.2.1擬物化與扁平化
11.2.2複雜的動畫如何處理
11.3需要花錢買伺服器嗎
11.4專案的開發過程
11.5常見特效的實現
11.5.1動態背景
11.5.2banner圖切換
11.5.3時間軸效果
11.5.4美化卡片列表
11.5.5打字機效果
11.6如何添加音頻和視頻
11.6.1添加音頻
11.6.2添加視頻
補給1:世界上第一個程式設計師是誰
補給2:藍光高清與1080P的差別是什麼
附錄A單詞彙總
附錄B知識點數索引