幫助中心 | 我的帳號 | 關於我們

CSS創意項目實踐/Web開發與設計

  • 作者:(美)瑪蒂娜·道登//(英)邁克爾·基隆|責編:王軍//劉遠菁|譯者:殷海英
  • 出版社:清華大學
  • ISBN:9787302659808
  • 出版日期:2024/05/01
  • 裝幀:平裝
  • 頁數:336
人民幣:RMB 98 元      售價:
放入購物車
加入收藏夾

內容大鋼
    不要局限於製作平淡無奇的網頁!借助CSS,你可以掌控色彩、布局和排版,讓網頁不僅功能出眾,還富有美感。對於前端開發者和設計師來說,CSS是一項必須掌握的技能。本書將幫助你以正確的方式入門,邁出堅實的第一步。
    本書將引導你完成12個CSS創意項目,並幫助你逐步提升CSS技能。每個有趣的挑戰都以可下載的HTML框架開始。你將運用自己的設計理念來完善它們,並在探索過程中逐漸掌握CSS中的關鍵概念,包括過渡效果、布局和表單樣式等。你還將深入研究一些強大的特性,如Flexbox和網格布局。你從本書中學到的所有技能都可以輕鬆應用到大型應用程序中。學完本書後,你將收穫一系列炫酷的作品,可隨時將其用於你的下一個項目。
    主要內容:
    利用關鍵幀創建動畫;
    使用網格和Flexbox等布局技巧;
    對錶單元素進行樣式化,包括單選按鈕;
    嵌入字體以及與排版相關的樣式;
    利用偽元素和媒體查詢進行條件樣式化。

作者介紹
(美)瑪蒂娜·道登//(英)邁克爾·基隆|責編:王軍//劉遠菁|譯者:殷海英

目錄
第1章  CSS介紹
  1.1  CSS概述
    1.1.1  關注點分離
    1.1.2  什麼是CSS
  1.2  通過創建文章布局開始學習CSS
  1.3  向HTML添加CSS
    1.3.1  內聯CSS
    1.3.2  嵌入式CSS
    1.3.3  外部CSS
  1.4  CSS中的層疊
    1.4.1  用戶代理樣式表
    1.4.2  作者樣式表
    1.4.3  用戶樣式表
    1.4.4  CSS重置
    1.4.5  標準化器
    1.4.6  !important註釋
  1.5  CSS中的特異性
  1.6  CSS選擇器
    1.6.1  基本選擇器
    1.6.2  組合器
    1.6.3  偽類選擇器和偽元素選擇器
    1.6.4  屬性值選擇器
    1.6.5  通用選擇器
  1.7  編寫CSS的不同方式
    1.7.1  簡寫屬性
    1.7.2  格式化
  1.8  本章小結
第2章  使用CSS網格設計布局
  2.1  CSS網格
  2.2  顯示網格
  2.3  網格軌道和線條
    2.3.1  重複列
    2.3.2  minmax()函數
    2.3.3  auto關鍵詞
    2.3.4  分數(fr)單位
  2.4  網格模板區域
    2.4.1  grid-area屬性
    2.4.2  gap屬性
  2.5  媒體查詢
  2.6  無障礙性考慮因素
  2.7  本章小結
第3章  製作響應式動畫載入界面
  3.1  設置
  3.2  SVG基礎
    3.2.1  SVG元素的位置
    3.2.2  視口
    3.2.3  視圖框
    3.2.4  SVG中的形狀
  3.3  對SVG應用樣式
  3.4  在CSS中為元素添加動畫效果

    3.4.1  關鍵幀和動畫名稱
    3.4.2  duration屬性
    3.4.3  iteration-count屬性
    3.4.4  動畫的簡寫屬性
    3.4.5  animation-delay屬性
    3.4.6  transform-origin屬性
  3.5  無障礙性和prefers-reduced-motion媒體查詢
  3.6  對HTML進度條進行樣式設置
    3.6.1  對進度條進行樣式設置
    3.6.2  為-webkit-瀏覽器的進度條設置樣式
    3.6.3  樣式化-moz-瀏覽器的進度條
  3.7  本章小結
第4章  創建響應式新聞網站布局
  4.1  設置主題
    4.1.1  字體
    4.1.2  font-weight屬性
    4.1.3  字體的簡寫屬性
    4.1.4  視覺層次結構
    4.1.5  內聯元素與塊級元素
    4.1.6  引號樣式
  4.2  使用CSS計數器
    4.2.1  symbols描述符
    4.2.2  system描述符
    4.2.3  后綴描述符
    4.2.4  全面總結
    4.2.5  @counter與list-style-image
  4.3  對圖像進行樣式設置
    4.3.1  使用filter屬性
    4.3.2  處理載入失敗的圖片
    4.3.3  格式化圖像標題
  4.4  使用CSS多列布局模塊
    4.4.1  創建媒體查詢
    4.4.2  對列進行定義和樣式化
    4.4.3  使用column-rule屬性
    4.4.4  使用column-gap屬性調整間距
    4.4.5  使內容跨越多個列
    4.4.6  控制內容的分割
  4.5  添加最後的潤色
    4.5.1  文本兩端對齊和斷詞
    4.5.2  使文本環繞在圖像周圍
    4.5.3  將max-width和margin的值設置為auto
  4.6  本章小結
第5章  懸停互動的摘要卡片
  5.1  開始項目
  5.2  使用網格進行頁面布局
    5.2.1  使用網格布局
    5.2.2  媒體查詢
  5.3  使用background-clip屬性對標題進行樣式化
    5.3.1  設置字體
    5.3.2  使用background-clip

  5.4  對卡片進行樣式化
    5.4.1  外部卡片容器
    5.4.2  內部容器及其內容
  5.5  在懸停和焦點內狀態下使用過渡效果
  5.6  本章小結
第6章  製作個人資料卡片
  6.1  開始項目
  6.2  設置CSS自定義屬性
  6.3  創建全高度背景
  6.4  使用Flexbox對卡片進行樣式化
  6.5  美化和放置頭像圖片
    6.5.1  object-fit屬性
    6.5.2  負邊距
  6.6  設置背景大小和位置
  6.7  對內容進行樣式化
    6.7.1  姓名和職務
    6.7.2  space-around和gap屬性
    6.7.3  flex-basis和flex-shrink屬性
    6.7.4  flex-direction屬性
    6.7.5  段落
    6.7.6  flex-wrap屬性
  6.8  對動作進行樣式化
  6.9  本章小結
第7章  充分利用浮動特性
  7.1  添加首字下沉效果
    7.1.1  行距
    7.1.2  對齊方式
    7.1.3  第一個字母
  7.2  對引文進行樣式化
  7.3  讓文本環繞羅盤圖片
    7.3.1  添加shape-outside:circle屬性
    7.3.2  添加裁剪路徑
    7.3.3  使用border-radius創建形狀
  7.4  使文本環繞小狗圖像
    7.4.1  關於path()的使用
    7.4.2  浮動圖像
    7.4.3  添加shape-margin
  7.5  本章小結
第8章  設計結賬購物車
  8.1  開始項目
  8.2  主題設計
    8.2.1  排版設計
    8.2.2  鏈接和按鈕
    8.2.3  輸入文本框
    8.2.4  表格
    8.2.5  描述列表
    8.2.6  卡片
  8.3  移動端布局
    8.3.1  表格移動端視圖
    8.3.2  描述列表

    8.3.3  調用動作的鏈接
    8.3.4  內邊距、外邊距以及外邊距摺疊
  8.4  中等尺寸屏幕的布局
    8.4.1  右對齊的數字
    8.4.2  使前兩列左對齊
    8.4.3  使輸入文本框中的數字右對齊
    8.4.4  單元格內邊距和外邊距
  8.5  寬屏幕
  8.6  本章小結
第9章  創建虛擬信用卡
  9.1  開始項目
  9.2  創建布局
    9.2.1  調整信用卡尺寸
    9.2.2  設置信用卡正面的樣式
    9.2.3  信用卡背面的布局
  9.3  處理背景圖像
    9.3.1  背景屬性的簡寫形式
    9.3.2  文本顏色
  9.4  排版
    9.4.1  @font-face
    9.4.2  使用@supports創建備用方案
    9.4.3  字體大小和排版改進
  9.5  創建翻轉效果
    9.5.1  位置
    9.5.2  過渡和backface-visibility
    9.5.3  transition屬性
    9.5.4  cubic-bezier()函數
  9.6  設置圓角
  9.7  外框和文本陰影
    9.7.1  drop-shadow函數與box-shadow屬性
    9.7.2  文本陰影
  9.8  收尾
  9.9  本章小結
第10章  樣式化表單
  10.1  初始設置
  10.2  重置輸入控制項集樣式
  10.3  對輸入控制項進行樣式化
    10.3.1  對文本和電子郵件輸入控制項進行樣式設置
    10.3.2  讓選擇框和文本域的樣式與輸入框相匹配
    10.3.3  對單選按鈕和複選框進行樣式化
    10.3.4  使用:where()和:is()偽類
    10.3.5  設置選中狀態下的單選按鈕和複選框樣式
    10.3.6  使用:checked偽類
    10.3.7  設置單選按鈕被選中時顯示的圓點
    10.3.8  使用CSS為複選框設置標記
    10.3.9  使用:is()和:where()計算特異性級別
  10.4  對下拉菜單應用樣式
  10.5  對標籤和圖例進行樣式化
  10.6  為佔位文本添加樣式
  10.7  對發送按鈕進行樣式化

  10.8  錯誤處理
  10.9  為表單元素添加懸停和焦點樣式
    10.9.1  使用:focus及:focus-visible
    10.9.2  添加懸停樣式
  10.10  處理forced-colors模式
  10.11  本章小結
第11章  社交媒體分享鏈接的動畫效果
  11.1  處理CSS架構
    11.1.1  OOCSS
    11.1.2  SMACSS
    11.1.3  BEM
  11.2  開始項目
  11.3  獲取圖標
    11.3.1  媒體圖標
    11.3.2  圖標庫
  11.4  對區塊進行樣式化
  11.5  對元素進行樣式化
    11.5.1  Share按鈕
    11.5.2  Share菜單
    11.5.3  分享鏈接
    11.5.4  scale()
    11.5.5  繼承屬性值
  11.6  對組件進行動畫處理
    11.6.1  創建過渡
    11.6.2  展開和關閉組件
    11.6.3  對菜單進行動畫處理
  11.7  本章小結
第12章  使用預處理器
  12.1  運行預處理器
    12.1.1  npm的設置
    12.1.2  .sass與.scss
    12.1.3  CodePen的設置
    12.1.4  初始HTML和SCSS
  12.2  Sass變數
  12.3  @mixin和@include
    12.3.1  object-fit屬性
    12.3.2  插值
    12.3.3  使用mixin
    12.3.4  border-radius的簡寫屬性
  12.4  嵌套
  12.5  @each
  12.6  顏色函數
  12.7  @if和@else
  12.8  最後的思考
  12.9  本章小結
附錄

  • 商品搜索:
  • | 高級搜索
首頁新手上路客服中心關於我們聯絡我們Top↑
Copyrightc 1999~2008 美商天龍國際圖書股份有限公司 臺灣分公司. All rights reserved.
營業地址:臺北市中正區重慶南路一段103號1F 105號1F-2F
讀者服務部電話:02-2381-2033 02-2381-1863 時間:週一-週五 10:00-17:00
 服務信箱:bookuu@69book.com 客戶、意見信箱:cs@69book.com
ICP證:浙B2-20060032