头部区域运用 header 标签包裹。导航部分运用 nav 标签包裹,左边的 logo 用 h1 包裹,因为有跳转的功能所以里面要有一个a链接,a链接里面再写"米修在线"。右边三个用一个ul包裹,因为可以跳转所以要在 li 里面添加a,在里面再写内容。
<!-- 头部区域 -->
<header>
<nav id="navbar">
<div class="container">
<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>
在 style.css 里首先要重置默认样式。让 margin 和 padding 等于0,并且给 box-sizing 添加 border-box 属性,作用是为了给内容添加 padding 的时候不影响布局。
给类名为 content 的盒子添加水平居中和最大宽度:margin: 0 auto; max-width: 1100px;。当 margin 的值有两个时第一个指的是 X 轴,第二个指的是 Y 轴
给 h1 添加左浮动让它到左边,给 ul 添加右浮动让它到右边。给 ul 里的 li 添加左浮动,可以让它变成一行。给 li 里的 a 添加 display: block; 属性,让它变为块级元素这样才能让 padding: 20px; 生效,然后再给 a 添加 text-align: center; 让它居中
给 a 添加 :hover,鼠标移到 a 上面的时候让背景色变为 #444,并且让字体颜色变为橙色,并且让 class 为 home 的 a 的样式也变成这样
/* reset */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* main styling */
html,body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.7em;
}
a{
color: #333;
text-decoration: none;
}
h1,h2,h3{
padding-bottom: 20px;
}
p{
margin: 10px 0;
}
/* utility classes */
.container{
margin: 0 auto;
max-width: 1100px;
overflow: hidden;
padding: 0 20px;
}
/* navbar */
#navbar{
background: #333;
color: #fff;
overflow: auto;
}
#navbar a{
color: #fff;
}
#navbar h1{
float: left;
padding-top: 20px;
}
#navbar ul{
float: right;
list-style: none;
}
#navbar ul li{
float: left;
}
#navbar ul li a{
display: block;
padding: 20px;
text-align: center;
}
#navbar ul li a:hover,
#navbar ul li a.current{
background: #444;
color: #fabd80;
}
首页展示区域用 div 包裹,id 为 showcase,在这个盒子里面,我们还需要在用一个盒子进行包裹,类名为 container,在这里我们在创建一个 div 来进行中间部分内容的包裹,类名为 showcase-content ,在内容中, 我们添加一个 h1 标签,来写页面中的主题,“欢迎来到莱恩在线”,下面我们在用到一个 p 标签,里面的内容可以用 Lorem 来代替,下面我们在添加一个 a 标签,用来页面的跳转,接下来我们来设置下面的按钮,给 a 标签设置类名。
<!-- 首页展示区域 -->
<div id="showcase">
<div class="container">
<div class="showcase-content">
<h1>欢迎来到莱恩在线</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat nihil, beatae fugit molestias deserunt
quidem at! Eveniet deserunt vero voluptates.</p>
<a class="btn" href="about.html">关于我们</a>
</div>
</div>
</div>
在 style 样式中,给 showcase 盒子设置背景图片,给 showcase 盒子下的 showcase-content 设置文本颜色,然后给他设置一下文本居中,之后给他设置一下 padding-top,让他和顶部有一些距离,我们在 showcase-content 中的 h1标签,给他设置 font-size 设置为60px,然后在设置一个行高,为 1.2em ,之后我们在 html 中找到莱恩在线,用 span 标签进行包裹,设置类名为 text-primary,给他设置样式,可以将他的样式放在通用样式中,他的样式在页面多个地方都有用到,接下来,在 showcase-content 中的 p 标签,给 p 标签设置字体大小,还有行高和下外边距,接下来设置 btn 的样式,因为 a 标签是一个行标签,所以要将他转换为块标签, 然后给他设置一个字体大小和字体颜色还有背景颜色,我们在给他一个 hover 效果,给他一个背景颜色
.container{
margin: 0 auto;
max-width: 1100px;
overflow: hidden;
padding: 0 20px;
}
.text-primary{
color: #f7c08a;
}
/* showcase */
#showcase{
background: url('../img/beijing.jpg') no-repeat center center/cover;
height: 600px;
}
#showcase .showcase-content{
color: #fff;
text-align: center;
padding-top: 170px;
}
#showcase .showcase-content h1{
font-size: 60px;
line-height: 1.2em;
}
#showcase .showcase-content p{
font-size: 20px;
line-height: 1.7em;
padding-bottom: 20px;
}
.btn{
display: inline-block;
font-size: 18px;
color: #fff;
background: #333;
padding: 13px 20px;
}
.btn:hover{
background: #f7c08a;
}
内容介绍区域,首先创建一个 section 标签,设置 id 名为 home-info ,当中有两个区域,我们设置两个 div ,在右侧 div 中,设置 h2 标签,当中在设置一个 span 标签,然后添加一个 p 标签,里面还是用 Lorem 来代替内容,下面还是用一个 a 标签。
<!-- 介绍区域 -->
<section id="home-info">
<!-- 左侧 -->
<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. Quo, porro quam voluptatibus nulla rem sapiente
aperiam maxime totam alias accusantium, sit facilis quas nihil, eum quia magnam iure. Aut, vero.</p>
<a class="btn" href="about.html">阅读更多</a>
</div>
</section>
在 style 中给 home-info 设置样式,然后在 #home-info 节点下,找到 .info-img 名,给他设置样式,然后在找到 #home-info 节点下的 info-eontent 给他设置样式,然后我们在设置背景颜色,给 home-info 设置类名,然后考虑到以后还会用这个,所以将他放在通用 css 当中,然后我们在给 a 标签设置一个类名,在给他添加背景颜色和字体颜色。
/* home-info */
#home-info{
height: 400px;
}
#home-info .info-img{
float: left;
width: 50%;
background: url(../img/beijing1.jpg) no-repeat center center/cover;
height: 100%;
}
#home-info .info-content{
float: right;
width: 50%;
text-align: center;
height: 100%;
padding: 50px 30px;
overflow: hidden;
}
#home-info .info-content p{
padding-bottom: 30px;
}
下载 Font Awesome 字体图标库,下载完之后进行解压使用,然后在 html 中使用。
<!-- 首页下滑区域 -->
<section id="features">
<div class="box">
<i class="fa fa-users fa-3x"></i>
<h3>讲师介绍</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum accusamus aspernatur ab, minus fugit molestiae!
Est molestias excepturi sed nihil!</p>
</div>
<div class="box">
<i class="fa fa-leanpub fa-3x"></i>
<h3>讲师介绍</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum accusamus aspernatur ab, minus fugit molestiae!
Est molestias excepturi sed nihil!</p>
</div>
<div class="box">
<i class="fa fa-graduation-cap fa-3x"></i>
<h3>讲师介绍</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum accusamus aspernatur ab, minus fugit molestiae!
Est molestias excepturi sed nihil!</p>
</div>
</section>
在 style 中,设置了他们的背景颜色,和宽高
/* features */
.box{
float: left;
width: 33.3%;
padding: 50px;
text-align: center;
}
.box i{
margin-bottom: 10px;
}
.bg-light{
background: #f4f4f4;
color: #333;
}
.bg-primary{
background: #f7c08a;
color: #333;
}
然后我们现在写底部。
<div class="clr">
<footer id="main-footer">
<p>莱恩在线 © 2021,All Rights Reserved</p>
</footer>
</div>
下面我们来写第二部分。
about.html ,将index.html的代码复制到about.html中,除了头部和尾部之外全部删除,然后我们创建一个 section 标签,来代表我们的内容区域,首先先看顶部下面的第一个区域,这个区域是由两部分组成,所以我们在里面创建两个 div 一个取名为 info-left,一个为 info-right。
<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. Architecto vitae quisquam eum veritatis rem minima
quibusdam corrupti ratione ad atque. Reprehenderit incidunt tempora recusandae illum voluptatibus voluptatem,
impedit ea veritatis!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad delectus molestias adipisci cumque minus beatae
dignissimos corrupti enim nulla distinctio!</p>
</div>
<div class="info-right">
<img src="./img/about-1.jpg" alt="莱恩在线">
</div>
</div>
</section>
样式没什么,左边部分左浮动,右边部分右浮动,img 给他设置成块级元素。
#about-info .info-left{
float: left;
width: 50%;
height: 100%;
}
#about-info .info-right{
float: right;
width: 50%;
height: 100%;
}
#about-info .info-right img{
display: block;
width: 80%;
margin: 0 auto;
border-radius: 50%;
}
.py{
padding: 10px 0;
}
.l-heading{
font-size: 40px;
padding-top: 20px;
}
下面来写中间部分,中间部分用 section 包裹,里面是两部分,所以创建两个 div 里面分别是对应的照片和内容。
<section id="testimonials">
<div class="container">
<h2>学员评价</h2>
<div class="testimonial">
<img src="./img/about-1-1.jpg" alt="jan">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae reiciendis expedita aperiam, nam vero
necessitatibus.</p>
</div>
<div class="testimonial">
<img src="./img/about-1-2.jpg" alt="Lucy">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae reiciendis expedita aperiam, nam vero
necessitatibus.</p>
</div>
</div>
</section>
样式部分。
#testimonials{
height: 600px;
background: url('../img/about-bj.jpg') no-repeat center center/cover;
padding-top: 100px;
}
#testimonials h2{
color: #fff;
text-align: center;
padding-bottom: 40px;
}
#testimonials .testimonial{
padding: 20px;
margin-bottom: 40px;
border-radius: 5px;
opacity: 0.9;
}
#testimonials .testimonial img{
width: 100px;
height: 100px;
border-radius: 50%;
float: left;
margin-right: 20px;
}
下面来写联系我们页面,创建一个 contact.html ,来书写联系我们页面,把 index.html 文件复制到 contact.htnl 中,不需要的部分删除,下面我们创建一个 section 标签来进行包裹内容区域,创建一个 div 里面包裹这 h1 头部,还有三个 form 表单。
<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="message">反馈内容</label>
<textarea type="text" name="message" id="message"></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>莱恩在线@163.com</p>
</div>
</div>
</section>
样式。
/* contact-form */
#contact-from .form-group{
margin-bottom: 20px;
}
#contact-form label{
display: block;
margin-bottom: 5px;
}
#contact-form input,
#contact-form textarea{
width: 100%;
padding: 10px;
border: 1px #ddd solid;
}
#contact-form textarea{
height: 300px;
}
#contact-form input:focus,
#contact-form textarea:focus{
outline: none;
border-color: #f7c08a;
}