米奇在线
Pexels:在线图片网站,大量图片资源,创建一个文件夹使用Visual code打开创建项目index为主页面，接着再创建两个副页面，contact和about、给主页面添加浮动效果作为标题，添加鼠标滑入效果
<!-- 头部标题区域 --> <header> <nav id="navbar"> <div class="container"> <!-- 左边米奇logo --> <h1><a href="index.html">米奇在线</a></h1> <ul> <li><a class="current" href="index.html">首页</a></li> <li><a href="about.html">关于我们</a></li> <li><a href="contact.html">联系我们</a></li> </ul> </div> </nav> </header>
中间内容使用background插入一个图片，设置h1内容欢迎来到米奇在线用span标签使米奇在线与前面内容隔开修改米奇在线字体颜色，写入一段英文改为居中
<h1>欢迎来到<span class="text-primary">米奇在线</span></h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem iure aspernatur dicta optio repudiandae! Assumenda reprehenderit debitis voluptates nisi, repellendus praesentium earum modi nihil? Enim ab saepe autem corporis porro. </p>
下面部分插入一个图片分为左下角一个小模块，右下角插入一段米奇在线介绍，设置一个按钮阅读更多跳转到about分页面中
<section id="home-info" class="bg-dark"> <div class="info-img"></div> <div class="info-content"> <h2><span class="text-primary">米奇在线</span> 介绍</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem iure aspernatur dicta optio repudiandae! Assumenda reprehenderit debitis voluptates nisi, repellendus praesentium earum modi nihil? Enim ab saepe autem corporis porro. </p> <a class="btn btn-light" href="about.html">阅读更多</a> </div> </section>
底部用了三个模块，三个模块内有三个图标使用Font Awesome图标库，官网网址:fontawesome.com.cn
<section id="features"> <div class="box bg-light"> <i class="fa fa-users fa-3x"></i> <h3>讲师介绍</h3> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus, voluptatum.</p> </div> <div class="box bg-primary"> <i class="fa fa-leanpub fa-3x"></i> <h3>课程详情</h3> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus, voluptatum.</p> </div> <div class="box bg-light"> <i class="fa fa-graduation-cap fa-3x"></i> <h3>学员反馈</h3> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus, voluptatum.</p> </div> </section> <div class="clr"></div> <footer id="main-footer"> <p>米修在线 © 2021,All Rights Reserved</p> </footer>
第一个页面就完成了，现在我们进入第二个页面先复制一下第一页代码删除一些没有用到的内容，现在有第一个页面代码标题和底部我们直接设置关于米修在线内容插入一个图片调整大小
<section id="about-info" class="py bg-light"> <div class="container"> <div class="info-left"> <h1 class="l-heading">关于<span class="text-primary">米奇在线</span></h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quia earum aliquid architecto incidunt? Eum provident, alias, voluptatem accusamus numquam sapiente quidem, laboriosam et fuga explicabo temporibus rem maxime ea?</p> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium minima non omnis odio quas itaque nobis dolore vitae fuga impedit.</p> </div> <div class="info-right"> <img src="./img/2women.jpg" alt="米奇在线"> </div> </div> </section>
到下部内容写入两个模块分别插入两张图片，再插入一个背景图片，把两个模块盒子设置透明度
<section id="testimonials"> <div class="container"> <h2 class="l-heading">学员评价</h2> <div class="testimonial bg-primary"> <img src="./img/2.2women.jpg" alt="Jan"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae perferendis voluptates ipsam dolorem at. Culpa deserunt quaerat veniam nihil repellendus, expedita voluptates ab facere enim maiores veritatis earum a laudantium sit cum voluptate? Sapiente!</p> </div> <div class="testimonial bg-primary"> <img src="./img/2.3women.jpg" alt="Lucy"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae perferendis voluptates ipsam dolorem at. Culpa deserunt quaerat veniam nihil repellendus, expedita voluptates ab facere enim maiores veritatis earum a laudantium sit cum voluptate? Sapiente!</p> </div> </div> </section>
第二个页面完成，进入第三个页面还是要复制第一个页面代码把里面两段内容删除，写入一个h1作为内容标题写入一个表单,一共三个表单把第一个表单复制两份修改name名称,把这三个input输入框写完之后下面有一个button按钮设置一个button
<section id="contact-form" class="py"> <div class="container"> <h1 class="l-heading"><span class="text-primary">联系</span>我们</h1> <p>如有疑问请填写一下信息联系我们!</p> <form action="process.php"> <div class="form-group"> <label for="name">姓名</label> <input type="text" name="name" id="name"> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="text" name="email" id="email"> </div> <div class="form-group"> <label for="messagge">反馈内容</label> <textarea name="messagge" id="messagge"></textarea> </div> <button type="submit" class="btn">提交</button> </form> </div> </section>
最后下面三个模块跟当时我们制作首页底部三个模块布局一样,复制首页三个模块修改内容更改字体图标
<section id="contact-info" class="bg-dark"> <div class="container"> <div class="box"> <i class="fa fa-home fa-3x"></i> <h3>联系地址</h3> <p>Lorem ipsum dolor sit amet.</p> </div> <div class="box"> <i class="fa fa-phone fa-3x"></i> <h3>联系电话</h3> <p>028-12345678</p> </div> <div class="box"> <i class="fa fa-envelope fa-3x"></i> <h3>邮箱地址</h3> <p>米奇在线@789.com</p> </div> </div> </section>
