中文字幕永久视频在线看,亚洲欧洲日韩av在线观看,中文字幕人妻丝袜乱一区三区

2-3 實戰(zhàn)題
收藏

第1章案例效果展示及原理分析
視頻：1-1 效果展示及原理分析(02:03)

實戰(zhàn)題

學習完《登錄浮層靜態(tài)頁面實現》內容后，來檢驗一下吧！在右側的編輯器中補全相應的代碼！有兩個任務需要完成。

任務

任務1：請在右邊編輯器中第17行，補充完整登陸浮層（.ui-dialog）的浮動樣式設置

任務2：請在右邊編輯器中第28行，補全登陸浮層標題欄的鼠標樣式為移動狀態(tài)(大十字形狀)的代碼

溫馨提示：完成的任務要與要求的代碼效果相一致才可以通過本次測試，否則就再看一遍視頻哦！

?不會了怎么辦: 任務1對應代碼：position的相關屬性設置。

任務2對應代碼：cursor的屬性設置。

||

index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>慕課網-拖拽效果</title> <style type="text/css"> body{background: url(images/baidu_demo.png) #fff top center no-repeat; padding: 0px;margin: 0px;font-size: 12px;font-family: "微軟雅黑"; } /*登錄浮層組件*/ .ui-dialog{ width: 380px;height: auto; 【任務1】z-index: 9000; top: 100px;left: 100px; border: 1px solid #D5D5D5;background: #fff; } .ui-dialog a{text-decoration: none;} /*標題欄區(qū)域*/ .ui-dialog-title{ height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px; border-bottom: 1px solid #efefef;background: #f5f5f5; 【任務2】 user-select:none; } /*關閉按鈕設置*/ .ui-dialog-closebutton{ width: 16px;height: 16px;display: block; position: absolute;top: 12px;right: 20px; background: url(images/close_def.png) no-repeat;cursor: pointer; } .ui-dialog-closebutton:hover{background:url(images/close_hov.png);} /*內容區(qū)域*/ .ui-dialog-content{ padding: 15px 20px; } /*每行元素可能需要的樣式*/ .ui-dialog-pt15{ padding-top: 15px; } .ui-dialog-l40{ height: 40px;line-height: 40px; text-align: right; } /*輸入框公用的樣式*/ .ui-dialog-input{ width: 100%;height: 40px; margin: 0px;padding:0px; border: 1px solid #d5d5d5; font-size: 16px;color: #c1c1c1; text-indent: 25px; outline: none; } /*兩個輸入框的icon設置*/ .ui-dialog-input-username{ background: url(images/input_username.png) no-repeat 2px ; } .ui-dialog-input-password{ background: url(images/input_password.png) no-repeat 2px ; } /*提交按鈕的樣式*/ .ui-dialog-submit{ width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff; outline: none;text-decoration: none; display: block;text-align: center;line-height: 50px; } .ui-dialog-submit:hover{ background: #3f81b0; } </style> </head> <body > <div class="ui-dialog">  <div class="ui-dialog-title"> 登錄通行證 <a class="ui-dialog-closebutton" href="javascript:;"></a> </div>  <div class="ui-dialog-content">  <div class="ui-dialog-l40 ui-dialog-pt15"> <input class="ui-dialog-input ui-dialog-input-username" type="input" value="手機/郵箱/用戶名" /> </div> <div class="ui-dialog-l40 ui-dialog-pt15"> <input class="ui-dialog-input ui-dialog-input-password" type="input" value="密碼" /> </div> <div class="ui-dialog-l40"> <a href="#">忘記密碼</a> </div>  <div> <a class="ui-dialog-submit" href="#">登錄</a> </div> <div class="ui-dialog-l40"> <a href="#">立即注冊</a> </div> </div> </div> </body> </html>

提問題

提交

其他問答

查看更多本節(jié)問答

寫筆記

公開筆記

提交

||

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

· 粉絲專屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問題答復提醒
· 賬號支付安全提醒

使用 Ctrl+D 可將網站添加到書簽

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

2-3 實戰(zhàn)題

實戰(zhàn)題

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

2-3 實戰(zhàn)題

熱搜

最近搜索清空

實戰(zhàn)題

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～