資訊專欄INFORMATION COLUMN
摘要：可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。在中增加的小節表示彈窗內容，其中的是返回按鈕，是具體內容，這里我們把內容簡化為一些陸生動物的字符，為了能夠觸發這個彈窗，設置的為，并在的鏈接中指向它
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/GYXvez
可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cNzVnAL
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom，一個名為 .main 的容器中包含 1 個鏈接：
設置頁面的基本屬性：無邊距、全高、忽略溢出：
body {
margin: 0;
height: 100vh;
overflow: hidden;
}
設置主界面的背景和其中按鈕的布局方式：
.main {
height: inherit;
background: linear-gradient(dodgerblue, darkblue);
display: flex;
align-items: center;
justify-content: center;
}
設置按鈕樣式：
.open-popup {
box-sizing: border-box;
color: white;
font-size: 16px;
font-family: sans-serif;
width: 10em;
height: 4em;
border: 1px solid;
text-align: center;
line-height: 4em;
text-decoration: none;
text-transform: capitalize;
}
設置按鈕懸停效果：
.open-popup:hover {
border-width: 2px;
}
至此，主界面完成，接下來制作彈窗。
在 dom 中增加的 .popup 小節表示彈窗內容，其中的 是返回按鈕，
是具體內容，這里我們把內容簡化為一些陸生動物的 unicode 字符，為了能夠觸發這個彈窗，設置 .popup 的 id 為 terrestrial，并在 .main 的 鏈接中指向它：
< back
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53128.html
摘要：可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。在中增加的小節表示彈窗內容，其中的是返回按鈕，是具體內容，這里我們把內容簡化為一些陸生動物的字符，為了能夠觸發這個彈窗，設置的為，并在的鏈接中指向它 showImg(https://segmentfault.com/img/bVbixZI?w=400&h=302); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，...
摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月至年月發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀， 過往項目 2018 年 9 月份項目匯總（共 26 個項目） 2018 年 8 月份項目匯總（共 29 個項目） 2018 年 7 月份項目匯總（...
摘要：過往項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書頻演示如何用純創作一種按鈕被瞄準的交互特效視頻演示如何用純創作一個同心圓弧旋轉特效視頻演 過往項目 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 5 月份發布的項目 《前端每日實戰》專欄每天分解一個前端項目，用視頻記錄...
閱讀 2486·2021-10-19 11:45
閱讀 2464·2021-09-30 09:56
閱讀 1432·2021-09-30 09:47
閱讀 591·2019-08-30 15:53
閱讀 1834·2019-08-30 15:44
閱讀 584·2019-08-30 12:52
閱讀 1084·2019-08-30 11:16
閱讀 1605·2019-08-29 16:36
