一、项目介绍
- 生活资讯网是一款发布生活资讯新闻的网站。主要为人们提供各类生活资讯，如饮食健康、生活常识、美容养生等全面广阔的内容，本站可以让您能轻易找到您想要的各类生活知识。
二、项目架构图
- 架构图是为了让我们理清思路，了解这个项目需要作什么。
三、具体页面部分模块制作
1.首页轮播图部分
轮播图效果：
- 自己切换图片。
- 点击图片左右两侧的侧三角尖可以切换。
- 点击图片底部的小圆点也可以切换。
效果图：
轮播图具体做法
1.引用了bootstrap布局里面的代码。
在开始复制布局模板代码前，一定要引入基本的样式，不然就可能复制代码后，效果不能实现。
<!-- 引入样式 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> -->
<script src="../bootstrap/js/bootstrap.min.js" rel="stylesheet"></script>
代码如下（示例）：
/* --body部分-- */
<div class="banner">
<div id="carousel-example-generic" class="carousel slide banner4" data-ride="carousel" data-interval="2200">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../images/banner1.jpg" alt="">
<div class="carousel-caption">
<h3>有这些症状的一定不能耽误得好好治</h3>
<p>有这些症状的一定不能耽误得好好治...</p>
</div>
</div>
<div class="item">
<img src="../images/banner2.jpg" alt="">
<div class="carousel-caption">
<h3>警惕更年期综合症带来的危害</h3>
<p>警惕更年期综合症带来的危害...</p>
</div>
</div>
<div class="item">
<img src="../images/banner3.jpg" alt="">
<div class="carousel-caption">
<h3>百科知识大全</h3>
<p>生活百科频道有全面的生活百科知识大全与最实...</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
虽然我们引用了bootstrap布局的模板，但是还是要根据实际情况，适当的增添对应的布局的css代码。
/* --css部分-- */
.banner {
float: left;
width: 66.666667%;
padding: 0 10px 0 0;
}
.banner img {
width: 100%;
}
.banner .item {
margin: 0;
padding: 0;
}
.banner .item .carousel-caption h3 {
position: absolute;
left: -117px;
bottom: 65px;
font-size: 13px;
background: #000;
color: #fff;
}
.banner .item .carousel-caption p {
position: absolute;
left: -117px;
bottom: 20px;
font-size: 25px;
}
2.首页图片部分
图片效果：
- 每张图上面都感觉有一个黑色的遮罩层，但是，这个遮罩层是上浅下深。
- 当鼠标经过图片的时候，遮罩层会消失，图片变得清晰。
效果图如下：
代码如下（示例）：
/* --body部分-- */
<div class="pic">
<div class="w">
<div class="row">
<div class="piclist">
<a href="#">
<div class="pic1 zzc">
<div class="pic-title">
<span>保健</span>
<h3>女生建议要多吃这样的食物</h3>
</div>
</div>
</a>
</div>
<div class="piclist">
<a href="#">
<div class="pic2 zzc">
<div class="pic-title">
<span>养生知识</span>
<h3>想要一秒在职场里的看懂别人 六大绝招看过</h3>
</div>
</div>
</a>
</div>
<div class="piclist">
<a href="#">
<div class="pic3 zzc">
<div class="pic-title">
<span>保健按摩</span>
<h3>如何防止衰老 让青春永驻</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
写css代码的时候，记得做好注释。以免后面想修改样式的时候找不到地方。
/* --css部分-- */
.pic {
padding-top: 15px;
}
.piclist {
width: 33.333333%;
float: left;
height: 200px;
padding: 0 15px;
position: relative;
}
/* --属性选择器的知识-- */
.piclist div[class^=pic] {
height: 100%;
background-size: 100% 100%;
position: relative;
}
.piclist .pic1 {
background: url(../images/lit1.jpg) no-repeat;
}
.piclist .pic2 {
background: url(../images/lit2.jpg) no-repeat;
}
.piclist .pic3 {
background: url(../images/lit3.jpg) no-repeat;
}
/* 图片遮罩层的效果 */
.zzc::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
/* --CSS3 线性渐变（linear-gradient）--*/
background: linear-gradient( 180deg, rgba(0, 0, 0, .01) 2%, rgba(0, 0, 0, .95) 100%);
transition: all .4s ease-in-out;
}
.piclist div[class^=pic]:hover::before {
display: none;
}
.pic-title {
position: absolute;
left: 25px;
top: 125px;
}
.pic-title span {
padding: 4px 10px;
background-color: #000;
color: #fff;
font-size: 13px;
margin: 0 5px 5px 0;
border-radius: 2px;
display: inline-block;
text-shadow: none;
line-height: 1;
}
.pic-title h3 {
color: #fff;
display: block;
font-size: 16px;
max-height: 48px;
overflow: Hidden;
font-weight: normal;
margin-top: 10px;
}
总结
生活资讯网这个项目要注意pc和移动端的转换。我用的是媒体查询方法根据具体的屏幕大小来设置相对于的属性和样式。还有一些小细节需要注意，例如：css3动画的使用，背景渐变的使用，伪类的使用（上一个博客有写到）等。
