帶着問題去看書學習啦~
HTML5＋CSS3＋JavaScript Web 前端開發案例教程（慕課版）「不推薦」，微信讀書中找到的學習Web前端書籍，第7章開始啦，耶(＾－＾)V
習題
7-1 CSS3中 dispIay 屬性的作用是什麼？
- 用于控制布局。
- 每個标簽都有一個預設的display值，與标簽的類型有關。
- 預設值通常是 block 或 inline。
- 值為 block 的标簽通常叫塊狀标簽（比如<div>，<p>，<form>），值為inline的标簽通常叫行内标簽（比如 <span>，<a>）。
7-2 fIoat 屬性的屬性值有哪些？含義分别是什麼？
- left：表示标簽向左浮動
- right：表示标簽向右浮動
7-3 寫出為元素添加多個變形效果的代碼（僅寫出添加變形效果的關鍵代碼）。
圖檔邊移動邊旋轉：
img {padding: 30px;transition: 2s ease all;transform-origin: center; transform: translate(400px, 0) rotate(360deg);}
複制
7-4 用于設定過渡效果的屬性是什麼，其屬性值有哪些？
「transition-property：（指定參與過渡）」
文法格式：transition-property: all | none |[]
- all：預設值，表示所有可以進行過渡的CSS屬性。
- none：表示不指定過渡的CSS屬性。
- ：表示指定要進行過渡的CSS屬性；可以同時指定多個屬性值，以英文逗号“,”進行分隔。
「transition-duration（指定過渡持續時間）：」
文法格式：transition-duration:[ ,]
用于指定過渡持續的時間，預設值為0，如果存在多個屬性值，以英文逗号“,”進行分隔。
「transition-delay（指定過渡延遲時間）：」
文法格式：transition-delay:[ ,]
用于指定延遲過渡的時間，預設值為0，如果存在多個屬性值，以英文逗号“,”進行分隔。
「transition-timing-function（指定過渡動畫類型）：」
文法格式：transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out| cubicbezier(x1,y1,x2,y2)[,linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(x1,y1,x2,y2) ]
transition-timing-function屬性的屬性值及含義
transition-timing-function屬性的屬性值及含義
7-5 應用transform屬性的什麼函數可以實作縮放效果？
「scale」
文法：
<style>
選擇器 {
transform：屬性值；
}
</style>
複制
附 transform 屬性的屬性值及含義：
transform屬性的屬性值及含義
其他
實踐開始啦，抄 Demo，然後自行修修改改一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo7</title>
<style>
p > img { width: 200px; float: right; margin: 0 0 1px 10px;}
p {line-height: 30px;}
.cont {width: 800px;height: 300px;;background: grey;}
div > img {padding: 30px;transition: 2s ease all; /*設定所有屬性參與過渡*/}
.cont:hover img {transform-origin: center; /*設定圖檔旋轉點在其中心處*/transform: translate(400px, 0) rotate(360deg); } /*設定圖檔向右平移400像素并且旋轉360度*/
.content{ margin: 20px auto; width: 1000px; height: 500px;background: rgb(212, 168, 114);}
.content > ul{ width: 1000px;height: 50px; background: #777; color: #fff; }
.content > ul > li{ width: 200px; height:50px;overflow: hidden;transition: 0.5s ease height;float: left;line-height: 50px; text-align: center; list-style: none; font-size: 20px; position: relative; }
.content > ul > li:hover{ background: #fff;color: rgb(28,178,156); height:320px;}
.content > ul > li:hover ul{display: block; }
.content > ul > :first-child{ background: #eee; color: rgb(49, 94, 45)}
.content > ul > :first-child:hover{ height: 50px;}
.content > ul > :last-child:hover{ height: 300px;}
.content > ul > li > ul{ display: none;list-style: none; color: #000; position: absolute; top: 50px; left: 0;font-size: 16px;}
.content > ul > li > ul > li{ padding:0 20px; background: #fff; clear: both;color: #000; }
.content > ul > li > ul > li:hover{ background: #a3c247; }
</style>
</head>
<body>
<p><img src="demo5.jpg" />明日學院，是吉林省明日科技有限公司傾力打造的線上實用技能學習平台。該平台于2016年正式上線，主要為學習者提供海量、優質的課程，課程結構嚴謹，使用者可以根據自身的學習程度，自主安排學習進度。我們的宗旨是，為程式設計學習者提供一站式服務，培養學習者的程式設計思維。</p>
<div class="cont"><img src="demo5.jpg"width="200"></div>
<div class="content">
<ul>
<li>首頁</li>
<li>知識圖譜
<ul class="drop">
<li>IT高新技能</li>
<li>公務員考試</li>
<li>計算機二級</li>
<li>考研一站通</li>
</ul>
</li>
<li>IT精英
<ul class="drop">
<li>前端開發</li>
<li>Java開發</li>
<li>測試與維護</li>
<li>算法分析</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
複制
運作效果：
運作效果
?關注我吖~❤️