时间：2023-10-04 18:48:01 | 来源：网站运营
时间：2023-10-04 18:48:01 来源：网站运营
【第四课】网页里的表单：
在线咨询
<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>页面效果如下： <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>点击就送</button></footer> <section> 文案分工 形成场景规范角色规范 李晴找到位置 <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.（环境搭建）观察任务描述，揣摩开发要点（0.5小时） 2.（知识学习）搜索学习——《定位》（1小时） 3.（编码实战）首先布局header，让header紧贴顶部（1小时） 4.（编码实战）为header内部布局，保证3块文字分别居于header的左中右，并垂直居中（1小时） 5.（知识学习）查看学习资料——《input——创造最新式表单》（1小时） 6.（编码实战）布局表单内容，至少包含input和button（0.5小时） 7.（编码实战）为input旁边的小图标切图（1小时） 8.（编码实战）为表单内容添加样式（1小时） 9.（代码调试）调试代码，使得页面在不同分辨率不同设备上都能正常显示（1.5小时） 10.（环境搭建）配置nginx的http服务，使本地可以通过配置的域名访问（0.5小时） 11.（环境搭建）上传到学员服务器（0.5小时） 12.（代码调试）使用不同设备访问网址查看页面（0.5小时） 13.（知识学习）完成任务后查看验收标准，确认任务已完成，如果未完成返回相应步骤（0.5小时） 14.（思考答疑）查看深度思考，学有余力的情况下尝试回答深度思考的问题（1小时） 关键词：
