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

班级主页面部分

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;
}

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

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

班级页面设计——【2-主界面部分】相关推荐

基于Android的小巫新闻客户端开发--UI设计（主界面）
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 基于An ...
班级页面设计——【1-登陆注册页面】
登陆页面前言对于一个页面来说,一般都会设计登陆/注册页面,借鉴于网络上面好多登陆与注册页面做出了一款小编自己的登陆注册页面,下面是相关的页面效果和小编的代码部分. 1.登陆页面页面效果展示: 制作 ...
嵌入式系统开发笔记80：应用Qt Designer进行主界面设计
前言本篇文章讲解PyQt的基本使用方法,我们将应用Qt Designer来设计一个主界面,学习完本篇文章的内容后,你将获得如下技能. (1)在VS Code中启动Qt Designer ...
QQ实训项目(登录注册主界面消息列表资料卡)
界面废话不多说,直接上界面注册功能如下:用户名存入数据库界面检验密码是否符合规范 2:密码规范存入数据库并且加密(数据库的文件可以找我拷贝)加密是MD5加密单向加密 3:输入手机号码点击获取 ...
10款设计师常用的APP页面设计软件
APP页面设计是APP实施过程中的关键步骤,APP页面设计是不是别具一格,取决于消费者对APP最直观的视觉效果分辨. 要创建一个令人惊讶的APP页面设计,一个高效率的APP界面设计软件是不可缺少的. ...
云炬Android开发笔记 9主界面-通用底部导航设计与一键式封装
阅读目录 1.底部导航BottomBar设计与实现 1.1 说明 1.2 基于每个tab的子frament的父类的实现 1.3 建立bean类包含tab的信息(icon+文字) 2.打造适合电商主界 ...
Ext JS 6开发实例（三）：主界面设计
在上文中,已经将CMD创建的应用程序导入到项目里了,而且也看到默认的主界面了,今天的主要工作就是修改这个主界面,以符合项目的需要.除了设计主界面,还有一些其他的东西需要配置一下. 添加本地化包打开a ...
android做试卷的页面,《Android UI界面设计》17移动互联网A卷试题和答案（3页）-原创力文档...
广州市蓝天技工学校质量记录期末考试试卷编号:QD-0812-22 A/0 流水号: 2018 -2019 学年度第一学期 2017级移动互联网应用技术高技专业<UI界面设计>试卷答案 ...
百度AI人脸识别与检测二：学生人脸识别打卡签到系统主界面功能需求和设计以及通过Python实现界面运行
<百度AI人脸识别与检测>专栏为项目专栏,从零到一,从无到有开发一个学生人脸识别签到系统:主要用到的技术有百度开放平台中的人脸检测.人脸识别.Python图形界面开发PyQt5.线程的管理 ...

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

班级主页面部分

班级页面设计——【2-主界面部分】相关推荐

最新文章

热门文章