定位（1）***
1.為什么需要定位？
標準流或浮動無法實現隨意布局的情況下需要定位來實現。
2.定位組成
定位：將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子。
定位=定位模式+邊偏移
定位模式用于指定一個元素在文檔中的定位方式。邊偏移則決定了元素的最終位置。
2.1.定位模式
定位模式決定元素的定位方式，它通過css的position屬性來設置，其值可以分為四個：
| 值 | 語義 |
| static | 靜態定位 |
| relative | 相對定位 |
| absolute | 絕對定位 |
| fixed | 固定定位 |
2.2.邊偏移
邊偏移就是定位的盒子移動到最終位置。top、bottom、left4個屬性
| 邊偏移屬性 | 示例 | 描述 |
| top | top：80px | 頂端偏移量，定義元素相對于其父元素上邊線的距離 |
| bottom | bottom：80px | 底部偏移量，定義元素相對于其父元素下邊線的距離 |
| left | left：80px | 左側偏移量，定義元素相對于其父元素左邊線的距離 |
| right | right：80px | 右側偏移量，定義元素相對于其父元素右邊線的距離 |
3.靜態定位static（了解）
靜態定位是元素的默認定位方式，無定位的意思。
語法：
選擇器{position：static；}
- 靜態定位按照標準流特性擺放位置，沒有邊偏移
- 靜態定位在布局時很少用到
4.相對定位relative ***
相對定位是元素在移動位置的時候，是相對于它原來的位置來說的（自戀型）。
語法：
選擇器{position：relatIve；}
相對定位的特點***：
因此，相對定位并沒有脫標，他最典型的應用是給絕對定位繼續當爹的。。。
4.1.練習：
<!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>相對定位</title><style>* {padding: 0;margin: 0;}.box1 {/* 相對定位是元素在移動位置的時候，是相對于它原來的位置說的；不脫標，繼續保留原來的位置語法：選擇器{position：relative；} 添加邊偏移屬性top、bottom、left、right，分開寫，不能合并寫*/position: relative;top: 50px;left: 50px;width: 100px;height: 100px;background-color: pink;}.box2 {width: 100px;height: 100px;background-color: red;}</style></head><body><div class="box1"></div><div class="box2"></div></body> </html>5.絕對定位absolute***
絕對定位是元素在移動位置的時候，是相對于它祖先元素來說的（拼爹性）。
語法：
選擇器{position：absolute；}
絕對定位的特點***：
5.1.練習
5.1.1.絕對定位-沒有父級或者父級沒有定位的情況
<!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>絕對定位-沒有父級或者父級沒有定位的情況</title><style>* {padding: 0;margin: 0;}/* <!-- 情況一：沒有父級 --> *//* .box1 {position: absolute;top: 100px;left: 50px;width: 200px;height: 200px;background-color: red;} *//* <!-- 情況二：有父級，但是沒有定位 --> */.father {width: 400px;height: 400px;background-color: aqua;}.son {position: absolute;top: 100px;right: 100px;width: 150px;height: 150px;background-color: blue;}</style></head><body><!-- 絕對定位-沒有父級或者父級沒有定位的情況，以瀏覽器為準定位 --><!-- 情況一：沒有父級 --><!-- <div class="box1"></div> --><!-- 情況二：有父級，但是沒有定位 --><div class="father"><div class="son"></div></div></body> </html>5.1.2.絕對定位-父級有定位?
<!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>絕對定位-父級有定位</title><style>/* 情況一 *//* .father {position: relative;width: 300px;height: 300px;background-color: pink;}.son {position: absolute;top: 10px;left: 30px;width: 200px;height: 200px;background-color: aqua;} *//* 情況二 */.yeye {position: relative;width: 700px;height: 700px;background-color: aqua;padding: 10px;}.father {width: 400px;height: 400px;background-color: bisque;}.son {position: absolute;bottom: 100px;right: 30px;width: 200px;height: 200px;background-color: red;}</style></head><body><!-- 如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考移動位置 --><!-- 情況一：父級有定位,以父級定位為參考點移動位置 --><!-- <div class="father"><div class="son"></div></div> --><!-- 情況二：父級沒有定位，父級的上級有定位，則以最近有定位的祖先元素為參考點移動位置 --><div class="yeye"><div class="father"><div class="son"></div></div></div></body> </html>5.1.3.絕對定位脫標不占有原來的位置
<!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>絕對定位脫標不占有原來的位置</title><style>.father {width: 700px;height: 700px;background-color: antiquewhite;}.son1 {position: absolute;top: 100px;left: 100px;width: 200px;height: 200px;background-color: aqua;}.son2 {width: 200px;height: 200px;background-color: red;}</style></head><body></body><!-- 絕對定位不再占有原來的位置（脫標） 盒子son2給出絕對定位移動位置不再占有原來位置，son1標準流盒子占有son2原來的位置--><div class="father"><div class="son1"></div><div class="son2"></div></div> </html>6.子絕父相的由來
清楚這個口訣，就明白了絕對定位和相對定位的使用場景。
這個“子絕父相”非常重要，是我們學習定位的口訣，是定位中常用的一種方式，這句話的意思是：子級是絕對定位的話，父級要用相對定位。
這就是子絕父相的由來，所以相對定位經常用來作為絕對定位的父級。
總結：因為父級需要占有位置，因此是相對定位，子盒子不需要占有位置，則是絕對定位。
當然，子絕父相不是永遠不變的，如果父元素不需要占有位置，子絕父絕也會遇到。
6.1.案例：學成在線-hot new模塊添加
子絕父相練習：
<!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>子絕父相練習</title><style>body {background-color: #f3f5f7;}.bd {/* 子絕父相 */position: relative;width: 229px;height: 270px;background-color: #fff;}.hot {width: 100%;}.bd .new {/* 子絕父相 */position: absolute;top: 4px;right: -4px;}h4 {font-size: 14px;color: #050505;margin: 25px 20px 20px 25px;}.info {margin-left: 25px;font-size: 12px;color: #999;}span {color: #ff7c2d;}</style></head><body><div class="bd"><img src="images/NEW.png" alt="" class="new" /><imgsrc="D:\桌面\前端\css-第五天\study\images\tj2.png"alt=""class="hot"/><h4>Android 網絡圖片加載框架詳解</h4><div class="info"><span>高級</span> ? 1125人在學習</div></div></body> </html>7.固定定位fixed***
固定定位是元素固定于瀏覽器可視區的位置。主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會改變。
語法：
選擇器{position：fixed；}
固定定位的特點***：
1.以瀏覽器的可視窗口為參照點移動元素
- 跟父級元素沒有任何關系
- 不隨滾動條滾動
2.固定定位不再占有原來的位置
固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位
固定定位小技巧：固定在版心右側位置。
小算法：
?7.1.練習
7.1.1.固定定位練習
<!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>固定定位</title><style>div img{/* 固定定位是元素固定于瀏覽器可視區的位置主要場景：可以在瀏覽器頁面滾動時元素的位置不會改變語法：選擇器{position：fixed；}注意：以瀏覽器的可視窗口為參照點移動元素跟父元素沒有任何關系，不隨滾動條滾動固定定位不再占有原來的位置：固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對行為 */position: fixed;top: 165px;left: 75px;}</style></head><body><div><img src="images/r_dj.png" alt="" /><p>1、沒有心，就不會受傷~ </p><p>2、讓妲己看看你的心。 </p><p>3、請盡情吩咐妲己，主人!</p><p>4、努力做主人喜歡的事! 5、你的主人制造你時，好像有偷工減料耶~</p><p>6、尾巴，不只能用來撓癢癢哦~</p><p>7、妲己一直愛主人，因為被設定成這樣~</p><p>9、主人的命令是絕對的。</p><p>10、羈絆是什么意思?</p><p>11、妲己陪你玩~</p><p>12、主人討厭你了呢~</p><p>13、來和妲己玩耍吧!</p><p>14、主人的敵人，就是妲己的敵人!</p><p>15、哎~呀~</p><p>1、沒有心，就不會受傷~ </p><p>2、讓妲己看看你的心。 </p><p>3、請盡情吩咐妲己，主人!</p><p>4、努力做主人喜歡的事! 5、你的主人制造你時，好像有偷工減料耶~</p><p>6、尾巴，不只能用來撓癢癢哦~</p><p>7、妲己一直愛主人，因為被設定成這樣~</p><p>9、主人的命令是絕對的。</p><p>10、羈絆是什么意思?</p><p>11、妲己陪你玩~</p><p>12、主人討厭你了呢~</p><p>13、來和妲己玩耍吧!</p><p>14、主人的敵人，就是妲己的敵人!</p><p>15、哎~呀~</p><p>1、沒有心，就不會受傷~ </p><p>2、讓妲己看看你的心。 </p><p>3、請盡情吩咐妲己，主人!</p><p>4、努力做主人喜歡的事! 5、你的主人制造你時，好像有偷工減料耶~</p><p>6、尾巴，不只能用來撓癢癢哦~</p><p>7、妲己一直愛主人，因為被設定成這樣~</p><p>9、主人的命令是絕對的。</p><p>10、羈絆是什么意思?</p><p>11、妲己陪你玩~</p><p>12、主人討厭你了呢~</p><p>13、來和妲己玩耍吧!</p><p>14、主人的敵人，就是妲己的敵人!</p><p>15、哎~呀~</p><p>1、沒有心，就不會受傷~ </p><p>2、讓妲己看看你的心。 </p><p>3、請盡情吩咐妲己，主人!</p><p>4、努力做主人喜歡的事! 5、你的主人制造你時，好像有偷工減料耶~</p><p>6、尾巴，不只能用來撓癢癢哦~</p><p>7、妲己一直愛主人，因為被設定成這樣~</p><p>9、主人的命令是絕對的。</p><p>10、羈絆是什么意思?</p><p>11、妲己陪你玩~</p><p>12、主人討厭你了呢~</p><p>13、來和妲己玩耍吧!</p><p>14、主人的敵人，就是妲己的敵人!</p><p>15、哎~呀~</p><p>1、沒有心，就不會受傷~ </p><p>2、讓妲己看看你的心。 </p><p>3、請盡情吩咐妲己，主人!</p><p>4、努力做主人喜歡的事! 5、你的主人制造你時，好像有偷工減料耶~</p><p>6、尾巴，不只能用來撓癢癢哦~</p><p>7、妲己一直愛主人，因為被設定成這樣~</p><p>9、主人的命令是絕對的。</p><p>10、羈絆是什么意思?</p><p>11、妲己陪你玩~</p><p>12、主人討厭你了呢~</p><p>13、來和妲己玩耍吧!</p><p>14、主人的敵人，就是妲己的敵人!</p><p>15、哎~呀~</p></p></div></body> </html>7.1.2.固定定位小技巧-固定到版心右側
<!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>固定定位小技巧-固定到版心右側</title><style>.box {position: fixed;/* 1.讓固定定位的盒子left：50%；，走到瀏覽器可視區的一半位置 */left: 50%;/* 2.讓固定定位的盒子margin-left：版心寬度的一半距離固定定位的盒子想不貼著版心， margin-left：版心寬度的一半距離可以多加一點，拉開距離*/margin-left: 405px;width: 100px;height: 100px;background-color: aqua;}.w {width: 800px;height: 2000px;margin: 0 auto;background-color: pink;}</style></head><body><div class="box"></div><div class="w"></div></body> </html>8.粘性定位sticky（了解）
粘性定位可以被認為是相抵定位和固定定位的混合。
語法：
選擇器{position：sticky；top：10px；}
粘性定位的特點：
跟頁面滾定搭配使用。兼容性較差。IE不支持。
8.1.練習
<!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>粘性定位</title><style>body {height: 3000px;}.nav {/* 粘性定位可以被認為是相對定位和固定定位的混合；以瀏覽器的可視窗口為參照點移動元素（固定定位特點）粘性定位占有原先的位置（相對固定的特點）必須添加top、left、right、bottom其中一個才有效跟頁面滾動搭配使用，兼容性較差，IE不支持 語法：選擇器{position：sticky；邊偏移屬性：屬性值；}*/position: sticky;top: 0;height: 40px;width: 800px;background-color: aqua;margin: 300px auto;}</style></head><body><div class="nav"></div></body> </html>?9.定位的總結
| 定位模式 | 是否脫標 | 移動位置 | 是否常用 |
| static靜態定位 | 否 | 不能使用邊偏移 | 很少 |
| relative相對定位 | 否（占有位置） | 相對于自身位置移動 | 常用 |
| absolute絕對定位 | 是（不占有位置） | 帶有定位的父級 | 常用 |
| fixed固定定位 | 是（不占有位置） | 瀏覽器可視區 | 常用 |
| sticky粘性定位 | 否（占有位置） | 瀏覽器可視區 | 當前階段少 |
10.定位疊放次序z-index
在使用定位布局時，可能會出現盒子重疊的情況。此時，可以使用z-index來控制盒子的前后次序（z軸）。
語法：
選擇器{z-index：1；}
- 數值可以是整數、負數或者0.默認值是auto，數值越大，盒子越靠上
- 如果屬性值相同，則按照書寫順序，后來居上
- 數字后面不能加單位
- 只有定位的盒子才有z-index屬性
10.1.練習
?
<!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>定位疊放次序</title><style>.box {position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.xiongda {/* 使用了css三大特性中的層疊性就近原則 */top: 100px;left: 100px;background-color: pink;/* 使用定位布局時，可能出現盒子重疊的情況，此時可以使用z-index來控制盒子的前后次序（z軸）語法：選擇器{z-index：屬性值；}數值可以是整數、負數或者0，默認是auto，數值越大，盒子約靠上如果屬性值相同，則按照書寫順序，后來居上數字后面不能加單位只有定位的盒子才有z-index屬性 */z-index: 2;}.xionger {background-color: red;z-index: 1;}.guangtouqiang {top: 150px;left: 150px;background-color: blue;}</style></head><body><!-- 調用類選擇器box --><div class="box xiongda">熊大</div><div class="box xionger">熊二</div><div class="box guangtouqiang">光頭強</div></body> </html>11.定位拓展
11.1.絕對定位的盒子居中
加了絕對定位的盒子不能通過margin：0 auto水平居中，但是可以通過以下計算方法實現水平和垂直居中。
11.1.1.定位拓展-絕對定位的盒子居中
<!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>定位拓展-絕對定位的盒子居中</title><style>div {/* 加了絕對定位的盒子不能通過margin：0 auto水平居中但是可以通過以下計算方法實現水平和垂直居中 */position: absolute;/* 1.讓盒子的左側移動到父級元素的水平中心位置，left：50%； */left: 50%;/* 2.讓盒子向左移動自身寬度的一半（負值），margin-left：50%； */margin-left: -100px;/* 1.讓盒子的上面移動到父級元素的垂直中心位置，top：50%； */top: 50%;/* 2.讓盒子向上移動自身高度的一半（負值），margin-top：50%； */margin-top: -100px;width: 200px;height: 200px;background-color: pink;}</style></head><body><div></div></body> </html>11.2.定位特殊特性
絕對定位和固定定位也和浮動類似。
11.3.練習
<!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>定位拓展-定位特殊特性</title><style>/* 行內元素設置高度和寬度是無效的。添加絕對或者固定定位后，可以直接設置高度和寬度 */span {position: absolute;top: 300px;width: 300px;height: 300px;background-color: pink;}/* 塊級元素本身自己獨占一行添加絕對或者固定定位后，如果不設置高度和寬度，默認大小是內容的大小 */.dock {position: fixed;background-color: red;}</style></head><body><span>行內元素</span><div class="dock">塊級元素1</div><div class="dock">塊級元素2</div></body> </html>11.3.脫標的盒子不會觸發外邊距塌陷
浮動元素、絕對定位（固定定位）元素的都不會觸發外邊距合并的問題。
11.4.絕對定位（固定定位）會完全壓住盒子
浮動元素不同，只會壓住他下面的標準流盒子，但是不會壓住下面標準流盒子里面的文字（圖片）,但是絕對定位（固定定位）會壓住下面標準流所有的內容
浮動之所以不會壓住文字，因為浮動產生的目的最初 是為了做文字環繞效果的。文字會圍繞浮動元素。
11.4.1練習
1.定位拓展-絕對定位（固定定位）會完全壓住盒子
<!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>定位拓展-絕對定位（固定定位）會完全壓住盒子</title><style>div {/* 1.浮動元素只會壓住下面標準流的盒子，但是不會壓住下面標準流開盒子里面的文字（圖片） *//* float: left; *//* 2.絕對定位（固定定位）會壓住下面標準流所有的內容 */position: absolute;width: 200px;height: 200px;background-color: pink;}</style></head><body><div></div><p>定位拓展-絕對定位（固定定位）會完全壓住盒子</p></body> </html>2.拓展-浮動之所以不會壓住文字（圖片）
<!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>Document</title><style>/* 浮動之所以不會壓住文字（圖片），因為浮動產生的目的最初是為了做文字環繞的效果，文字會圍繞浮動元素不被壓住 */img {float: left;}</style></head><body><p>開欄的話今年我國就業工作總體開局平穩，成績來之不易。同時要看到，受國內外多重因素影響，就業面臨的風險挑戰明顯增多。人社部門如何加快推進相關政策落地見效，幫助企業解決困難、促進就業；各類就業服務機構如何發揮自身優勢，不斷提高服務質量和水平；各類企業如何履行社會責任，努力穩定和擴大就業崗位……本版今起推出“千方百計穩定和擴大就業”系列報道，呈現各地各部門為穩就業保就業采取的政策措施，敬請關注。穩就業事關廣大家庭生計，是經濟運行在合理區間的關鍵支撐。今年一季度，我國就業形勢總體保持基本穩定，但3月份以來，受國內外多重因素影響，就業面臨的風險挑戰明顯增多。“面對復雜嚴峻的就業形勢，全國人社系統將把穩就業作為當前的首要任務，加大就業優先政策實施力度，努力保持就業大局穩定，更好服務于經濟社會發展。”人社部有關負責人說。接下來，人社部將出臺哪些穩就業舉措？如何推動、確保相關政策落地落實？記者進行了采訪。打好政策“組合拳” “降緩返補”助企業日前，洋紫荊油墨（中山）有限公司領取到了2021年失業保險穩崗返還資金5萬元，惠及400名員工。“穩崗返還資金有利于我們提高員工福利，在特殊時期穩崗穩隊伍。”公司負責人黃嘉敏說。量大面廣的中小微企業和個體工商戶是穩經濟的重要基礎、穩就業的主力支撐。當前，受國內外多重因素影響，相關市場主體困難明顯增多。為此，人社部推出一系列階段性、組合式穩崗位、提技能、防失業的政策措施，切實助企紓困穩崗位。人社部有關負責人介紹，人社部將推出社保“降、緩、返、補”四個方面的支持舉措，助力企業爬坡過坎。降，即延續降低費率。將階段性降低失業保險、工傷保險費率政策延續實施至2023年4月30日。緩，即加大緩繳社保費力度。對受疫情影響經營困難的所有中小微企業、個體工商戶，實施暫緩繳納養老、失業、工傷保險費政策。其中，養老保險費緩繳期限3個月，失業保險和工傷保險費緩繳期限不超過1年，緩繳期間免收滯納金。返，即提高穩崗返還標準。將中小微企業、個體工商戶失業保險穩崗返還比例最高提至90%。對沒有對公賬戶的小微企業，可將資金直接返還至當地稅務部門提供的其繳納社會保險費的賬戶。補，即加大就業補貼實施力度。對企業吸納重點群體就業給予社保補貼、見習補貼等；對受疫情影響暫時無法正常生產經營的中小微企業發放一次性留工培訓補助。越是困難時刻，越要盡快把幫扶政策送到企業手上。眼下，各地人社部門正用足用好組合政策，推行“免申即享”經辦模式，讓企業便捷享受政策紅利。廣東深圳市第一時間將中小微企業失業保險穩崗返還比例提至90%，預計惠及企業超80萬家。當地人社局正在抓緊時間進行數據比對，完成后將主動發放穩崗返還資金。廣西崇左提前謀劃，通過信息系統初步篩查符合條件的企業2507家，擬返還補貼資金2631.37萬元，惠及職工超5.58萬人。 就業服務搬上網 招聘用工有保障企業是吸納就業的主渠道。做好企業招聘用工服務，對支持企業生產經營、保持就業局勢穩定具有重要作用。近日，各地方、各部門都有針對性地加強和改進就業服務。一方面，通過常態化舉辦線上招聘活動，開設大型專項招聘活動線上專場專區，推廣運用直播帶崗、遠程面試等新型招聘對接模式，實現線上招聘活動不停歇。山東龍口市開展“人社干部聯百企”活動，自3月初建立《企業用工引才需求臺賬》以來，累計在網上發布崗位信息3240條；<img src="images/p.jpeg" alt="" />甘肅慶陽市的人社干部化身“網絡主播”進行“直播帶崗”“直播宣策”，推送就業崗位，解讀就業幫扶政策，服務對象覆蓋高校畢業生、農民工、退役軍人等。在國家層面，人社部將繼續開展百日千萬網絡招聘專項行動。5月16日至8月25日，針對重點人群就業和用人單位招聘需要，搭建全國統一、多方聯動的網絡招聘平臺，以優質高效服務助推穩就業、保就業。另一方面，在做好疫情防控前提下，各地也因地制宜開展各類線下招聘活動，針對性舉辦小規模、定制化招聘會，實現“周周有活動、日日有服務”。4月中旬，湖南常德石門縣組織開展了為期3天的“送崗下鄉”專場招聘會，招聘會服務對象為返鄉農民工、留鄉勞動力。一共帶來了2000個就業崗位，累計進場求職人員1200多人，達成就業意向約190人。與此同時，為了進一步筑牢民生底線，對就業困難人員的重點幫扶力度不減。各地將城鎮零就業家庭成員、就業困難人員以及殘疾登記失業人員、脫貧人口和農村低收入人口等重點人群列入就業幫扶對象，通過同步開展精準匹配就業、靶向扶持創業、公崗安置托底等措施，促進重點群體人崗匹配。公共服務進校園 就業選擇更多元今年，我國有1076萬高校畢業生走出校門找工作。做好高校畢業生就業工作，不僅事關千家萬戶，也有利于人力資源的利用。今年3月以來，人社部啟動公共就業服務進校園活動。各地匯集專業資源，凝聚各方力量，推動公共就業服務向前延伸、提質增效。創新方式加大政策宣傳。人社部數據顯示，福建、江西、四川、貴州等省份已舉辦政策宣講748場次。湖北制作發布“高校畢業生就業創業政策地圖”小程序，總訪問量超過20萬人次。浙江杭州市在主要商務區利用160余塊戶外電子大屏幕滾動宣傳就業政策，動員全市企業提供崗位。招聘服務搭建對接平臺。江西、山東、安徽、湖南、重慶、甘肅等地舉辦了實施公共服務進校園系列專場招聘活動，已組織各類線上線下招聘600余場次，發布崗位80余萬個。陜西聯合市場機構為畢業生和用人單位搭建遠程視頻面試，已有19萬畢業生通過平臺獲得服務。湖北采取“小規模、多場次”方式，進校園開展“才聚荊楚”招聘活動，提供近1.5萬個就業崗位。培訓指導提升就業能力。黑龍江、廣西等地積極與高校合作，共建高校就業創業服務站、校園職業成長導師站；浙江杭州市推出“導師面對面”等咨詢服務，為畢業生免費提供擇業指導、創業咨詢、心理疏導等服務；河南、貴州等地明確了今年高校畢業生技能培訓目標，啟動新興產業、智能制造、現代服務業等專項培訓。“由政府牽頭，把學校、科研機構、企業等各方資源進行整合，多方合力，給我們提供了更多元的就業選擇。”2022年應屆畢業生崔宇杰說。不僅是人社部門，各部門都在為穩定高校畢業生就業貢獻力量。工信部聯合教育部啟動2022年全國中小企業網上百日招聘高校畢業生活動，直接將“專精特新”中小企業碩、博巡回招聘開進校園。國有企業擴大招聘規模。“我們不僅擴大招聘，還為畢業生準備了人才公寓，免費提供一年的住宿，一年之后發放租房補貼，連續發放3年。”中國重型汽車集團有限公司組織與人力資源部副部長劉秉陽說。“我們將持續完善畢業生市場化就業的政策措施，穩定公共部門招聘規模，適當擴大升學入伍、基層項目、科研助理等規模，努力創造更多適合畢業生的優質崗位。”人社部有關負責人說。（人民日報記者 李心萍）</p></body> </html>12.綜合練習-淘寶焦點圖布局
?
<!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>淘寶綜合練習</title><style>* {padding: 0;margin: 0;}.w {width: 1190px;margin: 100px auto;/* background-color: aqua; */}li {list-style: none;}.tb-promo {/* 子絕父相 */position: relative;width: 564px;height: 315px;background-color: pink;}/* 子選擇器 */.tb-promo > img {width: 100%;height: 100%;border-radius: 12px;}/* 大量代碼相同時，可以取出相同代碼放在并集選擇其中，代碼簡介不繁瑣 */.prev,.next {position: absolute;width: 20px;height: 30px;background-color: rgba(0, 0, 0, 0.3);color: #fff;line-height: 30px;text-align: center;text-decoration: none;}.prev {top: 50%;margin-top: -15px;left: 0;border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {top: 50%;margin-top: -15px;right: 0;border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;background-color: rgba(255, 255, 255, 0.3);border-radius: 7px;}.promo-nav li {float: left;width: 8px;height: 8px;margin: 3px;border-radius: 50%;background-color: #fff;}/* 別忘記權重問題，如果只寫.selected權重小于.promo-nav li，顏色被覆蓋 */.promo-nav .selected {background-color: #ff5000;}</style></head><body><!-- 添加版心 --><div class="w"><div class="tb-promo w"><img src="images/t1.png" alt="" /><!-- 左側箭頭 --><a href="#" class="prev"> < </a><!-- 右側箭頭 --><a href="#" class="next"> > </a><ul class="promo-nav"><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div></div></body> </html>總結
- 上一篇： 姓名常用汉字代码查询器
- 下一篇： 2022 01 27 dnf 起号 搬砖