1.登陆页
1.1代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
重庆城市科技学院综合教务管理系统-强智科技</title>
<style>
*{
border: 0;
}
.box{
display: grid;
height: 800px;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(8,1fr);
}
.logo{
margin-top: 30px;
}
.div1{
grid-column: 1/5;
}
.div2{
grid-column: 3/5;
}
.div3,.div4,.div5,.div6{
grid-row: 3/7;
background-color: rgb(231, 231, 231);
}
.div4>img{
margin-top: 50px;
}
.div5>div{
padding: 30px;
}
.yhdl{
font-size: 25px;
}
#username,#password{
width: 230px;
height: 30px;
}
.username{
margin-top: 40px;
}
.username,.password{
margin-top: 20px;
}
.butt{
margin-left: 150px;
}
.sub{
background: url(./go.png);
width: 70px;
height: 68px;
border: 0;
}
.wen{
background: url(./wen.png);
width: 70px;
height: 68px;
border: 0;
margin-left: 10px;
}
.zhaohui,.yinsi{
color: gray;
}
.yinsi{
margin-left: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div></div>
<div class="logo">
<img src="./ck.png" alt="" width="500px">
</div>
<div class="div2"></div>
<div class="div3"> </div>
<div class="div4"><img src="./dlu.png" alt="" width="500px"></div>
<div class="div5"><div><p class="yhdl">用户登录</p>
<div class="username"> 用户名：<input type="text" name="" id="username"><br></div>
<div class="password">密码: <input type="password" name="" id="password"></div>
</div>
<div class="butt"><a href="#"><button type="submit" class="sub"></button></a>
<a href="#"><button type="button" class="wen"></button></a>
</div>
</div>
<div class="div6"></div>
<div></div>
<div class="zhaohui"><p>湖南强智科技发展有限公司 版权所有 <a href="#">找回密码</a></p></div>
<div class="yinsi"><p>隐私声明|设为首页</p></div>
</div>
</body>
</html>
1.2运行结果
2.学生个人中心
2.1代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生个人中心</title>
<style>
*{
margin: 0;
padding: 0;
}
.img1{
width: 180px;
height: 115px;
}
li{
height: 30px;
list-style: none;
display: inline-block;
color: white;
font-size: 15px;
font-weight: 800;
margin:10px ;
margin-left: 30px;
}
.nav{
width: 100%;
height: 40px;
background-color:rgb(79, 79, 240);
}
.shouye,.head{
margin-left: 20%;
}
.head,.yhc,.yhc>p,.yhcimg{
display: inline-block;
}
.yhc{
width: 500px;
height: 40px;
}
.yhcimg>img{
width: 250px;
height: 30px;
margin-left: 160px;
}
.yhc>p,.yhcimg{
position: fixed;
top:0;
}
.box{
display: grid;
grid-template-columns: 185px 185px 185px 185px 185px 185px 185px 185px 185px 185px ;
grid-template-rows:120px 120px 120px 120px ;
margin-top: 20px;
height: 480px;
}
.box>*{
margin: 5px;
margin-left: -100px;
}
.div1{
grid-column: 1/3;
grid-row: 1/5;
width: 300px;
}
.div6{
grid-column: 9/11;
grid-row: 1/5;
}
.div2{
grid-column: 3/5;
grid-row: 1/3;
}
.div3{
grid-row: 1/3;
}
.div5,.div8{
grid-column: 7/9;
}
.div15{
grid-column: 3/9;
text-align: center;
color: gray;
padding: 5px;
}
</style>
</head>
<body>
<div class="head"><img src="./ck.png" alt=""></div>
<div class="yhc">
<p>袁海川(2111030701)</p>
<div class="yhcimg"><img src="./yhc.png" alt=""></div>
</div>
<div class="nav">
<li class="shouye">首页</li>
<li>我的桌面</li>
<li>学籍成绩</li>
<li>培养管理</li>
<li>考试报名</li>
<li>实践环节</li>
<li>教学评价</li>
</div>
<div class="box">
<div class="div1" ></div>
<div class="div2"><img src="./grxx.png" alt="" width="360px" height="230px"></div>
<div class="div3"><img src="./xkzx.png" alt="" width="175px" height="230px"></div>
<div class="div4"><img src="./xspj.png" alt="" class="img1"></div>
<div class="div5"><img src="./ysly.png" alt="" width="360px" height="115px"></div>
<div class="div6"></div>
<div class="div7"><img src="./pyfa.png" alt="" class="img1"></div>
<div class="div8"><img src="./ysgg.png" alt="" width="360px" height="115px"></div>
<div class="div9"><img src="./xggrxx.png" alt="" class="img1"></div>
<div class="div10"><img src="./kccjcx.png" alt="" class="img1"></div>
<div class="div11"><img src="./cxbmxk.png" alt="" class="img1"></div>
<div class="div12"><img src="./whdxfcjcx.png" alt="" class="img1"></div>
<div class="div13"><img src="./xjkp.png" alt="" class="img1"></div>
<div class="div14"><img src="./shksbm.png" alt="" class="img1"></div>
<div class="div15">
<hr>
<p>Copyright (C) 湖南强智科技发展有限公司 All Rights Reserved 湘ICP 备12010071号</p>
</div>
</div>
</body>
</html>
2.2运行结果
3.学校官网首页
3.1代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>重庆城市科技学院-首页</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 80%;
height: 100px;
margin: auto;
}
.tou{
margin-top: 15px;
}
.shouye{
display: inline-block;
width: 60px;
}
.daima{
display: inline-block;
position: fixed;
top:20px;
right: 200px;
font-size: 20px;
}
li{
height: 30px;
list-style: none;
display: inline-block;
color: black;
font-size: 15px;
font-weight: 400;
margin:5px ;
margin-left: 25px;
}
.main{
margin: auto;
margin-top: 50px;
width: 90%;
height: 700px;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(7,1fr);
}
.main>*{
margin-left: 5px;
}
.div1,.div3{
grid-row: 2/4;
}
.div2{
grid-column: 2/4;
grid-row: 1/6;
}
.inthe,.news,.dongtai{
font-size: 20px;
color: gray;
}
.inthe>p,.dongtai>p{
margin-top: 70px;
}
.news{
margin-top: 20px;
}
.wenzi{
font-size: 20px;
margin-top: 20px;
border-bottom: 0.5px solid gray;
}
.div4{
grid-column: 2/4;
grid-row: 6/8;
text-align: center;
border-left: 0.5px solid gray;
border-right: 0.5px solid gray;
}
.biaoti{
margin-top: 60px;
}
.foot{
color: gray;
width: 80%;
margin: auto;
text-indent: 50px;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="nav">
<div class="tou">
<img src="./cqcskjxy.png" alt="">
<span><b> |</b></span>
<li class="shouye">首页</li>
<li>学校概况</li>
<li>院系设置</li>
<li>机构部门</li>
<li>师资队伍</li>
<li>招生就业</li>
<li>教育教学</li>
<li>党建之窗</li>
<li>走进城科</li>
<li>快捷通道</li>
</div>
<div class="daima"><span>教育部代码：12616</span></div>
</div>
<div class="main">
<div class="inthe"><p>媒体城科 IN THE MEDIA</p></div>
<div class="div1"><img src="./mt.jpg" alt="" width="360px" height="200px"></div>
<div class="div2">
<div class="news"><p>学校要闻 SCHOOLNEWS</p></div>
<div><img src="./lqb.jpg" alt="" width="760px" height="445px"></div>
</div>
<div class="div3"><img src="./hz.jpg" alt="" width="340px" height="200px"></div>
<div class="dongtai"><p>校园动态
CAMPUS DYNAMIC</p></div>
<div class="wenzi">【永川区融媒体中心 】创新宣讲新模式，志愿服务暖童心</div>
<div class="wenzi">艺术与传媒学院与四川外国语大学新闻传播学院、重庆佳左影视文化传媒有...</div>
<div class="wenzi">【永川区融媒体中心 】公益在行动重庆城市科技学院体育大健康学院</div>
<div class="wenzi">2024年度结项评审会在重庆城科顺利举行</div>
<div class="wenzi">【未来网】公益在行动|重庆城市科技学院:走进乡村 开展“健康护航 义...</div>
<div class="div4">
<div class="biaoti">
<h2>重庆城科学子在第十五届“蓝桥杯”大赛个人国赛...</h2></div>
<div class="foot"> <p>6月1日，第十五届“蓝桥杯”大赛个人国赛(电子类)在重庆邮电大学拉开序幕。电气工程与智能制造学院共2名学子参加本次比赛，经过…</p>
</div>
</div>
<div class="wenzi">艺术与传媒学院在第三届“智慧杯”文体竞赛荣获佳绩</div>
<div class="wenzi">【人民日报】公益在行动|重庆城市科技学院:走进乡村 开展“健康护航 ….</div>
<div class="wenzi">马克思主义学院与重庆市南川区太平场镇河沙村村民委员会校地合作签约暨.</div>
</div>
</body>
</html>
3.2运行结果
扫一扫
1182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
