<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>某某在线教育平台</title>
<link rel="stylesheet" href="">
<!-- CSS代码 -->
<style type="text/css" media="screen">
/*浏览器对所有的标签都有一个默认的内边距和外边距*/
*{margin: 0;padding: 0;}
/*第一屏开始*/
/*拿到盒子第一件事先写宽高*/
.banner{
/*宽*/
width: 100%;
/*高 PX代表像素*/
height: 700px;
/*背景图片*/
background-image: url("images/banner-qzns.jpg");
}
/*margin: 0 auto; 外边距上下为0左右自适应*/
.url-title{
width: 60%;
height: 80px;
margin: 0 auto;
}
.logo{
height: 50px;
/*上外边距*/
margin-top: 30px;
}
.title-style{
/*去除ul黑点*/
list-style: none;
float: right;
margin-top: 50px;
}
.title-style li{
/*左浮动*/
float: left;
/*文字颜色*/
color: #fff;
margin-left: 50px;
}
/*第一屏结束*/
.project-service{
width: 100%;
height: 780px;
/*内容溢出*/
overflow: hidden;
}
.ps-content{
width: 60%;
height: 680px;
margin: 0 auto;
margin-top: 50px;
/*margin-top 自己没变父元素变了，在父元素加如下代码*/
overflow: hidden;
}
.ps-content h1{
color: #595959;
/*居中对齐*/
text-align: center;
/*字体*/
font-family: "宋体";
/*文字大小*/
font-size: 50px;
margin-top: 40px;
}
.ps-content h5{
text-align: center;
color: #595959;
font-family: "宋体";
font-size: 23px;
}
.pslco{
width: 33.33333%;
height: 397px;
text-align: center;
float: left;
margin-top: 80px;
}
.pslco h2{
color: #595959;
font-size: 25px;
margin-top: 10px;
}
.pslco h4{
color: #989898;
margin-top: 12px;
}
.pslco hr{
width: 70%;
margin: 20px auto;
}
.pslco p{
width: 80%;
margin: 0 auto;
}
.learn-more{
width: 100%;
height: 120px;
text-align: center;
/*行高 如何和高度一致，则上下居中*/
line-height: 80px;
font-size: 20px;
color: #1da193;
}
.border-style{
/*设置div下边线 : 1像素 实线 颜色;*/
border-bottom: 1px solid #f6f6f6;
}
/*第二屏结束*/
.news-img{
width: 90%;
height: 200px;
}
.news-title{
width: 90%;
margin: 15px auto;
text-align: left;
}
.news-title span{
float: right;
color: #a498a4;
}
/*第四屏的开始*/
.about{
width: 100%;
height: 920px;
overflow: hidden;
background-image: url("images/bg-about.jpg");
}
.about-content{
width: 35%;
height: 800px;
margin: 60px auto;
}
.about-content-title{
width: 100%;
height: 100px;
}
.about-content-title h1{
text-align: center;
color: #fff;
font-family: '宋体';
}
.about-content-title h3{
text-align: center;
color: #fff;
margin-top: 15px;
font-family: '宋体';
}
.about-content-introduce{
width: 100%;
height: 200px;
}
.about-content-introduce p{
text-align: center;
color: #fff;
font-size: 20px;
line-height: 35px;
}
.about-line{
width: 60px;
height: 30px;
margin: 0 auto;
border-bottom: 1px solid #ffffff;
}
.about-content-video{
width: 100%;
height: 350px;
background-image: url("images/xinwen.jpg");
/*图片上下拉伸填充 上下100% 左右100%*/
background-size: 100% 100%;
text-align: center;
}
.about-content-video img{
margin-top: 125px;
}
.about-content-learnmore{
width: 100%;
height: 150px;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 150px;
}
/*第五屏开始*/
.partner{
width: 100%;
height: 400px;
overflow: hidden;
}
.partner-con{
width: 60%;
height: 250px;
margin: 75px auto;
}
.partner-con-title{
width: 100%;
height: 100px;
}
.partner-con-title h1{
text-align: center;
color: #000;
font-family: '宋体';
}
.partner-con-title h3{
text-align: center;
color: #000;
margin-top: 15px;
font-family: '宋体';
}
.partner-con-img{
width: 100%;
height: 200px;
overflow: hidden;
}
.partner-con-img ul{
list-style: none;
margin-top: 50px;
}
.partner-con-img ul li{
width: 14.66%;
height: 100px;
float: left;
margin-right: 2%;
}
/*第六屏*/
.connect{
width: 100%;
height: 150px;
overflow: hidden;
background-color: #f6f6f6;
}
.connect-con{
width: 50%;
height: 75px;
margin: 25px auto;
}
.connect-con-frends{
width: 100%;
height: 45px;
}
.connect-con-frends p{
font-size: 13px;
line-height: 30px;
}
.connect-con-edition{
margin-top: 30px;
font-size: 15px;
}
</style>
</head>
<body>
<!-- 第一屏开始 div默认是透明的-->
<div class="banner">
<!-- 标题 -->
<div class="url-title">
<!-- 左边的图 -->
<img class="logo" src="images/logo.png"/>
<ul class="title-style">
<li>首页</li>
<li>产品服务</li>
<li>新闻动态</li>
<li>关于我们</li>
<li>投资伙伴</li>
<li>加入我们</li>
</ul>
</div>
</div>
<!-- 第一屏结束 -->
<!-- 第二屏开始 -->
<div class="project-service border-style">
<div class="ps-content">
<h1>产品服务</h1>
<h5>PRODUCTS SERVICE</h5>
<div class="pslco">
<img src="images/psIco-01.png" alt="">
<h2>后台模板</h2>
<h4>优秀灵活的后台框架源码</h4>
<hr>
<p>十年最基础的前端开发经验，让最简单的知识变得细腻，让最基础的标签显得灵动</p>
</div>
<div class="pslco">
<img src="images/psIco-02.png" alt="">
<h2>编码</h2>
<h4>DIV + CSS</h4>
<hr>
<p>写好每一行代码，做好每张设计图的解析，结构最理想的布局思路。</p>
</div>
<div class="pslco">
<img src="images/psIco-03.png" alt="">
<h2>高效标签</h2>
<h4>标签</h4>
<hr>
<p>支持HTML5最新的标签。</p>
</div>
<!-- #1da193 -->
<div class="learn-more">了解更多></div>
</div>
</div>
<!-- 第二屏结束 -->
<!-- 第三屏开始 -->
<div class="project-service" style="height:780px;">
<div class="ps-content" style="height:680px;">
<h1>新闻动态</h1>
<h5>News</h5>
<div class="pslco">
<img class="news-img" src="images/xinwen1.png"/>
<div class="news-title">
基于layui搜索下拉框插件
<span>04-24</span>
</div>
<hr style="width:90%;background-color:#ededed;height:1px;border:none;margin-top:45px;">
<div class="news-title">
商品销售订单管理后台模板
<span>04-24</span>
</div>
<div class="news-title">
黑白系商品分类管理后台模板
<span>04-24</span>
</div>
</div>
<div class="pslco">
<img class="news-img" src="images/xinwen2.png"/>
<div class="news-title">
移动端电商网站模板
<span>04-24</span>
</div>
<hr style="width:90%;background-color:#ededed;height:1px;border:none;margin-top:45px;">
<div class="news-title">
企业商品分类添加后台管理页面模板
<span>04-24</span>
</div>
<div class="news-title">
代理商后台商品管理页面ui模板
<span>04-24</span>
</div>
</div>
<div class="pslco">
<img class="news-img" src="images/xinwen3.png"/>
<div class="news-title">
三级菜单后台系统ui框架模板
<span>04-24</span>
</div>
<hr style="width:90%;background-color:#ededed;height:1px;border:none;margin-top:45px;">
<div class="news-title">
企业商品后台管理页面模板
<span>04-24</span>
</div>
<div class="news-title">
代理商后台商品管理页面ui模板
<span>04-24</span>
</div>
</div>
<!-- #1da193 -->
<div class="learn-more">了解更多></div>
</div>
</div>
<!-- 第三屏结束 -->
<!-- 第四屏开始 -->
<div class="about">
<div class="about-content">
<div class="about-content-title">
<h1>关于我们</h1>
<h3>ABOUT US</h3>
</div>
<div class="about-content-introduce">
<p>
华新现代坚持"永远走在用户需求前面"的经营理念，
<br>
关注客户的需求，把握市场脉搏，
<br>
在服务社会的基本前提下，不断提高产品服务品质，
<br>
为客户创造更多价值空间。
<br>
<div class="about-line"></div>
</p>
</div>
<div class="about-content-video">
<img src="images/play.png" alt="">
</div>
<div class="about-content-learnmore">
了解更多>
</div>
</div>
</div>
<!-- 第四屏结束 -->
<!-- 第五屏开始 -->
<div class="partner">
<div class="partner-con">
<div class="partner-con-title">
<h1>华新现代合作伙伴</h1>
<h3>OUR PARTNER</h3>
</div>
<div class="partner-con-img">
<ul>
<li><img src="images/hzhb_pic1.png" alt=""></li>
<li><img src="images/hzhb_pic2.png" alt=""></li>
<li><img src="images/hzhb_pic3.png" alt=""></li>
<li><img src="images/hzhb_pic4.png" alt=""></li>
<li><img src="images/hzhb_pic5.png" alt=""></li>
<li><img src="images/hzhb_pic6.png" alt=""></li>
</ul>
</div>
</div>
</div>
<!-- 第六屏开始 -->
<div class="connect">
<div class="connect-con">
<div class="connect-con-frends">
<p>友情链接: 阿里巴巴集团 淘宝网 天猫 聚划算 1688 阿里妈妈 支付宝 阿里巴巴集团 淘宝网 天猫 聚划算 1688 阿里妈妈 支付宝</p>
<p>阿里巴巴集团 淘宝网 天猫 聚划算</p>
</div>
<div class="connect-con-edition">
Copyright © 2018-2021 保留所有权利，川ICP备8900056001号
</div>
</div>
</div>
</body>
</html>图片素材包 下载
最后修改于 2021-03-11 14:50:48
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
