效果图
还存在一些错误
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>保尔科技</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header id="head">
<div>
<img src="images/1顶部head/line.png" alt="">
<img src="images/1顶部head/logo.png" alt="">
</div>
<div>
<div>
<p>HTNL5+PHP、Android+JAVA、UID+HTML5<br>
<混合式开发培训大牛级团队,专注教育品质</p>
</div>
<div>
<img src="images/1顶部head/line.png" alt="">
<p>我要报名</p>
</div>
</div>
<div>
<img src="images/1顶部head/icon_phone.png" alt="">
<p>0311-8886-7618</p>
</div>
</header>
<nav id="nav">
<li>首页</li>
<li>产品介绍</li>
<li>免费视频</li>
<li>作品展示</li>
<li>关于保尔</li>
</nav>
<div id="banner">
<img src="images/2banner/banner.png" alt="" width="1000px">
</div>
<div id="article1">
<p>量身打造<span>专业课程</span></p>
<p>以基础开始 培训兴趣 发扬学生个性</p>
<p></p>
<div class="article1_div">
<div>
<img src="images/3.3大课程/Android.png" alt="">
</div>
<div>
<img src="images/3.3大课程/H5.png" alt="">
</div>
<div>
<img src="images/3.3大课程/UI.png" alt="">
</div>
</div>
</div>
<div id="article2">
<p>学员作品<span>精美案例</span></p>
<p>真实企业项目 让学员不再没有哦工作经验</p>
<p></p>
<img src="images/4精美案例/1.png" alt="" width="250px">
<img src="images/4精美案例/2.png" alt="" width="250px">
<img src="images/4精美案例/3.png" alt="" width="250px">
</div>
<div id="article3">
<!-- <p><span></span></p> -->
<div>
<p><span>九大优势</span>保驾护航</p>
<p>就业无忧 技术为王</p>
</div>
<div>
<div>
<img src="images/5.9大优势/shizi.png" alt="" width="50px">
</div>
<div>
<p>最豪华的师资阵容</p>
<hr>
<p>1111111111111111
1111111111111111
1111111111111111
1111111111111111
</p>
</div>
</div>
<div>
<div>
<img src="images/5.9大优势/shizi.png" alt="" width="50px">
</div>
<div>
<p>最豪华的师资阵容</p>
<hr>
<p>1111111111111111
1111111111111111
1111111111111111
1111111111111111
</p>
</div>
</div>
<div>
<div>
<img src="images/5.9大优势/shizi.png" alt="" width="50px">
</div>
<div>
<p>最豪华的师资阵容</p>
<hr>
<p>1111111111111111
1111111111111111
1111111111111111
1111111111111111
</p>
</div>
</div>
<div>
<div>
<img src="images/5.9大优势/shizi.png" alt="" width="50px">
</div>
<div>
<p>最豪华的师资阵容</p>
<hr>
<p>1111111111111111
1111111111111111
1111111111111111
1111111111111111
</p>
</div>
</div>
<div>
<div>
<img src="images/5.9大优势/shizi.png" alt="" width="50px">
</div>
<div>
<p>最豪华的师资阵容</p>
<hr>
<p>1111111111111111
1111111111111111
1111111111111111
1111111111111111
</p>
</div>
</div>
<div>
<div>
<img src="images/5.9大优势/shizi.png" alt="" width="50px">
</div>
<div>
<p>最豪华的师资阵容</p>
<hr>
<p>1111111111111111
1111111111111111
1111111111111111
1111111111111111
</p>
</div>
</div>
<div>
<div>
<img src="images/5.9大优势/shizi.png" alt="" width="50px">
</div>
<div>
<p>最豪华的师资阵容</p>
<hr>
<p>1111111111111111
1111111111111111
1111111111111111
1111111111111111
</p>
</div>
</div>
<div>
<div>
<img src="images/5.9大优势/shizi.png" alt="" width="50px">
</div>
<div>
<p>最豪华的师资阵容</p>
<hr>
<p>1111111111111111
1111111111111111
1111111111111111
1111111111111111
</p>
</div>
</div>
<div>
<div>
<img src="images/5.9大优势/shizi.png" alt="" width="50px">
</div>
<div>
<p>最豪华的师资阵容</p>
<hr>
<p>1111111111111111
1111111111111111
1111111111111111
1111111111111111
</p>
</div>
</div>
</div>
<div id="article4">
<div>
<p><span>混合开发</span>高薪就业</p>
<p>4个月的作品完胜工作三年的设计师、工程师</p>
<p>点击咨询</p>
</div>
<div>
<img src="images/6混合开发高薪就业/27'-iMac-(from-left).png" alt="" width="250px">
<img src="images/6混合开发高薪就业/iMac.png" alt="" width="250px">
<img src="images/6混合开发高薪就业/27'-iMac-(from-right).png" alt="" width="250px">
</div>
</div>
<div id="article5">
<p>合作名企</p>
<p>保尔毕业学员遍布全国各大城市的软件公司、设计公司</p>
<img src="images/7合作企业/hezuoqiye.png" alt="" width="800px">
</div>
<div id="article6">
<p>想加入设计师,工程师高薪行业吗?</p>
<p>梦想经不起等待,现在就<span>行动 !</span></p>
<p>我要报名</p>
</div>
<footer id="footer">
<div>
<p>咨询电话</p>
<p>0311-8886-7618</p>
</div>
<div>
<p>首页 | 课程体系 | 免费视频 | 学员作品 | 关于保尔</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111</p>
<p>11111111111111111111111111</p>
</div>
<div>
<img src="images/8二维码/QQ.png" alt="" width="80px">
<img src="images/8二维码/weibo.png" alt="" width="80px">
</div>
</footer>
</div>
</body>
</html>
css代码
*{
margin: 0;
padding: 0;
list-style: none;
}
#container{
width:100opx;
margin:0 auto;
}
#head{
width: 1000px;
height: 90px;
background-image:url("images/1顶部head/background.png");
margin: 0 auto;
}
#head div:nth-child(1){
height: 100%;
width: 250px;
float: left;
/* background-color:brown; */
}
#head div:nth-child(1) img{
float: right;
}
#head div:nth-child(1) img:nth-child(1){
margin-top: 30px;
}
#head div:nth-child(1) img:nth-child(2){
margin-right:10px;
margin-top: 15px;
}
#head div:nth-child(2){
width: 500px;
height: 100%;
/* background-color:yellow; */
float: left;
}
#head div:nth-child(2) div:first-child{
width: 350px;
height: 100%;
/* background-color: teal; */
font-size: 10px;
}
#head div:nth-child(2) div:first-child p{
margin-left: 10px;
margin-top: 25px;
color: white;
}
#head div:nth-child(2) div:last-child{
width: 150px;
height: 100%;
/* background-color: teal; */
font-size: 15px;
float:right
}
#head div:nth-child(2) div:last-child p{
color: white;
float: right;
margin-top: 35px;
margin-right: 20px;
}
#head div:nth-child(2) div:last-child img{
margin-right: 0px;
float: right;
margin-top: 30px;
}
#head div:nth-child(3){
width: 250px;
height: 100%;
/* background-color: rgb(89, 42, 165); */
float: left;
font-size: 20px;
}
#head div:nth-child(3) img{
margin-top: 30px;
margin-left: 10px;
float: left;
}
#head div:nth-child(3) p{
margin-top: 30px;
margin-left: 50px;
color: white;
}
#nav{
width: 1000px;
height: 50px;
margin:0 auto;
/* background:#ccc; */
}
#nav li{
list-style: none;
text-align: center;
width: 150px;
height: 100%;
float: left;
background-color:white;
text-align: center;
/* margin-left: 50px; */
font-size: 20px;
font-weight: 200;
line-height:50px;
}
#nav li:hover{
cursor: pointer;
background:#106BB2;
}
#nav li:first-child{
background-color:#106BB2;
margin-left: 12%;
}
#nav li:last-child{
margin-right: 12%;
}
#banner{
width: 1000px;
height: 300px;
/* background-color: thistle; */
margin: 0 auto;
/* background-image: url("images/2banner/banner.png"); */
}
#article1{
width: 1000px;
height: 450px;
background-color: #FFFFFF;
margin: 0 auto;
}
#article1 p:first-child{
margin-top: 50px;
font-size: 30px;
text-align: center;
}
#article1 p:nth-child(2){
margin-top: 10px;
font-size: 10px;
margin-bottom: 10px;
text-align: center;
}
#article1 p:first-child span{
color: #0D68B0;
}
.article1_div{
float: left;
width: 1000px;
height: 300px;
/* background-color:yellow; */
margin: 0 auto;
margin-top: 20px;
}
.article1_div div:nth-child(1){
float: left;
width: 200px;
height: 200px;
background-color:#EFF4F8;
margin: 0 auto;
margin-top: 50px;
margin-left: 100px;
border: 2px solid #ccc;
border-radius: 5%;
}
.article1_div div:nth-child(1) img{
margin: 0 auto;
position: relative;
margin-left: 70px;
margin-top: -35px;
}
.article1_div div:nth-child(2){
float: left;
width: 200px;
height: 200px;
margin-left: 30px;
background-color:#EFF4F8;
margin: 0 auto;
margin-top: 50px;
margin-left: 100px;
border: 2px solid #ccc;
border-radius: 5%;
}
.article1_div div:nth-child(2) img{
margin: 0 auto;
position: relative;
margin-left: 70px;
margin-top: -35px;
}
.article1_div div:nth-child(3){
float: left;
width: 200px;
height: 200px;
margin-left: 20px;
background-color:#EFF4F8;
margin: 0 auto;
margin-top: 50px;
margin-left: 100px;
border: 2px solid #ccc;
border-radius: 5%;
}
.article1_div div:nth-child(3) img{
margin: 0 auto;
position: relative;
margin-left: 70px;
margin-top: -35px;
}
#article2{
width: 1000px;
height: 400px;
background-color: #EFF4F8;
margin: 0 auto;
}
#article2 p:first-child{
margin-top: 50px;
font-size: 30px;
text-align: center;
}
#article2 p:nth-child(2){
margin-top: 10px;
font-size: 10px;
margin-bottom: 10px;
text-align: center;
}
#article2 p:first-child span{
color: #0D68B0;
}
#article2 img{
margin-top: 20px;
margin-left: 60px;
}
#article3{
width:1000px;
height:800px;
/* border:1px solid #ccc; */
display:flex;
justify-content:flex-start ;
/* flex-direction:row;
flex-wrap:wrap; */
flex-flow:row wrap;
/* align-items:baseline; */
align-content:space-between;
margin: 0 auto;
}
#article3 div{
width:250px;
margin-top: 10px;
height: 200px;
}
#article3 div:nth-child(3n){
margin-left: 10px;
margin-right: 10px;
}
#article3 div:first-child{
width: 1000px;
height: 130px;
/* background-color: aqua; */
margin-top: 0px;
}
#article3 div:first-child p:first-child{
margin-top: 50px;
font-size: 30px;
text-align: center;
}
#article3 div:first-child p:nth-child(2){
margin-top: 10px;
font-size: 10px;
margin-bottom: 10px;
text-align: center;
}
#article3 div:first-child p:first-child span{
color: #0D68B0;
}
#article3 div:nth-child(2){
margin-top: 30px;
/* background:yellow; */
margin-left: 100px;
}
#article3 div:nth-child(2) div:first-child{
width: 80px;
height: 100%;
/* background-color: red; */
float: left;
}
#article3 div:nth-child(2) div:first-child img{
margin-left: 20px;
margin-top: 10px;
}
#article3 div:nth-child(2) div:last-child{
width: 170px;
height: 100%;
/* background-color: green; */
margin-left: 0px;
margin-top: 0px;
float: left;
}
#article3 div:nth-child(3){
margin-top: 30px;
/* background:blue; */
/* margin-top:20px; */
/* margin-left: 100px; */
}
#article3 div:nth-child(3) div:first-child{
width: 80px;
height: 100%;
/* background-color: red; */
float: left;
}
#article3 div:nth-child(3) div:first-child img{
margin-left: 20px;
margin-top: 10px;
}
#article3 div:nth-child(3) div:last-child{
width: 170px;
height: 100%;
/* background-color: green; */
margin-left: 0px;
margin-top: 0px;
float: left;
}
#article3 div:nth-child(4){
margin-top: 30px;
/* padding-top:40px; */
/* background:green; */
/* margin-left: 100px; */
}
#article3 div:nth-child(4) div:first-child{
width: 80px;
height: 100%;
/* background-color: red; */
float: left;
}
#article3 div:nth-child(4) div:first-child img{
margin-left: 20px;
margin-top: 10px;
}
#article3 div:nth-child(4) div:last-child{
width: 170px;
height: 100%;
/* background-color: green; */
margin-left: 0px;
margin-top: 0px;
float: left;
}
#article3 div:nth-child(5){
/* background:orange; */
margin-left: 100px;
}
#article3 div:nth-child(5) div:first-child{
width: 80px;
height: 100%;
/* background-color: red; */
float: left;
}
#article3 div:nth-child(5) div:first-child img{
margin-left: 20px;
margin-top: 10px;
}
#article3 div:nth-child(5) div:last-child{
width: 170px;
height: 100%;
/* background-color: green; */
margin-left: 0px;
margin-top: 0px;
float: left;
}
#article3 div:nth-child(6){
/* background:orange; */
}
#article3 div:nth-child(6) div:first-child{
width: 80px;
height: 100%;
/* background-color: red; */
float: left;
}
#article3 div:nth-child(6) div:first-child img{
margin-left: 20px;
margin-top: 10px;
}
#article3 div:nth-child(6) div:last-child{
width: 170px;
height: 100%;
/* background-color: green; */
margin-left: 0px;
margin-top: 0px;
float: left;
}
#article3 div:nth-child(7){
/* background:orange; */
}
#article3 div:nth-child(7) div:first-child{
width: 80px;
height: 100%;
/* background-color: red; */
float: left;
}
#article3 div:nth-child(7) div:first-child img{
margin-left: 20px;
margin-top: 10px;
}
#article3 div:nth-child(7) div:last-child{
width: 170px;
height: 100%;
/* background-color: green; */
margin-left: 0px;
margin-top: 0px;
float: left;
}
#article3 div:nth-child(8){
/* background:orange; */
margin-left: 100px;
margin-bottom: 10px;
}
#article3 div:nth-child(8) div:first-child{
width: 80px;
height: 100%;
/* background-color: red; */
float: left;
}
#article3 div:nth-child(8) div:first-child img{
margin-left: 20px;
margin-top: 10px;
}
#article3 div:nth-child(8) div:last-child{
width: 170px;
height: 100%;
/* background-color: green; */
margin-left: 0px;
margin-top: 0px;
float: left;
}
#article3 div:nth-child(9){
/* background:orange; */
margin-bottom: 10px;
}
#article3 div:nth-child(9) div:first-child{
width: 80px;
height: 100%;
/* background-color: red; */
float: left;
}
#article3 div:nth-child(9) div:first-child img{
margin-left: 20px;
margin-top: 10px;
}
#article3 div:nth-child(9) div:last-child{
width: 170px;
height: 100%;
/* background-color: green; */
margin-left: 0px;
margin-top: 0px;
float: left;
}
#article3 div:nth-child(10){
/* background:orange; */
margin-bottom: 10px;
}
#article3 div:nth-child(10) div:first-child{
width: 80px;
height: 100%;
/* background-color: red; */
float: left;
}
#article3 div:nth-child(10) div:first-child img{
margin-left: 20px;
margin-top: 10px;
}
#article3 div:nth-child(10) div:last-child{
width: 170px;
height: 100%;
/* background-color: green; */
margin-left: 0px;
margin-top: 0px;
float: left;
}
#article4{
width: 1000px;
height: 500px;
background-color:#79ABE8;
margin: 0 auto;
background-image: url("images/6混合开发高薪就业/background.png");
background-size:100% 100%;
}
#article4 div:first-child{
width: 1000px;
height: 150px;
float: left;
/* background-color: blue; */
}
#article4 div:last-child{
width: 1000px;
height: 350px;
/* background-color:red; */
float: left;
}
#article4 div:first-child p:first-child{
margin-top: 20px;
font-size: 30px;
text-align: center;
color: white;
}
#article4 div:first-child p:nth-child(2){
/* margin-top: 10px; */
font-size: 10px;
/* margin-bottom: 10px; */
text-align: center;
color: white;
}
#article4 div:first-child p:last-child{
margin-top: 40px;
margin-left: 430px;
/* margin-bottom: 10px; */
text-align: center;
color: white;
background-color: #20C1F7;
width: 150px;
height: 50px;
line-height: 50px;
/* background-image: url("images/7我要报名/btn_selected.png"); */
border-radius: 5%;
}
#article4 div:first-child p:first-child span{
color: #0D68B0;
}
#article4 div:last-child img{
margin-top: 50px;
}
#article4 div:last-child img:first-child{
margin-left: 120px;
}
#article5{
width: 1000px;
height: 300px;
/* background-color: rgb(109, 75, 96); */
margin: 0 auto;
}
#article5 p:first-child{
margin-top: 50px;
font-size: 30px;
text-align: center;
color: #0D68B0;
}
#article5 p:nth-child(2){
margin-top: 10px;
font-size: 10px;
margin-bottom: 10px;
text-align: center;
}
#article5 img{
margin-top: 30px;
margin-left: 100px;
}
#article6{
width: 1000px;
height: 250px;
background-color: rgb(22, 66, 77);
margin: 0 auto;
background-image: url("images/7我要报名/backgroundaaa.png");
padding-top: 30px;
}
#article6 p:first-child{
font-size: 30px;
text-align: center;
color: white;
}
#article6 p:nth-child(2){
margin-top: 30px;
font-size: 30px;
margin-bottom: 10px;
text-align: center;
color: white;
}
#article6 p:last-child{
width: 150px;
height: 50px;
margin-bottom: 10px;
font-size: 20px;
line-height: 50px;
text-align: center;
color:white;
background-color:#21C1F8;
margin-left: 430px;
margin-top: 50px;
/* background-image: url("images/7我要报名/btn_selected.png"); */
border-radius: 5%;
}
#article6 p:last-child:hover{
cursor: pointer;
background:#FDCB2C;
}
#article6 span{
color: #1BBFF1;
font-size: 35px;
}
#footer{
width: 1000px;
height: 250px;
background-color: #2F383D;
margin: 0 auto;
}
#footer div{
float: left;
}
#footer div:first-child{
width: 300px;
height: 250px;
/* background-color: yellow; */
color: white;
}
#footer div:first-child p{
float: left;
margin-left: 50px;
margin-top: 80px;
}
#footer div:first-child p:last-child{
font-size: 30px;
margin-top: 0px;
}
#footer div:nth-child(2){
width:400px;
height: 250px;
/* background-color: red; */
float: left;
color: white;
text-align: center;
}
#footer div:nth-child(2) p:first-child{
margin-top: 80px;
margin-bottom: 40px;
}
#footer div:last-child{
width: 300px;
height: 250px;
/* background-color: blue; */
float: left;
color: white;
}
#footer div:last-child img{
margin-top: 80px;
float: left;
margin-left: 30px;
}
图片
无
整个文件
链接:link