班级页面设计——【2-主界面部分】

张小鱼༒

已于 2022-09-19 15:32:33 修改

阅读量1.3k

点赞数 2

分类专栏：期末课程设计专栏文章标签：前端 javascript 开发语言 html css

于 2022-07-01 20:34:46 首次发布

本文链接：https://blog.csdn.net/m0_56006701/article/details/125564848

版权

期末课程设计专栏专栏收录该内容

3 篇文章 1 订阅

订阅专栏

班级主页面部分

1、前言
对于一个主页面来说，一般都会设计导航栏，以及轮播图，还有一些关于此网站的介绍信息，还有主页下面的一些底部模块，会有网站相关的信息，比如地址，联系方式等等，网络上面有好多主页面，比如我们熟悉的京东和淘宝，它们的网站就是很具有典型性的，一般我们可以借鉴与他们的网站制作，来做出自己的网站。下面是相关的页面效果和小编的代码部分。

2.主页面
页面效果展示

制作主页面的大体框架：
登陆与注册页面大体上分为三部分：

框架图片显示：

1、上方的导航部分【以下简称为A】：

A部分又分为上下部分：

上面部分又细分为左边部分和右边部分，左边部分以内容填充，右边部分有一部分字体图标，基本用到的就是ul和li来做，给他们加上相关的浮动效果，就可以做到了，在这些里面还加入了一些字体图标，字体图标请参考icomoon官网

链接为：IcoMoon App - Icon Font, SVG, PDF & PNG Generator

下方部分是一个轮播图的，但是小编编写轮播图的效果一直出现错误，此处能解决这个问题的宝子可以在下方留言区给小编解答一下，小编跪谢！！！

2、中间部分主要在于搭建主页的整体架构【简称为B】：

B部分大体分为两个模块b1【B里面的上面部分】和b2【B里面的下面部分】模块

最上面可以放一个div的盒子来做，在里面添加ul和li标签，在li里面嵌套a标签，让页面可以链接到其他页面上去。

b1部分：

此处的相关活动快报，用到了h标签和p标签，此处的三角是一个叠加的三角CSS效果。

b2部分：

这里的照片是以内容的形式添加的效果，在存放照片的部分，小编加入了动画效果，

3，下方是一个底部相关信息的页面：

下面蓝色的部分，此处用到的就是ul和li结构，在li里面嵌套相关的内容部分。

最下面的信息部分，是网站的联系方式和地址的相关内容。

在之后的几个页面里面，对于头部和尾部部分的部分，他们共用同一个common.css文件，小编在后面几篇当中就不在赘述了。

主页面相关的HTML代码部分：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级首页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
<body>
    <!-- 班级首页制作 -->
    <section class="shortcut">
        <div class="sc_div w">
            <div class="fl">
                <div class="fl_div">
                        <div class="fl_div1"><p></p></div>
                        <div class="fl_div2"><strong>大数据202班</strong></div>                          
                        <div class="fl_div3" >我们的青春，从大数据202班启航</div>
                </div>               
            </div>
            <div class="fr">
                    <ul>
                        <li><a href="">班级主页</a></li>
                        <li></li>
                        <li><a href="">班级介绍</a></li>
                        <li></li>
                        <li><a href="">班级课程表</a></li>
                        <li></li>
                        <li><a href="">班级新闻</a></li>
                        <li></li>
                        <li><a href="">重要通知</a></li>
                        <li></li>             
                        <li><a href="">关于我们</a></li>
                        <li></li>
                        <li><a href="">联系方式</a></li>
                    </ul>
                </div>
        </div>        
    </section>
    <!-- 轮播图 -->
    <div class="style-bgc">
        <div class="lbt">
        <img src="../期末课设HTML/images/bg2.jpg" alt="">
        <span class="left"><</span>
        <span class="right">></span>
        <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
        </div>
    </div>
    <!-- 导航栏 -->
    <header class="bjdhl">
        <div class="bjdhl_div w">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="activity.html">相关活动</a></li>
                <li><a href="professional.html">本专业介绍</a></li>
                <li><a href="syllabus.html">班级课程表</a></li>
                <li><a href="class-grow.html">班级成长历程</a></li>
                <li><a href="photo.html">班级相册</a></li> 
                <li><a href="classroom.html">班级成员信息表</a></li>           
                <li><a href="message -board.html">留言板</a></li>
                <li><a href="personal-center.html">个人中心</a></li>
            </ul>
        </div>
    </header>
    <!-- 下方内容 -->
    <!-- 相关活动 -->
    <div class="xghd w">
        <div class="xghd_fl">
            <div class="news">
                <div class="xghd_news"><span class="xghd_news_span1"></span>
                    <h5>相关活动快报</h5><span class="xghd_news_span2"></span>
                    <a href="#" class="more">更多</a>
                </div>
                <div class="xghd_ul">
                <ul>
                    <li>
                        <a href="">
                            <div class="circle"></div>
                            <strong>[附件]</strong>&nbsp;
                            大学生年度人物推荐汇总报名表
                            <div class="xghd_date">2022-03-15</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="circle"></div>
                            <strong>[附件]</strong>&nbsp;
                            第八届中国国际互联网＋大学生创新创业大赛
                            <div class="xghd_date">2022-03-15</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="circle"></div>
                            <strong>[附件]</strong>&nbsp;
                            兰州城市学院信息工程分赛
                            <div class="xghd_date">2022-03-15</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="circle"></div>
                            <strong>[附件]</strong>&nbsp;
                            关于开展“百日冲刺”系列就业活动
                            <div class="xghd_date">2022-03-15</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="circle"></div>
                            <strong>[附件]</strong>&nbsp;
                            就业力诊断的通知
                            <div class="xghd_date">2022-03-15</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="circle"></div>
                            <strong>[附件]</strong>&nbsp;
                            青年大学习新一期已经发布
                            <div class="xghd_date">2022-03-15</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="circle"></div>
                            <strong>[附件]</strong>&nbsp;
                            大学生年度人物推荐汇总报名表
                            <div class="xghd_date">2022-03-15</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="circle"></div>
                            <strong>[附件]</strong>&nbsp;
                            兰州城市学院关于2021-2022学年第二学期
                            <div class="xghd_date">2022-03-15</div>
                        </a>
                    </li>
                </ul>
                </div>
            </div>
        </div>
        <div class="xghd_fr">
            <h1>活动图集</h1>
            <div class="hdtp">
                <ul>
                    <li>
                        <img src="../期末课设HTML/images/ydh1.jpg" alt="">
                        <p class="zpq_wb">运动会剪影1</p>
                    </li> 
                    <li>
                        <img src="../期末课设HTML/images/ydh2.jpg" alt="">
                        <p class="zpq_wb">运动会剪影2</p>
                    </li>
                    <li>
                        <img src="../期末课设HTML/images/ydh3.jpg" alt="">
                        <p class="zpq_wb">运动会剪影3</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 班级简介 -->
    <div class="bjjj w">
        <div class="bj-fl">
            <ol>
                <li class="fl-li fl-li1"></li>
                <li class="fl-li fl-li2"></li>
                <li class="fl-li fl-li2"></li>
                <li class="fl-li fl-li1"></li>
                <li class="fl-li fl-li1"></li>
                <li class="fl-li fl-li2"></li>
            </ol>
        </div>
        <div class="bj-fr">
        <h1>班级简介</h1>
        <p>大数据202班建立于2020年09月18日，大一的我们，懵懵懂懂，慢慢的认识了彼此，班级是一个团结友爱，活泼上进，充满活力的班级体。全班同学在吴老师的带领下，努力拼搏，积极进取，成为年级里的佼佼者。

            班里的每个同学，都能感受到班级体的温暖。记得，有一名同学扭伤了脚，不得不拄着拐杖来上学，行动很不方便。同学们自愿向他伸出援助之手。每天都扶他上下楼，帮他买饭。同学们无微不至的关怀温暖了他的心。</p>
        </div>
    </div>
    <!-- 底部部分 -->
    <footer class="footer w">
        <div class="ft-div">
                    <ul>
                        <li>服务指南</li>
                        <li>班级首页</li>
                        <li>班级活动</li>
                        <li>班级缩影</li>
                        <li>成长历程</li>
                    </ul>
        </div>
        <div class="ft-div">
                    <ul>
                        <li>服务指南</li>
                        <li>班级首页</li>
                        <li>班级活动</li>
                        <li>班级缩影</li>
                        <li>成长历程</li>
                    </ul>
        </div>
        <div class="ft-div">
                    <ul>
                        <li>服务指南</li>
                        <li>班级首页</li>
                        <li>班级活动</li>
                        <li>班级缩影</li>
                        <li>成长历程</li>
                    </ul>
        </div>
        <div class="ft-div">
            <ul>
                <li>服务指南</li>
                <li>班级首页</li>
                <li>班级活动</li>
                <li>班级缩影</li>
                <li>成长历程</li>
            </ul>
        </div>
        <div class="ft-div">
            <ul>
                <li>服务指南</li>
                <li>班级首页</li>
                <li>班级活动</li>
                <li>班级缩影</li>
                <li>成长历程</li>
            </ul>
        </div>
        <div class="foot_div1_fr">
            <ul>
                <li class="fr_div1_li">
                    <i><img src="../期末课设HTML/images/logo.png" alt=""></i>
                    <img src="../期末课设HTML/images/ewm.jpg" alt="">
                    <p>班级QQ群</p>
                </li>
            </ul>
            
        </div>       
    </footer>
    <div class="foot_div w">
        <div class="links">
                <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="">班级QQ群</a> | <a href="">班级成员</a> | <a href="">本班荣誉</a> | <a href="">班级信箱</a> | <a href="">友情链接</a> | <a href="">English Site</a>
        </div>
        <div class="ft_div1">
                学校地址：甘肃省兰州市安宁区 电话：0931-7601072  传真： 0931-7601142 邮编: 730070 <br>
                此页面版权归作者所有
        </div>
    </div>   
<script type="text/javascript">
    // index：索引， len：长度
    var index = 0, len;
    // 类似获取一个元素数组
    var imgBox = document.getElementsByClassName("img-slide");
    len = imgBox.length;
    imgBox[index].style.display = 'block';
    // 逻辑控制函数
    function slideShow() {
        index ++;
        // 防止数组溢出
        if(index >= len) index = 0;
        // 遍历每一个元素
        for(var i=0; i<len; i++) {
            imgBox[i].style.display = 'none';
        }
        // 每次只有一张图片显示
        imgBox[index].style.display = 'block';
    }
    
    // 定时器，间隔3s切换图片
    setInterval(slideShow, 3000);       
</script>
</body>
</html>

头部和底部共用的CSS文件:

common.css文件的代码

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?e4p3ap');
    src:  url('../fonts/icomoon.eot?e4p3ap#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?e4p3ap') format('truetype'),
      url('../fonts/icomoon.woff?e4p3ap') format('woff'),
      url('../fonts/icomoon.svg?e4p3ap#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
.w{
    width: 1300px;
    margin: 0 auto;
}
.fl{
    float: left;
}
.fr {
    padding-top: 10px;
    float: right;
}
.shortcut{
    width: 1600px;
    height: 100px;
    background-color: rgb(121, 119, 228);
}
.fr ul li{
    float: left;
}
/* 快捷导航模块 */
.sc_div {
    height: 80px;
    line-height: 80px;
}
/* 左边部分 */
.fl_div{
    padding-top: 10px;
    width: 324px;
    height: 80px;
    color: #fff;
}
/* 左边小图标 */
.fl_div1{   
    float: left;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 18px;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;

}
.fl_div1 p{
    margin-top: -13px;
    margin-left: -15px;
    width: 50px;
    height: 50px;
    background-color: #fff;
    z-index: 1;
}
/* 左边文字部分 */
.fl_div2 {
    float:left;
    line-height: 40px;
    height: 40px;
    margin-top: 8px;
    font-size: 29px;    
}
.fl_div3{
    float:left;
    margin-top: -10px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
}
/* 右边部分 */
.fr ul li{
    float: left;
}
.fr ul li a{
    font-size: 13px;
    color: #fff;
}
.fr ul li:nth-child(11)::after{
    margin-left: 10px;
    color: rgb(255, 255, 255);
    content: '\e902';
    font-size: 15px;
    font-family: 'icomoon';
}
.fr ul li:nth-child(13)::after{
    margin-left: 10px;
    color: #fff;
    content: '\e004';
    font-size: 17px;
    font-family: 'icomoon';
}
/* 选择所有的偶数的小li */
.shortcut .fr ul li:nth-child(even) {
    width: 2px;
    height: 12px;
    background-color: #fff;
    margin: 34px 15px 0;
}
.fr ul li a::after{
    background-color: rgb(66, 43, 247);
    border-radius: 50%;
    color: #000;
}
/* 轮播图 */
.two{
    width:700px;
    float:left;
    margin-top:50px;
    margin-left: 60px;
    box-sizing: border-box;
    
  }
  .two h1{
    color:aliceblue;

  }
  .two>#lunbo{
      width:700px;
      height:400px;
      background-color:transparent;
      overflow:hidden;/*溢出不显示*/
  }
  .two>#lunbo>#inlunbo{
      float:left;
      width:1200%;
  }
  .two>#lunbo>#inlunbo>#lunbo1{
      float:left;
  }
  .two>#lunbo>#inlunbo>#lunbo2{
      float:left;
  }

/* 控制按钮的样式 */
#leftArrow,
#rightArrow{
    position: absolute;
    left: 5px;
    top: 43%;
    width: 25px;
    height: 30px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.7;
    font-size: 20px;
    cursor: pointer;
    z-index: 1000;
}
#rightArrow{
    left: auto;
    right: 5px;
}
#sliderBtn{
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
}
.unitBtn{
    width: 10px;
    height: 10px;
    background-color: #eee;
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
}
.btnActive{
    background-color: #4C98F7;
}
/* 下方轮播图 */
.style-bgc{
    background-color: rgb(194, 180, 255);
    width: 1600px;
}
.lbt{
    position: relative;
    margin-left: 150px;
    width: 1300px;
    height: 460px;
    border: 8px solid #eee;
    outline: 1px solid #999;
}
.lbt img{
    width: 1280px;
    height: 445px;
}
.left{
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -15px;
    height: 30px;
    line-height: 30px;
    width: 20px;
    color: #fff;
    text-align: center;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: rgba(78, 76, 76, 0.3);
}
.right{
    position: absolute;
    right: 0px;
    top: 0px;
    top: 50%;
    margin-top: -15px;
    height: 30px;
    line-height: 30px;
    width: 20px;
    color: #fff;
    text-align: center;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color: rgba(78, 76, 76, 0.3);
}        
.lbt ul{
    position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -100px;                   
    bottom: 6px;
    height: 20px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255,.3);
}
.lbt ul li{
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    margin-left: 20px;
    margin-top: 5px;           
}
/* 班级导航 */
.bjdhl{
    width: 1600px;
    height: 60px;
    background-color: #e07a52;
}
.bjdhl_div{
    margin-left: 100px;
}
.bjdhl_div ul li a{
    margin-top: 15px;
    margin-left: 60px;
    float: left;
    font-size: 19px;
    text-align: center;
    color: #fff;
}
.bjdhl_div ul li a:hover{
    color: #000;
}
/* 底部部分 */
.footer{
    float: left;
    height: 360px;
    margin-top: 30px;
    padding-top: 40px;
    margin-left: 150px;
    margin-bottom: 36px;
    background-color: #0f3c5b;
}
.ft-div{
    border-top: 2px solid #fff;   
    margin-top: 15px;
    width: 200px;
    font-size: 18px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    float: left;
}
.ft-div ul li:first-child{
    font-size: 25px;
    margin-bottom: 15px;
}
/* 右边二维码部分 */
.foot_div1_fr{
    margin-left: 90px;
    float: left;
    width: 180px;
    height: 300px;
}
.fr_div1_li i{
    margin-left: 50px;
}
.fr_div1_li i img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.fr_div1_li img{
    width: 150px;
    height: 188px;
}
.fr_div1_li p{
    margin-top: 16px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    font-family: '宋体';
}
/* 下方信息部分 */
.foot_div{
    margin-left: 150px;
    text-align: center;
    margin-bottom: 30px;
}
.links {
    border-bottom: 2px dashed #000;
    margin-top: 60px;
    padding-left: 30px;
    padding-bottom: 18px;
}
.links a {
    width: 80px;
    height: 20px;
    margin-left: 18px;
    margin-right: 18px;
    color: rgb(51, 50, 50);
}
.links a:hover{
    background-color: rgb(62, 141, 206);
    color: #fff;
}
.ft_div1{
    margin-top: 18px;
    line-height: 20px;
}

主页面专有的CSS文件部分：

index.css文件的代码

/* 相关活动 */
.xghd{
    padding-top: 30px;
    height: 300px;
    margin-left: 150px;
}
.xghd_fl{
    float: left;
    margin-right: 30px;
    width: 470px;
    height: 240px;
}
.news{
    float: left;
    height: 240px;
    border: 1px solid #e4e4e4;
}
.xghd_news{
    position: relative;
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}
.xghd_news h5{
    background-color: #0f3c5b;
    color: #fff;
    float: left;
    font-size: 15px;
}
.xghd_news span{
    width: 0;
    height: 0;
    border-color: transparent #0f3c5b transparent transparent;
    border-style: solid;
}
.xghd_news_span1{
    position: absolute;
    top: 0;
    left: 0;
    border-width: 33px 15px 0 0;
}
.xghd_news_span2{
    position: absolute;
    top: 0;
    left: 0;
    border-width: 0 15px 33px 0;
}
.xghd_news .more{
    float: right;
    color: rgb(87, 87, 87);
}
.xghd_news .more::after{
    content: '>';
    font-size: 8px;
    color: rgb(169, 169, 169);
}
.xghd_ul{
    padding: 5px 15px 0;
}
.xghd_ul ul li{
    float: left;
    width: 450px;    
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.xghd_ul ul li a{
    color: rgb(53, 48, 48);    
}
.xghd_ul ul li a strong{
    float: left;
}
.xghd_date{
    float: right;
    color: rgb(56, 63, 63);
}
.circle{
    display: block;
    float: left;
    margin-top: 8px;
    margin-right: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
}
.xghd_ul ul li a:hover{
    color: red;
}
.xghd_fr{
    float: right;
}
.xghd_fr h2{
    font-size: 30px;
    text-align: left;
}
/* 活动图片 */
.hdtp{
    position: relative;
    width: 750px;
    height: 200px;
}
.hdtp ul li {
    float: left;
}
.hdtp ul li img{
    width: 245px;
    height: 170px;
}
.hdtp ul li:hover img{
    animation: run 4s;
}
/*创建动画*/
@keyframes run{
/*创建动画帧关键字 动画名称 run*/
    0%{ transform:scale(0.8);}
    25%{transform:scale(1.2);}
    50%{transform:scale(1);}
    70%{transform:scale(1.1);}
    100%{transform:scale(1);box-shadow: 0 0 10px rgba(253, 29, 29, 0.7);}
}
.hdtp p{
    margin-top: 12px;
    font-size: 13px;
    text-align: center;
}
/* 班级简介 */
.bjjj{
    margin-left: 150px;
    height: 400px;
}
.bj-fl{
    float: left;
    width: 430px;
    height: 390px;
    background: url(../images/fg.png);
}
.bj-fl ol li{
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    overflow: hidden;
    width: 200px;
    height: 115px;
    line-height: 115px;
}
.fl-li:nth-child(2),.fl-li:nth-child(3),.fl-li:nth-child(6){
    background-color: rgba(255, 162, 224,.6);
}
.fl-li:nth-child(1),.fl-li:nth-child(4),.fl-li:nth-child(5){
    background-color: rgba(151, 149, 255,.6);
}
.fl-li::before{
    width: 100%;
    height: 100%;
    content: '大数据202班影像';
    text-align: center;
    color: #fff;
    font-size: 20px;
    display: block;
}
.fl-li1::before{
    transform: rotate(180deg);
    transform-origin: left bottom;
    transition: all 1.5s;
    background: url(../images/bj.jpg) no-repeat;
}
.fl-li2::before{
    transform: rotate(-180deg);
    transform-origin: right top;
    transition: all 1.5s;
    background: url(../images/bj1.jpg);
}
.fl-li1:hover:before{
    transform: rotate(0deg);
}
.fl-li2:hover:before{
    transform: rotate(0deg);
}
.bj-fr{
    float: right;
    width: 800px;
    height: 400px;
}
.bj-fr h1{
    padding-left: 20px;
    margin-bottom: 20px;
    font-size: 35px;
    color: #fff;
    font-family: '宋体';
    background-color: rgb(30, 7, 59);
}
.bj-fr p{
    line-height: 65px;
    font-size: 18px;
    color: #0f3c5b;
}

希望我的页面能带给你一些灵感，有不懂的地方可以在下方评论，欢迎讨论。

或者有什么改进的地方也可以告诉小编奥。