项目三：生活资讯网开发

最新推荐文章于 2024-05-06 20:52:53 发布

X-77

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量123

点赞数 1

分类专栏：项目总结文章标签： html css

本文链接：https://blog.csdn.net/weixin_45990864/article/details/119734045

版权

项目总结专栏收录该内容

6 篇文章 1 订阅

订阅专栏

前言：在前面我们学习了移动端的相关布局方式，本项目主要是针对前面的学习进行一个总结练习。本篇博客的主要内容是博主在该项目开发中遇到的一些问题和学习到的新东西。

开发模板网址：http://zerored.3vhost.net/Web/index.html

1.思考开发流程

2.轮播图的制作

3.盒子阴影

1.思考开发流程

首先当我们拿到需要开发的项目时，除了要进行需求分析，还要思考每一个页面完成的流程。当我们制作多个类似页面且需要照顾兼容性时，一定要先把某个页面完成之后再开始下个页面

（不然后期可能会改到流泪！！）当我们在前期布局时也一定要足够清晰，在多学多练的过程中要提高自己写代码的逻辑能力。

2.轮播图的制作

在首页中有一个地方需要制作轮播图，我们除了可以使用bootstrap中的代码，也可以自己书写。需求如下：

1.三张图并排在一行显示——浮动/flex弹性布局等

2.点击切换图片（需要使用js，现阶段暂时不做该效果）

3.当图片停留一段时间进行自动切换——动画

分析：

我们将三张图分别放在三个盒子里面，让三个盒子并排在一行显示，用一个盒子来作用动画效果，另一个大盒子作为该部分的可见区域，超过该区域的部分进行隐藏。它们的代码如下：

/* HTML结构 */

        <div class="banner-hidden">
            <div class="banner-contain">
                <div class="bannerbox-1">
                    <!-- 标题 -->
                    <a href="#" title="警惕更年期综合征带来的危害">
                        <div class="bt">
                            <span>警惕更年期综合征带来的危害</span>
                            <h3>警惕更年期综合征带来的危害…</h3>
                        </div>
                    </a>
                </div>
                <div class="bannerbox-2">
                    <!-- 标题 -->
                    <a href="#" title="有这些症状的一定不能耽误得好好治">
                        <div class="bt">
                            <span>有这些症状的一定不能耽误得好好治</span>
                            <h3>有这些症状的一定不能耽误得好好治……</h3>
                        </div>
                    </a>
                </div>
                <div class="bannerbox-3">
                    <!-- 标题 -->
                    <a href="#" title="百科知识大全">
                        <div class="bt">
                            <span>百科知识大全</span>
                            <h3>生活百科频道有全面的生活百科知识大全与最实…</h3>
                        </div>
                    </a>
                </div>
            </div>
        </div>

css的代码如下：

.banner-hidden {
    position: relative;
    width: 770px;
    height: 100%;
    overflow: hidden;
}
.banner-contain {
    position: absolute;
    left: 0;
    top:0;
    width: 300%;
    height: 100%;
    transform: translate(0,0);
    animation: loop 18s linear infinite alternate;

}

/* 焦点图轮换样式 */
.bannerbox-1 {
    background: url(../image/1-21010G44509142.jpg) ;
    
}
.bannerbox-2 {
    background: url(../image/1-21010G44436115.jpg);
    
}
.bannerbox-3 {
    background: url(../image/1-21010G44341H2.jpg);
   
}

动画相关的代码如下：

/* 动画效果 */
/* 切换动画 */

@keyframes loop {
    0% {
        transform: translate(0,0);
    }
    20%{
        transform: translate(0,0); 
        /* 停留动画 */
    }
    33.33%{
        transform: translateX(-770px);
    }
    53.33%{
        transform: translateX(-770px);
    }
    66.66%{
        transform: translateX(-1540px);
    }
    86.66%{
        transform: translateX(-1540px);
    }
    100%{
        transform: translate(0,0);
    }
    
}

因为我们这里是3张图，做完一次动画需要18s，所以每张图的时间为6s，将这个部分分为滑动和停留时间。这样就可以实现轮播效果。