theluyuan/guanwangh
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
theluyuan 2022-09-15 09:52:18 +08:00
commit e3082e3963
160 changed files with 4406 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
02.css Normal file
View File

@ -0,0 +1,118 @@
.swiper-container {
padding-bottom:40px;
}
.swiper-wrapper >div{
margin-right: 0.1rem;
margin-left: 0.1rem;
}
.swiper-slide {
width:978px;
transition-timing-function:linear;
}
@media only screen and (max-width:1200px){
.swiper-slide {
width:770px;
}
}
@media only screen and (max-width:980px){
.swiper-slide {
width:471px;
}
}
@media only screen and (max-height:480px){
.swiper-slide {
width:471px;
}
}
.swiper-slide img{
width:100%;
border-radius: 4px;}
.swiper-slide .title{
position:absolute;
transform:rotate(90deg);
transform-origin:left top;
left:-3px;
font-size:11px;
color: rgb(102, 102, 102);}
.swiper-button-next, .swiper-button-prev{
width:86px;
height:112px;
background-size:86px 112px;
margin-top:-56px;
outline:none;}
/* .swiper-button-next{
background-image:url(img/cursor-next.png);}
.swiper-button-prev{
background-image:url(img/cursor-prev.png);} */
.swiper-pagination-bullet{
background:none;
opacity:1;
margin:0 6px !important;
width:9px;
height:9px;
position:relative;
outline:none;
vertical-align:middle;}
.swiper-pagination-bullet span{
width:3px;
height:3px;
background:#CCC;
display:block;
border-radius:50%;
margin-top:3px;
margin-left:3px;
}
.swiper-pagination-bullet i{
background:#000;
height:1px;
width:20px;
position:absolute;
top:4px;
transform:scaleX(0);
transform-origin:left;
z-index:3;
transition-timing-function:linear;
}
.swiper-pagination-bullet-active span,.swiper-pagination-bullet:hover span{
width:9px;
height:9px;
margin-top:0;
margin-left:0;
background:#000;
position:relative;
z-index:1;
}
.swiper-pagination-bullet-active i{
animation:middle 6s;
}
.swiper-pagination-bullet:first-child.swiper-pagination-bullet-active i{
animation:first 6s;
}
.swiper-pagination-bullet:last-child.swiper-pagination-bullet-active i{
animation:last 6s;
}
@keyframes first{
0% {transform:scaleX(0.5);left:0px;}/*091*/
100% {transform:scaleX(1);left:2px;} /*0915*/
}
@keyframes last{
0% {transform:scaleX(0.7);left:-10px;}/*1090*/
20% {transform:scaleX(0.3);left:2px;} /*090*/
100% {transform:scaleX(0.3);left:0px;} /*090*/
}
@keyframes middle{
0% {transform:scaleX(0.7);left:-10px;}/*1091*/
20% {transform:scaleX(0.45);left:2px;}/*092*/
100% {transform:scaleX(1);left:2px;} /*0913*/
}
.swiper-button-next, .swiper-button-prev{
margin-top: -1.8rem;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
/* bottom: 0.69rem;
*/
display: none;
}
.swiper-button-next, .swiper-button-prev {
display: none;
}

198
Aboutuse.html Normal file
View File

@ -0,0 +1,198 @@
<!DOCTYPE html>
<html>
<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>Document</title>
<script src=""></script>
<style>
* {
margin: 0;
padding: 0;
}
a {
background-color: transparent;
text-decoration: none;
color: #333333;
}
.wrap {
width: 7.5rem;
height: auto;
}
.logo_top {
width: 1.64rem;
height: 0.65rem;
/* margin-top: 0; */
margin-left: 0.3rem;
}
.top {
width: 7.5rem;
height: 0.82rem;
background-color: #F6F6F6;
display: flex;
align-items: center;
word-break: keep-all;
overflow: auto;
}
.top::-webkit-scrollbar {
display: none
}
.top>div {
width: 1.29rem;
height: 0.31rem;
font-size: 0.32rem;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 0.38rem;
margin-left: 0.4rem;
}
.zu_us {
width: 6.84rem;
height: 1.04rem;
/* margin-left: 1.2rem; */
background-image: url(../img/组%203.png);
background-size: 6.84rem 1.04rem;
display: flex;
justify-content: center;
align-items: center;
}
.zu_us>img {
width: 6.84rem;
height: 1.40rem;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: -9999;
}
.zu_us>p {
font-size: 0.34rem;
font-family: PingFang;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0px 0px 13px rgba(0, 0, 0, 0.5000);
}
.fangx_us {
width: 0.05rem;
height: 0.24rem;
background: #0F5FB6;
margin-left: 0.3rem;
margin-top: 0.5rem;
}
.jianjie_us {
font-size: 0.28rem;
font-family: PingFang SC;
font-weight: 600;
color: #333333;
margin-top: -0.3rem;
/* margin-left: 1.4rem; */
}
.jianjie_us>p {
margin-left: 0.4rem;
}
.jianjie_us>h5 {
font-size: 0.24rem;
font-family: PingFang SC;
font-weight: 300;
color: #333333;
line-height: 0.36rem;
margin-top: 0.2rem;
margin-right: 0.4rem;
margin-left: 0.4rem;
}
</style>
</head>
<body>
<div class="wrap">
<a href="../index.html"><img class="logo_top" src="images/logo1@2x.png" alt="" ></a>
<div class="top">
<div><a href="../java.html">课程体系</a> </div>
<div><a href="../Aboutuse.html">关于我们</a></div>
<div><a href="../NewsInformation.html">新闻动态</a></div>
<div><a href="../GraduateStyle.html">毕业生风采</a></div>
<div style="margin-left:0.7rem; margin-right:0.3rem"><a href="../ContacUs.html">联系我们</a></div>
</div>
<div style="display: flex; justify-content: center; margin-top: 0.26rem;">
<div class="zu_us">
<img class="zu_us>img" src="images/组 3@3x (1)11.png" alt="">
<p class="zu_us>p">关于我们</p>
</div>
</div>
<div class="fangx_us"></div>
<div class="jianjie_us">
<p>公司简介</p>
<h5> &nbsp;&nbsp; &nbsp; 码小白是济南云翼网络科技有限公司旗下专注于编程教育、软件开发的高端品牌，主要培训 JAVA开发工程师、Web前端全栈工程师、软件测试工程师
等主流编程技术，采取实战小组制（10人以内）线下面授，保证高质量的教学，
让每个学员都能学得会，学的好，所学即所用，依托强大的师资和就业资源，让学员高薪就业，稳定就业，实际工作中得心应手。</h5>
</div>
<div class="fangx_us"></div>
<div class="jianjie_us">
<p>码小白训练营特色</p>
<h5>终身辅导：老师在线辅导，学会为止 ； <h5>
<h5>面试辅导：简历指导，面试题精讲；</h5>
<h5>就业推荐：优秀学员，内部推荐面试名企；</h5>
<h5>课程升级：滚动教学，内容紧跟行业技术前言；</h5>
<h5>行业规划：资深导师分步规划，指引你的IT之路.</h5>
</div>
<div class="fangx_us"></div>
<div class="jianjie_us">
<p>培训中存在的问题</p>
<h5>学费高 平均价格2w以上；<h5>
<h5>水平低 教师退团队水平谱表较低；</h5>
<h5>技术差 学员面试通关率依然很差；</h5>
<h5>质量差 技术知识一问几不知；</h5>
<h5>重宣传 宣传投入很大，丢本逐末；</h5>
<h5>重营销 只为追求吸睛，效果差； </h5>
<h5>重包装 广告满天飞，口碑却不行. </h5>
</div>
<div class="fangx_us"></div>
<div class="jianjie_us">
<p>选择我们的理由</p>
<h5>学费全免，学员立省2w；<h5>
<h5>学习五个月，可获2-3年的工作经验；</h5>
<h5>坚持小班教学，专注高品质的IT技能培训，狠抓质量</h5>
<h5>师资团队强大，一线互联网公司高级工程师亲授，管理经验丰富，实战经验一流</h5>
<h5>课程体系与互联网企业技术无缝衔接，注重培养学生解决问题的能力</h5>
<h5>实训项目均为互联网线上项目，在项目中学习技术(我们不教学生写任何无用的后台管理项目)
包就业，山东多家中高端互联网公司（浪潮，移动，金现代）任你挑选。 </h5>
</div>
</div>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
</body>
</html>

330
Bigdata.css Normal file
View File

@ -0,0 +1,330 @@
* {
margin: 0rem;
padding: 0em;
list-style: none;
text-decoration: none;
}
.log {
width: 1.64rem;
height: 0.65rem;
background: red;
}
.log-img{
width: 1.64rem;
height: 0.65rem;
margin-left:0.3rem ;
}
.fig{
width: 7.5rem;
height: 4.25rem;
}
.fig-img{
width: 7.5rem;
height: 4.25rem;
}
.Class-star-time{
width: 7.5rem;
margin-top:0.26rem ;
/* background-color: aqua; */
}
.Class-start-time-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #C3975F;
margin-left:0.3rem ;
}
.content{
width: 7.5rem;
/* background-color: aqua; */
}
.web{
width: 7.5rem;
height: 0.5rem;
/* background-color: aqua; */
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0.3rem;
}
.web-p{
font-size: 0.36rem;
font-family: Source Han Sans CN;
font-weight: 500;
color: #11100F;
line-height: 0.54rem;
margin-left: 0.3rem;
}
.web-div{
width: 1.29rem;
height: 0.56rem;
background: #FDEED9;
border-radius: 0.5rem 0rem 0rem 0.5rem;
margin-right: 0rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.web-img{
width: 0.31rem;
height: 0.31rem;
}
.web-span{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.teacher{
width: 7.5rem;
height: 0.5rem;
/* background-color: aqua; */
padding-top: 0.3rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.teacher-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
margin-left: 0.3rem;
}
.teacher-span{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
margin-left: 0.39rem;
}
.money{
/* background-color: aqua; */
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 500;
color: #FD514C;
margin-left: 0.3rem;
padding-top: 0.3rem;
}
.Class-time{
width: 7.5rem;
height: 0.5rem;
/* background-color: aqua; */
display: flex;
justify-content: space-around;
padding-top: 0.3rem;
}
.Duration{
width: 2.24rem;
height: 0.43rem;
background: #FDEED9;
border: 0px solid #FEAE18;
border-radius: 0.22rem;
display: flex;
justify-content: center;
align-items: center;
}
.Duration-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.Time{
width: 2.24rem;
height: 0.43rem;
background: #FDEED9;
border: 0px solid #FEAE18;
border-radius: 0.22rem;
display: flex;
justify-content: center;
align-items: center;
}
.Time-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.state{
width: 2.24rem;
height: 0.43rem;
background: #FDEED9;
border: 0px solid #FEAE18;
border-radius: 0.22rem;
display: flex;
justify-content: center;
align-items: center;
}
.state-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.navigation{
width: 7.5rem;
height: 1rem;
/* background: red; */
border-top: #EDEDED 0.01rem solid;
margin-top: 0.5rem;
display: flex;
justify-content: space-around;
align-items: center;
}
#Course-Introduction{
font-size: 0.3rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FF7A3E;
line-height: 0.28rem;
}
#Audition-list{
font-size: 0.3rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #8F8F8F;
line-height: 0.28rem;
}
.Coursediagram{
width: 7.5rem;
/* justify-content: center; */
}
.Audition-text{
width: 7.5rem;
/* background-color: #C3975F; */
display: none;
}
.Course{
width: 7.5rem;
/* background-color: #FD514C; */
display: flex;
justify-content: center;
}
.Main-image{
width: 7.08rem;
/* height: 64.64rem; */
/* display: none; */
}
.list-One{
width: 7.5rem;
/* background-color: #FD514C; */
display: flex;
justify-content: flex-start;
align-items: center;
margin-top:0.8rem;
}
.One-img{
width: 0.29rem;
height: 0.29rem;
margin-left: 0.3rem;
}
.One-div{
width: 1.05rem;
height: 0.39rem;
background: #41ACFF;
opacity: 0.5;
border-radius: 0.1rem;
margin-left: 0.3rem;
display: flex;
justify-content: center;
align-items: center;
}
.One-span{
font-size: 0.22rem;
font-family: PingFangSC;
font-weight: 400;
color: #FFFFFF;
line-height: 0.7rem;
}
.One-p{
font-size: 0.28rem;
font-family: PingFangSC;
font-weight: 400;
color: #333333;
line-height: 0.7rem;
margin-left: 0.2rem;
}
.list-Two{
width: 7.5rem;
/* background-color: #FD514C; */
display: flex;
justify-content: flex-start;
align-items: center;
margin-top:0.8rem;
}
.Two-img{
width: 0.29rem;
height: 0.29rem;
margin-left: 0.3rem;
}
.Two-p{
font-size: 0.28rem;
font-family: PingFangSC;
font-weight: 400;
color: #333333;
line-height: 0.7rem;
margin-left: 0.2rem;
}
.Bottom-navigation{
width: 7.5rem;
height: 1.28rem;
background: #1C1F21;
display: flex;
flex-direction:column;
margin-top: 0.2rem;
}
.navigation-div{
width: 7.5rem;
/* background-color: #FD514C; */
margin-top: 0.35rem;
display: flex;
justify-content: center;
align-items: center;
}
.navigation-div p{
font-size: 0.2rem;
font-family: PingFang SC;
font-weight: 400;
color: #C8CDD2;
margin-left: 0.35rem;
}
.ICP{
width: 7.5rem;
/* background-color: #FD514C; */
margin-top: 0.35rem;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.15rem;
}
.ICP-p{
font-size: 0.14rem;
font-family: PingFang SC;
font-weight: 400;
color: #949699;
margin-left: 0.3rem;
}

138
Bigdata.html Normal file
View File

@ -0,0 +1,138 @@
<!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>Document</title>
<link href="./Bigdata.css" rel="stylesheet" type="text/css">
<script src="./jquery-3.6.0.min.js"></script>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
</head>
<body>
<a href="../index.html"><img class="log-img" src="./images/log.png"></a>
<div class="fig">
<img class="fig-img" src="./images/Bigdata.png">
</div>
<div class="Class-star-time">
<p class="Class-start-time-p">开课时间：2022-05-22至2022-11-22</p>
</div>
<div class="content">
<div class="web">
<p class="web-p">大数据运维工程师</p>
<div class="web-div">
<img class="web-img" src="./images/Play.png">
<span class="web-span">试听</span>
</div>
</div>
<div class="teacher">
<p class="teacher-p">授课老师：张小北</p>
<span class="teacher-span">助教老师：王小样</span>
</div>
<div class="money"></div>
<div class="Class-time">
<div class="Duration">
<P class="Duration-p">课程时长：6个月</P>
</div>
<div class="Time">
<p class="Time-p">上课时间：全天</p>
</div>
<div class="state">
<p class="state-p">当前状态：报名中</p>
</div>
</div>
</div>
<div class="navigation">
<div id="Course-Introduction">课程简介</div>
<div id="Audition-list">试听列表</div>
</div>
<div class="Coursediagram">
<div class="Course">
<img class="Main-image" src="./images/Coursediagram.png"/>
</div>
<div class="Audition-text">
<div class="list-One">
<img class="One-img" src="./images/zuoti.png">
<div class="One-div">
<span class="One-span">免费试听</span>
</div>
<p class="One-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
</div>
</div>
<div class="Bottom-navigation">
<div class="navigation-div">
<p>关于我们</p>
<p>学习资源</p>
<p>常见问题</p>
<p>快速导航</p>
</div>
<div class="ICP">
<p class="ICP-p">ICP备案编号：京ICP备18051111号-2 版权所有：码小白训练营</p>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$("#Course-Introduction").click(function(){
$(".Audition-text").hide();
});
$("#Course-Introduction").click(function(){
$(".Main-image").show();
});
});
$("#Course-Introduction").click(function(){
$("#Course-Introduction").css("color","#FF7A3E"),
$("#Audition-list").css("color","#8F8F8F")
})
</script>
<script>
$(document).ready(function(){
$("#Audition-list").click(function(){
$(".Main-image").hide();
});
$("#Audition-list").click(function(){
$(".Audition-text").show();
});
});
$("#Audition-list").click(function(){
$("#Course-Introduction").css("color","#8F8F8F"),
$("#Audition-list").css("color","#FF7A3E")
})
</script>

151
ContacUs.html Normal file
View File

@ -0,0 +1,151 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style >
*{
margin: 0;
padding: 0;
}
a {
background-color: transparent;
text-decoration: none;
color: #333333;
}
.wrap{
width: 7.5rem;
height: auto;
}
.logo_top{
width: 1.64rem;
height: 0.65rem;
/* margin-top: 0; */
margin-left: 0.3rem;
}
.top{
width: 7.5rem;
height: 0.82rem;
background-color: #F6F6F6;
display: flex;
align-items: center;
word-break:keep-all;
overflow: auto;
}
.top::-webkit-scrollbar{
display:none
}
.top>div{
width: 1.29rem;
height: 0.31rem;
font-size: 0.32rem;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 0.38rem;
margin-left: 0.4rem;
}
.zu_us{
width: 6.84rem;
height: 1.40rem;
margin-left: 1.2rem;
}
.zu_us>img{
width: 6.84rem;
height: 1.40rem;
margin-top:0.3rem;
margin-left:-0.5rem ;
}
.zu_us>p{
font-size: 0.34rem;
font-family: PingFang;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0px 0px 13px rgba(0,0,0,0.5000);
margin-top: -1.2rem;
margin-left: 1.85rem;
}
.fangx_us{
width: 0.05rem;
height: 0.24rem;
background: #0F5FB6;
margin-left: 1.2rem;
margin-top: 0.5rem;
}
.jianjie_us{
font-size: 0.28rem;
font-family: PingFang SC;
font-weight: 600;
color: #333333;
margin-top: -0.3rem;
margin-left: 1.4rem;
}
.jianjie_us>h5{
font-size: 0.24rem;
font-family: PingFang SC;
font-weight: 300;
color: #333333;
line-height: 0.36rem;
margin-top: 0.2rem;
margin-right: 0.3rem;
}
.dutu_Us{
width: 6.90rem;
height: 6.03rem;
}
.dutu_Us>img{
width: 6.82rem;
height: 5.75rem;
background: #D8D8D8;
margin-left: 0.5rem;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<div class="wrap">
<a href="../index.html"><img class="logo_top" src="images/logo1@2x.png" alt=""></a>
<div class="top">
<div><a href="../java.html">课程体系</a> </div>
<div><a href="../Aboutuse.html">关于我们</a></div>
<div><a href="../NewsInformation.html">新闻动态</a></div>
<div><a href="../GraduateStyle.html">毕业生风采</a></div>
<div style="margin-left:0.7rem; margin-right:0.3rem"><a href="../ContacUs.html">联系我们</a></div>
</div>
<div class="zu_us">
<img src="./images/back-image2.jpg" >
<p>联系我们</p>
</div>
<div class="fangx_us"></div>
<div class="jianjie_us">
<p>联系我们</p>
<h5>码小白训练营<h5>
<h5>地址：北京市海淀区这里是地址详细信息 </h5>
<h5>邮编：100082 </h5>
<h5>电话：010-62200000 </h5>
<h5>传真：010-62200000</h5>
<h5>地图：</h5>
</div>
<div class="dutu_Us">
<img src="./images/ditu.png" >
</div>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
</body>
</html>

179
GraduateStyle.html Normal file
View File

@ -0,0 +1,179 @@
<!DOCTYPE html>
<html>
<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>Document</title>
<script src=""></script>
<link rel="stylesheet" href="./css01.css">
</head>
<body>
<div class="wrap">
<a href="../index.html"><img class="logo_top" src="./images/logo1@2x.png" alt=""></a>
<div class="top">
<div><a href="../java.html">课程体系</a> </div>
<div><a href="../Aboutuse.html">关于我们</a></div>
<div><a href="../NewsInformation.html">新闻动态</a></div>
<div><a href="../GraduateStyle.html">毕业生风采</a></div>
<div style="margin-left:0.7rem; margin-right:0.3rem"><a href="../ContacUs.html">联系我们</a></div>
</div>
<div class="banner">
<div class="banner_web02">
<!-- <img src="./images/banner.png" alt=""> -->
<p>毕业生风采</p>
</div>
</div>
<div class="main">
<div class="main_zt">
<img src="./images/y1@2x.png" alt="">
<div class="main_p">
<p class="main_p1">柴瑞强</p>
<p class="main_p1">中央国债登记结算</p>
<p class="main_p3">15000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y2@2x.png" alt="">
<div class="main_p">
<p class="main_p1">程春峰 </p>
<p class="main_p1">山东公安部门</p>
<p class="main_p3">13000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y3@2x.png" alt="">
<div class="main_p">
<p class="main_p1">王超 </p>
<p class="main_p1">中国兵器集团</p>
<p class="main_p3">14000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y5@2x.png" alt="">
<div class="main_p">
<p class="main_p1">王诗华 </p>
<p class="main_p1">浪潮集团</p>
<p class="main_p3"> 10000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y6@2x.png" alt="">
<div class="main_p">
<p class="main_p1">徐威 </p>
<p class="main_p1">吉林省公安厅</p>
<p class="main_p3">11000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y7@2x.png" alt="">
<div class="main_p">
<p class="main_p1">杨波 </p>
<p class="main_p1">北京汽车集团</p>
<p class="main_p3">12000 </p>
</div>
</div>
<div class="main_zt">
<img src="./images/y9@2x.png" alt="">
<div class="main_p">
<p class="main_p1">刘亦婷 </p>
<p class="main_p1">中国兵器集团 </p>
<p class="main_p3"> 12500</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y10@2x.png" alt="">
<div class="main_p">
<p class="main_p1">曹玉硕 </p>
<p class="main_p1">浪潮集团</p>
<p class="main_p3">15000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y11@2x.png" alt="">
<div class="main_p">
<p class="main_p1">纪雨萌 </p>
<p class="main_p1">浪潮集团</p>
<p class="main_p3">14000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y13@2x.png" alt="">
<div class="main_p">
<p class="main_p1">蒋悦 </p>
<p class="main_p1"> 山东省教科院</p>
<p class="main_p3">13000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y14@2x.png" alt="">
<div class="main_p">
<p class="main_p1">李人和 </p>
<p class="main_p1">浪潮集团</p>
<p class="main_p3">12000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y15@2x.png" alt="">
<div class="main_p">
<p class="main_p1">张志 </p>
<p class="main_p1">淄博监管局 </p>
<p class="main_p3"> 12000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y12@2x.png" alt="">
<div class="main_p">
<p class="main_p1">熊舒 </p>
<p class="main_p1">浪潮集团</p>
<p class="main_p3">10000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y16@2x.png" alt="">
<div class="main_p">
<p class="main_p1">范志敏 </p>
<p class="main_p1">浪潮集团</p>
<p class="main_p3">13000</p>
</div>
</div>
<div class="main_zt">
<img src="./images/y8@2x.png" alt="">
<div class="main_p">
<p class="main_p1">张硕 </p>
<p class="main_p1">中科软件</p>
<p class="main_p3">11500</p>
</div>
</div>
</div>
<div class="foot">
<div class="foot_p1">
<p>关于我们</p>
<p>学习资源</p>
<p>常见问题</p>
<p>快速导航</p>
</div>
<div class="foot_p2">
<p>ICP备案编号：京ICP备18051111号-2 版权所有：码小白训练营</p>
</div>
</div>
</div>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
</body>
</html>

240
NewsInformation.html Normal file
View File

@ -0,0 +1,240 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
a {
background-color: transparent;
text-decoration: none;
color: #333333;
}
.wrap{
width: 7.5rem;
height: auto;
}
.logo_top{
width: 1.64rem;
height: 0.65rem;
margin-left: 0.3rem;
}
.top{
width: 7.5rem;
height: 0.82rem;
background-color: #F6F6F6;
display: flex;
align-items: center;
word-break:keep-all;
overflow: auto;
}
.top::-webkit-scrollbar{
display:none
}
.top>div{
width: 1.29rem;
height: 0.31rem;
font-size: 0.32rem;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 0.38rem;
margin-left: 0.4rem;
}
.zu_us{
width: 6.84rem;
height: 1.40rem;
margin-left: 1.2rem;
}
.zu_us>img{
width: 6.84rem;
height: 1.40rem;
margin-top:0.3rem;
margin-left:-0.5rem ;
}
.zu_us>p{
font-size: 0.34rem;
font-family: PingFang;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0px 0px 13px rgba(0,0,0,0.5000);
margin-top: -1.2rem;
margin-left: 1.85rem;
}
.didong_new{
width:3.84rem ;
display: flex;
flex-direction: column;
justify-content: center;
}
.xuanchuan_new{
font-size: 0.28rem;
font-family: PingFang SC;
font-weight: 400;
color: #333333;
line-height: 0.36rem;
padding-top: 1.2rem;
}
.renshu_new{
font-size: 0.20rem;
font-family: Arial;
font-weight: 400;
color: #999999;
line-height: 0.70rem;
padding-top: 0.56rem;
display: flex;
justify-content: space-between;
}
.tuceng_new{
width: 2.8rem;
height: 1.68rem;
margin-left: 4rem;
margin-left: 5.4rem;
margin-top: 1.1rem;
}
.didong2_new{
width:5.35rem ;
display: flex;
flex-direction: column;
justify-content: center;
}
.fabu_new{
font-size: 0.28rem;
font-family: PingFang SC;
font-weight: 400;
color: #333333;
line-height: 0.36rem;
padding-top: 0.6rem;
margin-left: 1.2rem;
}
.renshu2_new{
font-size: 0.20rem;
font-family: Arial;
font-weight: 400;
color: #999999;
line-height: 0.70rem;
padding-top: 0.56rem;
margin-left: 1.3rem;
display: flex;
justify-content: space-between;
}
.renshu2_new>span{
margin-right: 0.3rem;
}
.tuceng2_new{
width: 2.8rem;
height: 1.68rem;
margin-left: 4rem;
margin-left: 5.4rem;
margin-top: -1.9rem;
}
</style>
</head>
<body>
<div class="wrap">
<a href="../index.html"><img class="logo_top" src="./images/logo1@2x.png" alt=""></a>
<div class="top">
<div><a href="../java.html">课程体系</a> </div>
<div><a href="../Aboutuse.html">关于我们</a></div>
<div><a href="../NewsInformation.html">新闻动态</a></div>
<div><a href="../GraduateStyle.html">毕业生风采</a></div>
<div style="margin-left:0.7rem; margin-right:0.3rem"><a href="../ContacUs.html">联系我们</a></div>
</div>
<div class="zu_us">
<img src="./images/蒙版.png" >
<p>新闻动态</p>
<div class="didong_new">
<div class="xuanchuan_new">
<p>2020年国家网络安全宣传周山东校园日暨活动周启动仪式</p>
</div>
<div class="renshu_new">
<span>123人已阅</span>
<span>2020-08-26</span>
</div>
</div>
</div>
<div class="tuceng_new">
<img src="./images/图层1.png" ></div>
<div class="didong2_new">
<div class="fabu_new">
<p>实至名归！最新报告发布，青岛全国第七！</p>
</div>
<div class="renshu2_new">
<span>123人已阅</span>
<span>2020-08-26</span>
</div>
</div>
</div>
<div class="tuceng2_new">
<img src="./images/图层2.png" ></div>
<div class="didong2_new">
<div class="fabu_new">
<p>国庆出行注意！出青高峰从9月30日开始将一直持续到…</p>
</div>
<div class="renshu2_new">
<span>123人已阅</span>
<span>2020-08-26</span>
</div>
</div>
</div>
<div class="tuceng2_new">
<img src="./images/图层3.png" ></div>
<div class="didong2_new">
<div class="fabu_new">
<p>重要通知！事关国庆节、中秋节出游！</p>
</div>
<div class="renshu2_new">
<span>123人已阅</span>
<span>2020-08-26</span>
</div>
</div>
</div>
<div class="tuceng2_new">
<img src="./images/图层4.png" ></div>
<div class="didong2_new">
<div class="fabu_new">
<p>音乐课变小型演唱会，带着嗓子就能上！想上课全靠抢。</p>
</div>
<div class="renshu2_new">
<span>123人已阅</span>
<span>2020-08-26</span>
</div>
</div>
</div>
<div class="tuceng2_new">
<img src="./images/图层3.png" ></div>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
</body>
</html>

330
Test.css Normal file
View File

@ -0,0 +1,330 @@
* {
margin: 0rem;
padding: 0em;
list-style: none;
text-decoration: none;
}
.log {
width: 1.64rem;
height: 0.65rem;
background: red;
}
.log-img{
width: 1.64rem;
height: 0.65rem;
margin-left:0.3rem ;
}
.fig{
width: 7.5rem;
height: 4.25rem;
}
.fig-img{
width: 7.5rem;
height: 4.25rem;
}
.Class-star-time{
width: 7.5rem;
margin-top:0.26rem ;
/* background-color: aqua; */
}
.Class-start-time-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #C3975F;
margin-left:0.3rem ;
}
.content{
width: 7.5rem;
/* background-color: aqua; */
}
.web{
width: 7.5rem;
height: 0.5rem;
/* background-color: aqua; */
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0.3rem;
}
.web-p{
font-size: 0.36rem;
font-family: Source Han Sans CN;
font-weight: 500;
color: #11100F;
line-height: 0.54rem;
margin-left: 0.3rem;
}
.web-div{
width: 1.29rem;
height: 0.56rem;
background: #FDEED9;
border-radius: 0.5rem 0rem 0rem 0.5rem;
margin-right: 0rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.web-img{
width: 0.31rem;
height: 0.31rem;
}
.web-span{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.teacher{
width: 7.5rem;
height: 0.5rem;
/* background-color: aqua; */
padding-top: 0.3rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.teacher-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
margin-left: 0.3rem;
}
.teacher-span{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
margin-left: 0.39rem;
}
.money{
/* background-color: aqua; */
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 500;
color: #FD514C;
margin-left: 0.3rem;
padding-top: 0.3rem;
}
.Class-time{
width: 7.5rem;
height: 0.5rem;
/* background-color: aqua; */
display: flex;
justify-content: space-around;
padding-top: 0.3rem;
}
.Duration{
width: 2.24rem;
height: 0.43rem;
background: #FDEED9;
border: 0px solid #FEAE18;
border-radius: 0.22rem;
display: flex;
justify-content: center;
align-items: center;
}
.Duration-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.Time{
width: 2.24rem;
height: 0.43rem;
background: #FDEED9;
border: 0px solid #FEAE18;
border-radius: 0.22rem;
display: flex;
justify-content: center;
align-items: center;
}
.Time-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.state{
width: 2.24rem;
height: 0.43rem;
background: #FDEED9;
border: 0px solid #FEAE18;
border-radius: 0.22rem;
display: flex;
justify-content: center;
align-items: center;
}
.state-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.navigation{
width: 7.5rem;
height: 1rem;
/* background: red; */
border-top: #EDEDED 0.01rem solid;
margin-top: 0.5rem;
display: flex;
justify-content: space-around;
align-items: center;
}
#Course-Introduction{
font-size: 0.3rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FF7A3E;
line-height: 0.28rem;
}
#Audition-list{
font-size: 0.3rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #8F8F8F;
line-height: 0.28rem;
}
.Coursediagram{
width: 7.5rem;
/* justify-content: center; */
}
.Audition-text{
width: 7.5rem;
/* background-color: #C3975F; */
display: none;
}
.Course{
width: 7.5rem;
/* background-color: #FD514C; */
display: flex;
justify-content: center;
}
.Main-image{
width: 7.08rem;
/* height: 64.64rem; */
/* display: none; */
}
.list-One{
width: 7.5rem;
/* background-color: #FD514C; */
display: flex;
justify-content: flex-start;
align-items: center;
margin-top:0.8rem;
}
.One-img{
width: 0.29rem;
height: 0.29rem;
margin-left: 0.3rem;
}
.One-div{
width: 1.05rem;
height: 0.39rem;
background: #41ACFF;
opacity: 0.5;
border-radius: 0.1rem;
margin-left: 0.3rem;
display: flex;
justify-content: center;
align-items: center;
}
.One-span{
font-size: 0.22rem;
font-family: PingFangSC;
font-weight: 400;
color: #FFFFFF;
line-height: 0.7rem;
}
.One-p{
font-size: 0.28rem;
font-family: PingFangSC;
font-weight: 400;
color: #333333;
line-height: 0.7rem;
margin-left: 0.2rem;
}
.list-Two{
width: 7.5rem;
/* background-color: #FD514C; */
display: flex;
justify-content: flex-start;
align-items: center;
margin-top:0.8rem;
}
.Two-img{
width: 0.29rem;
height: 0.29rem;
margin-left: 0.3rem;
}
.Two-p{
font-size: 0.28rem;
font-family: PingFangSC;
font-weight: 400;
color: #333333;
line-height: 0.7rem;
margin-left: 0.2rem;
}
.Bottom-navigation{
width: 7.5rem;
height: 1.28rem;
background: #1C1F21;
display: flex;
flex-direction:column;
margin-top: 0.2rem;
}
.navigation-div{
width: 7.5rem;
/* background-color: #FD514C; */
margin-top: 0.35rem;
display: flex;
justify-content: center;
align-items: center;
}
.navigation-div p{
font-size: 0.2rem;
font-family: PingFang SC;
font-weight: 400;
color: #C8CDD2;
margin-left: 0.35rem;
}
.ICP{
width: 7.5rem;
/* background-color: #FD514C; */
margin-top: 0.35rem;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.15rem;
}
.ICP-p{
font-size: 0.14rem;
font-family: PingFang SC;
font-weight: 400;
color: #949699;
margin-left: 0.3rem;
}

138
Test.html Normal file
View File

@ -0,0 +1,138 @@
<!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>Document</title>
<link href="./Test.css" rel="stylesheet" type="text/css">
<script src="./jquery-3.6.0.min.js"></script>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
</head>
<body>
<a href="../index.html"><img class="log-img" src="./images/log.png"></a>
<div class="fig">
<img class="fig-img" src="./images/Test.png">
</div>
<div class="Class-star-time">
<p class="Class-start-time-p">开课时间：2022-05-22至2022-11-22</p>
</div>
<div class="content">
<div class="web">
<p class="web-p">高级测试工程师</p>
<div class="web-div">
<img class="web-img" src="./images/Play.png">
<span class="web-span">试听</span>
</div>
</div>
<div class="teacher">
<p class="teacher-p">授课老师：张小北</p>
<span class="teacher-span">助教老师：王小样</span>
</div>
<div class="money"></div>
<div class="Class-time">
<div class="Duration">
<P class="Duration-p">课程时长：6个月</P>
</div>
<div class="Time">
<p class="Time-p">上课时间：全天</p>
</div>
<div class="state">
<p class="state-p">当前状态：报名中</p>
</div>
</div>
</div>
<div class="navigation">
<div id="Course-Introduction">课程简介</div>
<div id="Audition-list">试听列表</div>
</div>
<div class="Coursediagram">
<div class="Course">
<img class="Main-image" src="./images/Testcourse.png"/>
</div>
<div class="Audition-text">
<div class="list-One">
<img class="One-img" src="./images/zuoti.png">
<div class="One-div">
<span class="One-span">免费试听</span>
</div>
<p class="One-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
</div>
</div>
<div class="Bottom-navigation">
<div class="navigation-div">
<p>关于我们</p>
<p>学习资源</p>
<p>常见问题</p>
<p>快速导航</p>
</div>
<div class="ICP">
<p class="ICP-p">ICP备案编号：京ICP备18051111号-2 版权所有：码小白训练营</p>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$("#Course-Introduction").click(function(){
$(".Audition-text").hide();
});
$("#Course-Introduction").click(function(){
$(".Main-image").show();
});
});
$("#Course-Introduction").click(function(){
$("#Course-Introduction").css("color","#FF7A3E"),
$("#Audition-list").css("color","#8F8F8F")
})
</script>
<script>
$(document).ready(function(){
$("#Audition-list").click(function(){
$(".Main-image").hide();
});
$("#Audition-list").click(function(){
$(".Audition-text").show();
});
});
$("#Audition-list").click(function(){
$("#Course-Introduction").css("color","#8F8F8F"),
$("#Audition-list").css("color","#FF7A3E")
})
</script>

330
UI.css Normal file
View File

@ -0,0 +1,330 @@
* {
margin: 0rem;
padding: 0em;
list-style: none;
text-decoration: none;
}
.log {
width: 1.64rem;
height: 0.65rem;
background: red;
}
.log-img{
width: 1.64rem;
height: 0.65rem;
margin-left:0.3rem ;
}
.fig{
width: 7.5rem;
height: 4.25rem;
}
.fig-img{
width: 7.5rem;
height: 4.25rem;
}
.Class-star-time{
width: 7.5rem;
margin-top:0.26rem ;
/* background-color: aqua; */
}
.Class-start-time-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #C3975F;
margin-left:0.3rem ;
}
.content{
width: 7.5rem;
/* background-color: aqua; */
}
.web{
width: 7.5rem;
height: 0.5rem;
/* background-color: aqua; */
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0.3rem;
}
.web-p{
font-size: 0.36rem;
font-family: Source Han Sans CN;
font-weight: 500;
color: #11100F;
line-height: 0.54rem;
margin-left: 0.3rem;
}
.web-div{
width: 1.29rem;
height: 0.56rem;
background: #FDEED9;
border-radius: 0.5rem 0rem 0rem 0.5rem;
margin-right: 0rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.web-img{
width: 0.31rem;
height: 0.31rem;
}
.web-span{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.teacher{
width: 7.5rem;
height: 0.5rem;
/* background-color: aqua; */
padding-top: 0.3rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
.teacher-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
margin-left: 0.3rem;
}
.teacher-span{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
margin-left: 0.39rem;
}
.money{
/* background-color: aqua; */
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 500;
color: #FD514C;
margin-left: 0.3rem;
padding-top: 0.3rem;
}
.Class-time{
width: 7.5rem;
height: 0.5rem;
/* background-color: aqua; */
display: flex;
justify-content: space-around;
padding-top: 0.3rem;
}
.Duration{
width: 2.24rem;
height: 0.43rem;
background: #FDEED9;
border: 0px solid #FEAE18;
border-radius: 0.22rem;
display: flex;
justify-content: center;
align-items: center;
}
.Duration-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.Time{
width: 2.24rem;
height: 0.43rem;
background: #FDEED9;
border: 0px solid #FEAE18;
border-radius: 0.22rem;
display: flex;
justify-content: center;
align-items: center;
}
.Time-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.state{
width: 2.24rem;
height: 0.43rem;
background: #FDEED9;
border: 0px solid #FEAE18;
border-radius: 0.22rem;
display: flex;
justify-content: center;
align-items: center;
}
.state-p{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FEAE18;
}
.navigation{
width: 7.5rem;
height: 1rem;
/* background: red; */
border-top: #EDEDED 0.01rem solid;
margin-top: 0.5rem;
display: flex;
justify-content: space-around;
align-items: center;
}
#Course-Introduction{
font-size: 0.3rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FF7A3E;
line-height: 0.28rem;
}
#Audition-list{
font-size: 0.3rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #8F8F8F;
line-height: 0.28rem;
}
.Coursediagram{
width: 7.5rem;
/* justify-content: center; */
}
.Audition-text{
width: 7.5rem;
/* background-color: #C3975F; */
display: none;
}
.Course{
width: 7.5rem;
/* background-color: #FD514C; */
display: flex;
justify-content: center;
}
.Main-image{
width: 7.08rem;
/* height: 64.64rem; */
/* display: none; */
}
.list-One{
width: 7.5rem;
/* background-color: #FD514C; */
display: flex;
justify-content: flex-start;
align-items: center;
margin-top:0.8rem;
}
.One-img{
width: 0.29rem;
height: 0.29rem;
margin-left: 0.3rem;
}
.One-div{
width: 1.05rem;
height: 0.39rem;
background: #41ACFF;
opacity: 0.5;
border-radius: 0.1rem;
margin-left: 0.3rem;
display: flex;
justify-content: center;
align-items: center;
}
.One-span{
font-size: 0.22rem;
font-family: PingFangSC;
font-weight: 400;
color: #FFFFFF;
line-height: 0.7rem;
}
.One-p{
font-size: 0.28rem;
font-family: PingFangSC;
font-weight: 400;
color: #333333;
line-height: 0.7rem;
margin-left: 0.2rem;
}
.list-Two{
width: 7.5rem;
/* background-color: #FD514C; */
display: flex;
justify-content: flex-start;
align-items: center;
margin-top:0.8rem;
}
.Two-img{
width: 0.29rem;
height: 0.29rem;
margin-left: 0.3rem;
}
.Two-p{
font-size: 0.28rem;
font-family: PingFangSC;
font-weight: 400;
color: #333333;
line-height: 0.7rem;
margin-left: 0.2rem;
}
.Bottom-navigation{
width: 7.5rem;
height: 1.28rem;
background: #1C1F21;
display: flex;
flex-direction:column;
margin-top: 0.2rem;
}
.navigation-div{
width: 7.5rem;
/* background-color: #FD514C; */
margin-top: 0.35rem;
display: flex;
justify-content: center;
align-items: center;
}
.navigation-div p{
font-size: 0.2rem;
font-family: PingFang SC;
font-weight: 400;
color: #C8CDD2;
margin-left: 0.35rem;
}
.ICP{
width: 7.5rem;
/* background-color: #FD514C; */
margin-top: 0.35rem;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.15rem;
}
.ICP-p{
font-size: 0.14rem;
font-family: PingFang SC;
font-weight: 400;
color: #949699;
margin-left: 0.3rem;
}

138
UI.html Normal file
View File

@ -0,0 +1,138 @@
<!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>Document</title>
<link href="./UI.css" rel="stylesheet" type="text/css">
<script src="./jquery-3.6.0.min.js"></script>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
</head>
<body>
<a href="../index.html"><img class="log-img" src="./images/log.png"></a>
<div class="fig">
<img class="fig-img" src="./images/ui.png">
</div>
<div class="Class-star-time">
<p class="Class-start-time-p">开课时间：2022-05-22至2022-11-22</p>
</div>
<div class="content">
<div class="web">
<p class="web-p">UI/UE设计工程师</p>
<div class="web-div">
<img class="web-img" src="./images/Play.png">
<span class="web-span">试听</span>
</div>
</div>
<div class="teacher">
<p class="teacher-p">授课老师：张小北</p>
<span class="teacher-span">助教老师：王小样</span>
</div>
<div class="money"></div>
<div class="Class-time">
<div class="Duration">
<P class="Duration-p">课程时长：6个月</P>
</div>
<div class="Time">
<p class="Time-p">上课时间：全天</p>
</div>
<div class="state">
<p class="state-p">当前状态：报名中</p>
</div>
</div>
</div>
<div class="navigation">
<div id="Course-Introduction">课程简介</div>
<div id="Audition-list">试听列表</div>
</div>
<div class="Coursediagram">
<div class="Course">
<img class="Main-image" src="./images/uicourse.png"/>
</div>
<div class="Audition-text">
<div class="list-One">
<img class="One-img" src="./images/zuoti.png">
<div class="One-div">
<span class="One-span">免费试听</span>
</div>
<p class="One-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
<div class="list-Two">
<img class="Two-img" src="./images/zuoti.png">
<p class="Two-p">01 标题内容标题内容标题内容</p>
</div>
</div>
</div>
<div class="Bottom-navigation">
<div class="navigation-div">
<p>关于我们</p>
<p>学习资源</p>
<p>常见问题</p>
<p>快速导航</p>
</div>
<div class="ICP">
<p class="ICP-p">ICP备案编号：京ICP备18051111号-2 版权所有：码小白训练营</p>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$("#Course-Introduction").click(function(){
$(".Audition-text").hide();
});
$("#Course-Introduction").click(function(){
$(".Main-image").show();
});
});
$("#Course-Introduction").click(function(){
$("#Course-Introduction").css("color","#FF7A3E"),
$("#Audition-list").css("color","#8F8F8F")
})
</script>
<script>
$(document).ready(function(){
$("#Audition-list").click(function(){
$(".Main-image").hide();
});
$("#Audition-list").click(function(){
$(".Audition-text").show();
});
});
$("#Audition-list").click(function(){
$("#Course-Introduction").css("color","#8F8F8F"),
$("#Audition-list").css("color","#FF7A3E")
})
</script>

133
css01.css Normal file
View File

@ -0,0 +1,133 @@
*{
margin: 0;
padding: 0;
}
a {
background-color: transparent;
text-decoration: none;
color: #333333;
}
.wrap{
width: 7.5rem;
height: auto;
}
.logo_top{
width: 1.64rem;
height: 0.65rem;
/* margin-top: 0; */
margin-left: 0.3rem;
}
.top{
width: 7.5rem;
height: 0.82rem;
background-color: #F6F6F6;
display: flex;
align-items: center;
word-break:keep-all;
overflow: auto;
}
.top::-webkit-scrollbar{
display:none
}
.top>div{
width: 1.29rem;
height: 0.31rem;
font-size: 0.32rem;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 0.38rem;
margin-left: 0.4rem;
}
.top>div>a>span{
font-family: PingFang SC;
font-weight: 500;
color: #255DF2;
}
.banner{
display: flex;
justify-content: center;
align-items: center;
}
.banner_web02{
width: 6.84rem;
height: 1.4rem;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.27rem;
background-image:url(./images/banner.png);
background-size: 6.84rem 1.4rem;
}
.banner>.banner_web02>p{
font-size: 0.34rem;
font-family: PingFang SC;
font-weight: 600;
color: #FFFFFF;
text-shadow: 0rem 0rem 0.13rem rgba(0,0,0,0.5000);
}
.main{
margin-top: 0.24rem;
margin-left: 0.18rem;
display: flex;
flex-wrap: wrap;
}
.main_zt{
width: 2.2rem;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 0.1rem;
margin-top: 0.23rem;
/* align-items: center; */
}
.main_zt>img{
width: 2.21rem;
height: 2.85rem;
}
.main_p{
display: flex;
flex-direction: column;
align-items: center;
}
.main_p1{
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
line-height: 0.3rem;
}
.main_p3{
font-size: 0.24rem;
color: #F55F60;
}
.foot{
margin-top: 0.4rem;
width: 7.50rem;
height: 1.28rem;
background-color: #1C1F21;
}
.foot_p1{
display: flex;
margin-left: 1.66rem;
margin-right: 1.66rem;
padding-top: 0.35rem;
justify-content: space-around;
}
.foot_p1>p{
font-size: 0.2rem;
font-family: PingFang SC;
font-weight: 400;
color: #C8CDD2;
}
.foot_p2{
font-size: 0.1rem;
font-family: PingFang SC;
font-weight: 400;
color: #949699;
margin-top: 0.19rem;
display: flex;
justify-content: center;
}

BIN
images/Bigdata.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 404 KiB

BIN
images/Course.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
images/Coursediagram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
images/Play.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
images/Test.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 349 KiB

BIN
images/Testcourse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
images/back-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 250 KiB

BIN
images/back-image2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 KiB

BIN
images/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

BIN
images/ditu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
images/fig.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 495 KiB

BIN
images/he1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 B

BIN
images/he1@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
images/he2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
images/he2@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
images/he3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
images/he3@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
images/he4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
images/he4@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
images/he5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
images/he5@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
images/he6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/he6@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
images/he7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
images/he7@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
images/he8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
images/he8@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
images/he9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/he9@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
images/img01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/img02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
images/img03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/img04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/img05.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
images/img06.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/img07.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
images/img08.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
images/img09.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
images/img10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
images/img11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/img12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
images/img13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/img14.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
images/img15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
images/java.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
images/javacourse.png.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 668 KiB

BIN
images/lang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
images/log.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
images/logo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
images/logo1@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
images/lun1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
images/lun@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 664 KiB

BIN
images/qi1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
images/qi1@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
images/tu1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
images/tu1@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
images/tu2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
images/tu2@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
images/tu3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
images/tu3@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
images/tu4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/tu4@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
images/tu5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
images/tu5@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
images/ui.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 293 KiB

BIN
images/uicourse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 857 KiB

BIN
images/x1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 294 B

BIN
images/x1@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
images/x2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 313 B

BIN
images/x2@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
images/x3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 B

BIN
images/x3@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
images/x4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 B

BIN
images/x4@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
images/xiaobai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
images/y1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
images/y10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
images/y10@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
images/y11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
images/y11@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
images/y12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
images/y12@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
images/y13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
images/y13@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 KiB

BIN
images/y14.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
images/y14@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 KiB

BIN
images/y15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

Some files were not shown because too many files have changed in this diff Show More