<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 1、头部制作 -->
<!-- 1号盒子：版心盒子header -->
<div class="header w">
<!-- 2号盒子：logo盒子logo -->
<div class="logo">
<img src="imges/logo.png" alt="">
</div>
<!-- 3号盒子：导航栏盒子nav -->
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
<!-- 4号盒子：搜索框盒子search -->
<div class="search">
<input class="input" type="text" value="请输入关键词">
<button class="button" type="submit">
</div>
<!-- 6号盒子：个人信息盒子user -->
<div class="user">
<div class="circle"></div>
<a href="#">qq-leishui</a>
</div>
</div>
<!-- 结束 -->
<!-- 2、banner制作 -->
<!-- 1号盒子：banner大盒子 -->
<div class="banner">
<!-- 2号盒子：课程导航栏盒子subnav -->
<div class="w">
<div class="subnav">
<ul>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">后端开发<span>></span></a></li>
<li><a href="#">移动开发<span>></span></a></li>
<li><a href="#">人工智能<span>></span></a></li>
<li><a href="#">商业预测<span>></span></a></li>
<li><a href="#">云计算&大数据<span>></span></a></li>
<li><a href="#">运维&从测试<span>></span></a></li>
<li><a href="#">UI设计<span>></span></a></li>
<li><a href="#">产品<span>></span></a></li>
</ul>
</div>
<!-- 3号盒子：课程表盒子course -->
<div class="course">
<h3>我的课程表</h3>
<li class="first">
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li class="button"><button>全部课程</button></li>
</div>
</div>
</div>
<!-- 结束 -->
<!-- 3、goods制作 -->
<!-- 1号盒子：goods大盒子 -->
<div class="goods w">
<!-- 2号盒子：标题盒子 -->
<h3>精品推荐</h3>
<!-- 3号盒子：goods-item盒子 -->
<ul class="goods-item">
<li>|</li>
<li><a href="#">JQuery</a></li>
<li>|</li>
<li><a href="#">Spark</a></li>
<li>|</li>
<li><a href="#">MySQL</a></li>
<li>|</li>
<li><a href="#">JavaWeb</a></li>
<li>|</li>
<li><a href="#">MySQL</a></li>
<li>|</li>
<li><a href="#">JavaWeb</a></li>
</ul>
<!-- 4号盒子：mod盒子 -->
<div class="mod"><a href="#">修改兴趣</a></div>
</div>
<!-- 4、box制作 -->
<!-- 1号盒子：box大盒子 -->
<div class="box w">
<!-- 2号盒子：标题盒子 -->
<div class="box-title">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<!-- 3号盒子：下部分列表bix-bd盒子 -->
<ul class="box-bd">
<li>
<img src="imges/box-bd1.png">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p>高级<span> · 1125人在学习</span></p>
</li>
<li>
<img src="imges/box-bd2.png">
<h4>Android 网络图片加载框架详解</h4>
<p>高级<span> · 1125人在学习</span></p>
</li>
<li>
<img src="imges/box-bd3.png">
<h4>Angular 2 最新框架+主流技术+项目实战</h4>
<p>高级<span> · 1125人在学习</span></p>
</li>
<li>
<img src="imges/box-bd4.png">
<h4>Android Hybrid APP开发实战 H5+原生！</h4>
<p>高级<span> · 1125人在学习</span></p>
</li>
<li class="final">
<img src="imges/box-bd4.png">
<h4>Android Hybrid APP开发实战 H5+原生！</h4>
<p>高级<span> · 1125人在学习</span></p>
</li>
<li>
<img src="imges/box-bd1.png">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p>高级<span> · 1125人在学习</span></p>
</li>
<li>
<img src="imges/box-bd2.png">
<h4>Android 网络图片加载框架详解</h4>
<p>高级<span> · 1125人在学习</span></p>
</li>
<li>
<img src="imges/box-bd3.png">
<h4>Angular 2 最新框架+主流技术+项目实战</h4>
<p>高级<span> · 1125人在学习</span></p>
</li>
<li>
<img src="imges/box-bd4.png">
<h4>Android Hybrid APP开发实战 H5+原生！</h4>
<p>高级<span> · 1125人在学习</span></p>
</li>
<li class="final">
<img src="imges/box-bd4.png">
<h4>Android Hybrid APP开发实战 H5+原生！</h4>
<p>高级<span> · 1125人在学习</span></p>
</li>
</ul>
</div>
<!-- 5、box2制作 -->
<div class="box2 w">
<div class="box2-title">
<h3>编程入门</h3>
<ul class="box2-nav">
<li><a href="#">热门</a></li>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>
<a href="#">查看全部</a>
</div>
<div class="box2-bd">
<div class="box2-left">
<div>
<h4>PHP入门:<br>基础语法到实际运用</h4>
<p>零基础入门：语法与界</p>
<p>进阶：网络与数据缓存</p>
<p>界面到数据存储</p>
</div>
</div>
<div class="box2-right">
<div class="right-top"></div>
<ul class="right-bottom">
<li>
<img src="imges/box2-rightbottom1.png" alt="">
<h4>Android Hybrid APP开发实战 H5+原生！</h4>
<p>高级<span> · 1125人在学习</span></p>
</li>
<li>
<img src="imges/box2-rightbottom2.png" alt="">
<h4>Kami2首页界面切换效果<br> </h4>
<p>高级<span>1125人在学习</span></p>
</li>
<li>
<img src="imges/box2-rightbottom3.png" alt="">
<h4>Unity Profiler入门<br> </h4>
<p
pink老师htmlcss学习 - 学成在线案例
需积分: 0 150 浏览量
2023-03-26
20:54:39
上传
评论
收藏 11.2MB ZIP 举报
study.zip （20个子文件） 
style.css 9KB 学成网首页.psd 26.75MB
index.html 15KB
imges 
box2-rightbottom2.png 39KB box4-bd4.png 32KB banner.png 374KB box2-rightbottom4.png 29KB logo.png 5KB box2-righttop.png 88KB search.png 1KB box-bd2.png 50KB box3-righttop.png 59KB box2-left.png 67KB box3-left.png 56KB user.png 4KB box2-rightbottom1.png 39KB box-bd3.png 57KB box2-rightbottom3.png 37KB box-bd1.png 50KB box-bd4.png 47KB资源评论
