静态页面的首页部分操作
1. body 里的html结构
(1)
<div id="showcase">
<div class="container">
<div class="showcase-content">
<h1>欢迎来到<span class="text-pranime">铄洋在线</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, exercitationem aspernatur. Animi aliquam sapiente dolores voluptatem officia nihil eum libero.</p>
<a class="btn" href="2.html">关于我们</a>
</div>
</div>
</div>
</header>
<section id="home-info" class="bg-dark">
<div class="info-img"></div>
<div class="info-content">
<h2><span class="text-pranime">铄洋在线</span> 介绍</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis ducimus voluptatem consequuntur totam! Fuga excepturi, consequatur illo minus repellat et accusamus laudantium recusandae, explicabo facilis officia neque tenetur? Quasi, nemo.</p>
<a class="btn btn-ligin" href="2.html">阅读更多</a>
</div>
</section>
2. css 样式
/* showcase */
/* center/cover */
#showcase {
background: url('../img/pexels-abdullah-ghatasheh-1631677.jpg') no-repeat center center/cover;
height: 600px;
}
#showcase .showcase-content {
color: #ffffff;
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: #ffffff;
background: #333;
padding: 13px 20px;
}
.btn:hover {
background-color: #f7c08a;
}
.btn-ligin {
background: #f4f4f4;
color: #333;
}
/* home-info */
#home-info {
height: 400px;
}
#home-info .info-img {
float: left;
width: 50%;
background: url('../img/pexels-photo-1590511.jpeg') no-repeat center center/cover;
height: 100%;
}
#home-info .info-content {
float: right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
overflow: hidden;
}
#home-info .info-content p{
padding-bottom: 30px;
}
3. 难点
css 样式中
background: url图片路径 no-repeat不平铺 center居中 center/cover居中并且沾满整个盒子容器(屏幕)
