<!DOCTYPE html>
<html lang="en">
<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>
<!-- <img src="./images/icon.ico" alt="">用这个显示在正文部分，不能显示在网页标题处 -->
<link rel="icon" href="images/icon.ico" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header">
<div class="header-con">
<!-- 左侧是logo -->
<h1>
<img
src="images/qf_logo.jpg"
alt="网络不佳，请刷新"
title="千锋互联"
/>
</h1>
<!-- 右侧是导航 -->
<ol>
<li class="box1">首页</li>
<li>课程</li>
<li>走进千锋</li>
<li>双选会</li>
<li>千锋教育</li>
<li>好程序员</li>
<li>扣丁学堂</li>
<li>APP外包</li>
<li>培训服务</li>
<li class="box2" style="background: none;">创业孵化</li>
</ol>
</div>
</div>
<!-- 轮播图区域 -->
<div id="banner">
<!-- <img src="./images/banner_2_bg.jpg" alt="世上" width="100%" height="420px"> -->
</div>
<!-- 产业区域 -->
<div id="item">
<div class="item-con">
<div>
<img src="./images/phone_03.png" alt="">
<h2>移动产业</h2>
<h3>国内互联网开发人才提供平台</h3>
<h4>
精准高效的人才匹配<br>
专业多样的招聘平台<br>
覆盖全国的优质资源
</h4>
</div>
<div>
<img src="images/dengpao_03.jpg" alt="">
<h2>千锋教育</h2>
<h3>IT职业教育良心品牌</h3>
<h4>
专业的师资队伍<br>
完善的课程体系<br>
前沿的企业内训
</h4>
</div>
<div>
<img src="images/zhifeiji_03.jpg" alt="">
<h2>项目研发</h2>
<h3>知名互联网项目解决方案提供商</h3>
<h4>
实力雄厚的研发团队 <br>
高效优质的产品质量 <br>
全面完善的售后服务
</h4>
</div>
<div style="background: none">
<img src="images/xiaotaiyang_03.jpg" alt="">
<h2>创业孵化</h2>
<h3>卓越的互联网孵化基地</h3>
<h4>
行业知名的“天使投资”导师<br>
国内配套的资源支持<br>
助理实现创新idea
</h4>
</div>
</div>
</div>
<!-- 新闻区域 -->
<div id="news">
<div class="news-con">
<div class="box1">
<img src="./images/img20190926qf.jpg" alt="">
</div>
<div class="box2">
<div>
<h2>动态新闻</h2>
<h3>千峰1024程序员节大会大会精彩上演</h3>
<h4>千峰1024程序员节大会大会精彩上演千峰1024程序员节大会大会精彩上演</h4>
</div>
<ul>
<li>设计大咖助阵千锋教育1024程序员节</li>
<li>千锋携手北大医学信息掀起程序员狂欢盛宴</li>
<li>百度人工智能大牛助阵千锋1024程序员节</li>
<li>千锋教育携手惊喜礼品现身神州棒棒</li>
</ul>
</div>
<div class="box3">
<h2>与我们交谈</h2>
<img src="./images/2_03.png" alt="">
<h3>400-811-9900</h3>
<h4>
企业招聘咨询:123456798931(单总)<br>
企业招聘咨询:123456798931(单总)<br>
企业招聘咨询:123456798931(单总)<br>
企业招聘咨询:123456798931(单总)
</h4>
</div>
<!-- //// -->
</div>
</div>
<!-- 底部导航区域 -->
<div id="nav">
<div class="nav-con">
<div class="box1">
<ul>
<li class="firstli">千锋教育</li>
<li>千锋教育</li>
<li>千锋教育</li>
<li>千锋教育</li>
</ul>
<ul>
<li class="firstli">千锋教育</li>
<li>千锋教育千</li>
<li>千锋教育</li>
<li>千锋教育</li>
</ul>
<ul>
<li class="firstli">千锋教</li>
<li>千锋教</li>
<li>千锋教</li>
<li>千锋教</li>
</ul>
<ul>
<li class="firstli">千锋教育</li>
<li>千锋教育</li>
<li>千锋教育</li>
<li>千锋教育</li>
</ul>
</div>
<div class="box2">
<img src="./images/qf_map.png" alt="">
</div>
<div class="box3">
<img src="./images/qf_code.jpg" alt="">
<p>
千锋教育微信号<br>
扫描加好友
</p>
</div>
</div>
</div>
<div id="footer">
<div class="footer-con">
<div>版权所有，侵权必究，千锋教育，以人为本</div>
<marquee>版权所有，侵权必究，千锋教育，以人为本</marquee>
</div>
</div>
</body>
</html>
margin,padding综合运用，用途：适合新手学习
需积分: 14 170 浏览量
2022-07-20
20:55:36
上传
评论
收藏 2.03MB ZIP 举报
前端H5新手静态页面练习1.zip （41个子文件） 
css 
reset.css 487B style.css 5KB
练习1.png 948KB images banner_2_txt2.png 5KB
qf_code.jpg 47KB qf_bannerx5.jpg 7KB phone_03.png 1KB banner_5_bg.jpg 34KB qf_logo.jpg 5KB dpd-2019.jpg 48KB banner_2_txt1.png 11KB banner_5_pic1.png 268KB news_jt.png 170B logo_03.png 2KB qf_map_bg.png 728B banner_2_txt3.png 8KB 2_03.png 1KB banner_1_pic1.png 145KB line_03.png 945B dengpao_03.jpg 3KB banner_4_pic1.png 232KB icon.ico 3KB qf_bannerx1.jpg 6KB 1.png 128B banner_4_txt1.png 8KB qf_map.png 4KB qf_list_bg.png 20KB img20190926qf.jpg 20KB banner_1_txt2.png 4KB banner_4_bg.jpg 48KB banner_1_txt1.png 16KB banner_2_bg.jpg 121KB banner_1_bg.jpg 73KB zhifeiji_03.jpg 3KB banner_5_txt1.png 10KB qf_bannerx4.jpg 7KB banner_1_txt3.png 4KB qf_bot_line.png 411B xiaotaiyang_03.jpg 2KB qf_bannerx2.jpg 7KB
index.html 5KB
大怪冰
- 粉丝: 3
- 资源: 2
评论0