文章目录
前言
写了一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> 学成教育自成立以来，秉承“以教育推动社会进步”的使命，
以“德聚最优秀人才、仁就基业长青的教育机构”为愿景，践行“诚信为根、质量为本、知难而进、
开拓创新”的核心价值观，始终以学员的需求为核心，用“好老师
、好课程、好学生”的...</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;
}