時(shí)間：2023-10-04 18:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-04 18:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
【第四課】網(wǎng)頁(yè)里的表單：
在線咨詢
<style>div { display: inline-block; width: 100px; height: 100px; background-color: red; color: #fff; text-align: center; line-height: 100px; font-size: 30px;}div:nth-child(2) { position: relative; top: 20px; left: 20px; border: 1px solid #333;}</style><body> <div>1</div> <div>2</div> <div>3</div> <div>4</div></body>頁(yè)面效果如下： <style media="screen"> .parent { padding: 50px; background: #eee; width: 500px; height: 300px; } .child { background: #ccc; /* position: relative; */ } .item { display: inline-block; width: 50px; height: 50px; background: yellow; } .item:nth-child(3) { position: absolute; background: red; left: 10px; top: 10px; }</style><body> <div class="parent"> <div class="child"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div></body>其展示效果如下： <style media="screen"> body { margin: 0; } header { position: fixed; top: 0; width: 100%; background: rgba(38, 135, 182, 0.85); text-align: center; line-height: 2.6em; color: #fff; } header > i { float: left; } footer { position: fixed; bottom: 0; width: 100%; background: rgba(65, 65, 65, 0.47); line-height: 2.6em; text-align: center; }</style><body> <header> 奇妙的文章 </header> <footer><button>點(diǎn)擊就送</button></footer> <section> 文案分工 形成場(chǎng)景規(guī)范角色規(guī)范 李晴找到位置 <p> summis fabulas elit ne iis o amet quae eram id sint non ad sunt singulis ne ne aliquip non appellat. </p> <p> Illum probant firmissimum. Eu qui quae culpa dolore, anim ad fabulas non elit ut expetendis nulla commodo laborum eu elit deserunt des </p> <p> Quamquam magna iis possumus eruditionem, litteris praetermissum an litteris. Ullamco sempitern </p> <p> Et quid commodo coniunctione, proident sed tempor. Quo quamquam aut commodo qui magna sed nostrud ut export </p> <p> Appellat illum excepteur ne de officia graviterque et commodo se ullamco, in nam domesticarum. </p> <p> Eram ubi probant ad culpa, eu ab elit eram esse ut dolor probant qui fore quae hic amet e eiusmod a sint. </p> <p> Quis domesticarum singulis sunt proident ex elit laboris o fugiat anim. Eram o iudicem e e fore offendit commodo. </p> <p> Ex sunt incididunt fidelissimae ita doctrina qui quis. Laborum ea aute laboris. Fabulas dolore ullamco, labore offendit quo tempor eram.Non noster graviterque, ut sunt mandaremus excepteur. E quid occaecat commodo, a quid duis se consequat. E malis ea quorum. </p> <p> Duis quibusdam est exquisitaque, sed nostrud graviterque de tempor ita id enim vidisse. </p> <p> E duis aliquip concursionibus, proident ex irure, labore ea possumus id incurreret sed eram. Quem deserunt quo aute quis,. </p> </section></body>其展示效果如下： 1.（環(huán)境搭建）觀察任務(wù)描述，揣摩開(kāi)發(fā)要點(diǎn)（0.5小時(shí)） 2.（知識(shí)學(xué)習(xí)）搜索學(xué)習(xí)——《定位》（1小時(shí)） 3.（編碼實(shí)戰(zhàn)）首先布局header，讓header緊貼頂部（1小時(shí)） 4.（編碼實(shí)戰(zhàn)）為header內(nèi)部布局，保證3塊文字分別居于header的左中右，并垂直居中（1小時(shí)） 5.（知識(shí)學(xué)習(xí)）查看學(xué)習(xí)資料——《input——?jiǎng)?chuàng)造最新式表單》（1小時(shí)） 6.（編碼實(shí)戰(zhàn)）布局表單內(nèi)容，至少包含input和button（0.5小時(shí)） 7.（編碼實(shí)戰(zhàn)）為input旁邊的小圖標(biāo)切圖（1小時(shí)） 8.（編碼實(shí)戰(zhàn)）為表單內(nèi)容添加樣式（1小時(shí)） 9.（代碼調(diào)試）調(diào)試代碼，使得頁(yè)面在不同分辨率不同設(shè)備上都能正常顯示（1.5小時(shí)） 10.（環(huán)境搭建）配置nginx的http服務(wù)，使本地可以通過(guò)配置的域名訪問(wèn)（0.5小時(shí)） 11.（環(huán)境搭建）上傳到學(xué)員服務(wù)器（0.5小時(shí)） 12.（代碼調(diào)試）使用不同設(shè)備訪問(wèn)網(wǎng)址查看頁(yè)面（0.5小時(shí)） 13.（知識(shí)學(xué)習(xí)）完成任務(wù)后查看驗(yàn)收標(biāo)準(zhǔn)，確認(rèn)任務(wù)已完成，如果未完成返回相應(yīng)步驟（0.5小時(shí)） 14.（思考答疑）查看深度思考，學(xué)有余力的情況下嘗試回答深度思考的問(wèn)題（1小時(shí)） 關(guān)鍵詞：
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
