学成在线网(html源码)

编程入门行业动态更新时间:2024-10-05 19:17:00

学成<a href=https://www.elefans.com/category/jswz/34/1770935.html style= 在线网(html源码)"/>

学成在线网(html源码)

文章目录

前言
一、图片
二、html
2、CSS
3、所需的材料和源码

前言

写了一html静态网页，目前只写了一个首页

提示：以下是本篇文章正文内容，下面案例可供参考

一、图片

二、html

<!DOCTYPE html>
<html lang="zh-cn"><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>
</head>
<link rel="stylesheet" href="style.css"><body><!-- 头部模块 --><div class="header"><span>HI!欢迎来到学成网</span><div class="headright"><div class="headnav"><ul><li><a href="#">登录/注册</a></li><li><a href="#">个人中心</a></li></ul></div><div class="search"><img src="images/search.png" alt=""><a href="#">搜索</a></div></div></div><!-- banner部分 --><div class="banner"><div class="w"><div class="logo"></div><div class="nav"><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><li><a href="#">加盟信息</a></li><li><a href="#">上岸学院展示</a></li><li><a href="#">关于我们</a></li></ul></div></div></div><!-- 界面部分 --><div class="main"><img src="images/main.jpg" alt="main"></div><!-- 课程部分 --><div class="course"><div class="coursere w"><h2>课程推荐</h2><p>course recommend</p></div><div class="courseimg w clearfix"><ul><li><a href="#"><img src="images/course.jpg"></a><h2>2022市考公务员考试VIP致胜课程1区</h2><p>已播放44次</p></li><li><a href="#"><img src="images/course.jpg"></a><h2>2022市考公务员考试VIP致胜课程1区</h2><p>已播放44次</p></li><li><a href="#"><img src="images/course.jpg"></a><h2>2022市考公务员考试VIP致胜课程1区</h2><p>已播放44次</p></li><li><a href="#"><img src="images/course.jpg"></a><h2>2022市考公务员考试VIP致胜课程1区</h2><p>已播放44次</p></li></ul></div><a href="#" class="more">查看更多视频</a></div><!-- 老师部分 --><div class="teacher"><div class="coursere w"><h2>名师团队</h2><p>Teacher Team</p></div><div class="teachers w  clearfix"><ul><li><a href="#"><img src="images/teacher.png" alt=""><h2>李老师</h2><h3>行测+申论+面试</h3><p>罗婷老师拥有丰富教学经验，已经教学公务员近10年...</p></a></li><li><a href="#"><img src="images/teacher.png" alt=""><h2>李老师</h2><h3>行测+申论+面试</h3><p>罗婷老师拥有丰富教学经验，已经教学公务员近10年...</p></a></li><li><a href="#"><img src="images/teacher.png" alt=""><h2>李老师</h2><h3>行测+申论+面试</h3><p>罗婷老师拥有丰富教学经验，已经教学公务员近10年...</p></a></li><li><a href="#"><img src="images/teacher.png" alt=""><h2>李老师</h2><h3>行测+申论+面试</h3><p>罗婷老师拥有丰富教学经验，已经教学公务员近10年...</p></a></li></ul></div></div><!-- 咨询部分 --><div class="zixun w clearfix"><div class="coursere w"><h2>咨询公告</h2><p>information</p></div><div class="zixunimg w clearfix"><ul><li><a href="#"><img src="images/zixun.png"><h2>火灾接连不断，防火体系究竟出了什么问题？</h2><p>2021-06-27</p></a></li><li><a href="#"><img src="images/zixun.png"><h2>火灾接连不断，防火体系究竟出了什么问题？</h2><p>2021-06-27</p></a></li><li><a href="#"><img src="images/zixun.png"><h2>火灾接连不断，防火体系究竟出了什么问题？</h2><p>2021-06-27</p></a></li></ul></div></div><!-- 核心理念 --><div class="footer w clearfix"><div class="bg clearfix"><div class="coursere w"><h2>核心理念</h2><p>CORE IDEA</p></div><div class="txtbox"><div class="txt"><p>&nbsp; &nbsp; &nbsp; 学成教育自成立以来，秉承“以教育推动社会进步”的使命，以“德聚最优秀人才、仁就基业长青的教育机构”为愿景，践行“诚信为根、质量为本、知难而进、开拓创新”的核心价值观，始终以学员的需求为核心，用“好老师&nbsp;、好课程、好学生”的...</span></span></strong></p><img src="images/picture.jpg" alt="picture"></div></div></div></div><div class="bottom"><div class="bottom1"><div class="leftbottom"><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><li><a href="#">上岸学员信息</a></li><li><a href="#">关于我们</a></li></ul><p>Copyright © 2018-2023 学成网 <a target="_blank" href="#">浙ICP备17003567号-1 </a></p><p>友情链接</p></div><div class="rightbottom"><div class="leftbox"><p>电话：</p><p>地址：</p><p>邮箱：</p></div><div class="rightbox"><ul><li><img src="images/weixin.png" alt="weixin"></li><li><img src="images/weibo.png" alt="weibo"></li></ul></div></div></div></div>
</body></html>

2、CSS

*{margin: 0;padding: 0;
}
li{list-style: none;
}
a{text-decoration: none;
}
.clearfix:before,.clearfix:after {content:"";display:table; }.clearfix:after {clear:both;}.clearfix {*zoom:1;}   
.w{width: 1200px;margin: 0 auto;
}
.header{height: 40px;margin: 20px auto;background-color: orange;
}
.header span{color: #fff;font-size: 16px;line-height: 40px;
}
.headright{float: right;width: 280px; height: 30px;font-size: 12px;color: #fff;
}.headnav ul li a{float: left;display: block;height: 20px;font-size: 12px;color: #fff;border-right: 1px solid #fff;padding: 0 20px;line-height: 20px;margin-top: 5px;
}
.headright .search{float: left; height: 20px;display: block;line-height: 20px;padding-left: 20px;margin-top: 5px;
}
.headright .search a{font-size: 12px;color: #fff;
}
.banner{height: 80px;background-color:#fff;padding: 6px 0;
}
.banner .logo{float: left;width: 82px;height: 68px;background-image: url(images/logo.png);
}
.nav{float: left;margin-left: 150px;
}
.nav ul li{float: left;margin: 0 15px;
}
.nav ul li a{display: block;height: 80px;padding: 0 10px;line-height: 80px;font-size: 16px;color: #050505;  
}
.nav ul li a:hover{background-color: orange;color: #fff;
}
.main{height: 360px;margin-bottom: 62px;
}
.main img{height: 100%;width: 100%;background-repeat: no-repeat;
}
.course{height: 460px;background-color: #fff;
}
.coursere{height: 68px;background: url(images/title_bg.png);background-repeat: no-repeat;background-position: center;
}
.coursere h2{font-size: 34px;color: #000000;margin-bottom:4px ;text-align: center;
}
.coursere p{height: 20px;color: #999999;font-size: 14px;text-align: center;
}
.courseimg ul li{float: left;width: 280px;height: 300px;margin-right: 20px;background-color: #fff;margin-top: 44px;box-shadow: 0 2px 3px 3px rgb(0 0 0 / 10%);
} 
.courseimg ul li img{float: left;display: block;width: 280px;height: 200px;margin-bottom: 10px;
}
.courseimg ul li h2{font-size: 18px;font-weight: 400;color: #333333;}
.courseimg ul li p{font-size: 14px;color: #999999;
}
.course .more{display: block;color: orange;border: 2px solid orange;font-size: 16px;width: 210px;height: 40px;line-height: 40px;margin: 20px auto 40px;padding: 1px;text-align: center;border-radius: 5px;
}
.teacher{height: 542px;margin-top: 44px;
}
.teacher .coursere{margin-bottom:  40px;
}
.teacher .coursere h2{font-size: 34px;color: #000000;margin-bottom:4px ;text-align: center;
}
.teacher .coursere p{height: 20px;color: #999999;font-size: 14px;text-align: center;
}
.teachers ul li{float: left;box-shadow: 0 2px 3px 3px rgb(0 0 0 / 10%);margin-right: 20px;
}
.teachers ul li  a{float: left; display: block;width: 270px;height: 410px;background-color: #fff;
}
.teachers ul li h2{color: #fe9630;font-size: 24px;margin: 0 0 10px;
}
.teachers ul li h3{font-size: 18px;color: #333333;
}
.teachers ul li p{
font-size: 14px;
color: #999;
}
.zixun{height: 470px;margin-top: 44px;background-color:#fff;
}
.zixun .coursere{margin-bottom:  40px;
}
.zixunimg ul li{float: left;margin-left: 10px;box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
}.zixunimg ul li a{float: left;display: block;width: 384px;height: 330px;background-color: #fff;
}
.zixunimg ul li a:hover{background-color: #fe9630;
}
.zixunimg ul li a img{width: 384px;height: 220px;
}
.zixunimg ul li a h2{font-size: 20px;color: #333333;font-weight: 700;margin-top: 10px;
}
.zixunimg ul li a p{font-size: 16px;color: #999;margin-left: 10px;
}
.footer{margin-top: 20px;margin-bottom: 44px;
}
.footer .bg{   width: 100%;height: 305px;  background: url(images/footerback.png);box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
}
.footer .bg .coursere{margin-bottom:  40px;
}
.footer  .bg .coursere h2{font-size: 34px;margin-bottom:4px ;text-align: center;color: #fff;}
.footer .bg .coursere p{height: 14px;color: #fff;font-size: 14px;text-align: center;
}
.footer .bg .txtbox{width: 1200px;height: 426px;}
.footer .bg .txtbox .txt{width: 1108px;height: 254px;border-radius: 5px;padding: 20px 0 ;background-color: #fff;box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);margin: 0 auto;
}
.footer .bg .txtbox .txt p{float: left;width: 742px;height: 105px;font-size: 20px;color: #666;margin-top: 20px;margin-right: 34px;
}
.footer .bg .txtbox .txt img{float: left;width: 280px;height: 214px;
}
.bottom{height: 150px;margin-top: 200px;background-color: #363636;padding-top: 30px;padding-bottom: 30px;
}
.bottom1{height: 132px;margin: 0 20px;
}
.bottom .bottom1 .leftbottom{float: left;
}
.bottom .bottom1 .leftbottom ul{float: left;margin-bottom: 24px;
}
.bottom .bottom1 .leftbottom ul li {float: left;margin-right: 40px;
}
.bottom .bottom1 .leftbottom ul li a{float: left;font-size: 12px;color: #fff;
}
.bottom .bottom1 .leftbottom p{font-size: 12px;margin: 10px 0;color: #ffffff80;
}
.bottom .bottom1 .leftbottom p a{color: #ffffff;font-weight: 700;
}
.bottom .bottom1 .rightbottom{float: right;height: 88px;width: 379px;padding-left: 22px;border-left: 1px;border-left: 1px solid #fff ;
}
.bottom .bottom1 .rightbottom .leftbox{float: left;width: 50px;text-align: right;padding-right: 40px;
}
.bottom .bottom1 .rightbottom .leftbox p{width: 50px;font-size: 12px;color: #fff;margin-bottom: 10px;
}
.bottom .bottom1 .rightbottom .rightbox {float: right;width: 120px;line-height: 88px;
}
.bottom .bottom1 .rightbottom .rightbox ul li{/* float: right; */display: inline-block;width: 43px;height: 88px;margin-right: 10px;}