综合案例：仿学成在线布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="header w">
<div class="logo">
<img src="images/logo.PNG" >
</div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<div class="search">
<input type="text" name="" id="" value="请输入关键词" />
<button type="button"></button>
</div>
<div class="user">
<input type="image" src="images/user.jpg" />
<p>lihongda</p>
</div>
</div>
<div class="banner">
<div class="w">
<div class="sunnav">
<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>
<div class="course">
<div class="course-hd">
我的课程表
</div>
<div class="course-bd">
<ul>
<li><a href="#"><h4>继续学习程序语言设计</h4><p>正在学习—面向对象</p></a></li>
<li><a href="#"><h4>继续学习程序语言设计</h4><p>正在学习—面向对象</p></a></li>
<li><a href="#"><h4>继续学习程序语言设计</h4><p>正在学习—面向对象</p></a></li>
</ul>
<a href="#" class="all">全部课程</a>
</div>
</div>
</div>
</div>
<div class="goods w">
<h3>精品推荐</h3>
<div class="goods-items">
| <a href="#">jquery</a>
| <a href="#">jquery</a>
| <a href="#">jquery</a>
| <a href="#">jquery</a>
| <a href="#">jquery</a>
| <a href="#">jquery</a>
| <a href="#">jquery</a>
</div>
<div class="model-fun">
修改兴趣
</div>
</div>
<div class="box w clearfix">
<div class="box_hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box_bd">
<ul>
<li>
<img src="images/pic.jpg" >
<h4>Think PHP 5.0 博客系统项目实战演练</h4>
<p><span>高级</span>^ 1125人在学习</p>
</li>
<li>
<img src="images/pic.jpg" >
<h4>Think PHP 5.0 博客系统项目实战演练</h4>
<p><span>高级</span>^ 1125人在学习</p>
</li>
<li>
<img src="images/pic.jpg" >
<h4>Think PHP 5.0 博客系统项目实战演练</h4>
<p><span>高级</span>^ 1125人在学习</p>
</li>
<li>
<img src="images/pic.jpg" >
<h4>Think PHP 5.0 博客系统项目实战演练</h4>
<p><span>高级</span>^ 1125人在学习</p>
</li>
<li>
<img src="images/pic.jpg" >
<h4>Think PHP 5.0 博客系统项目实战演练</h4>
<p><span>高级</span>^ 1125人在学习</p>
</li>
<li>
<img src="images/pic.jpg" >
<h4>Think PHP 5.0 博客系统项目实战演练</h4>
<p><span>高级</span>^ 1125人在学习</p>
</li>
<li>
<img src="images/pic.jpg" >
<h4>Think PHP 5.0 博客系统项目实战演练</h4>
<p><span>高级</span>^ 1125人在学习</p>
</li>
<li>
<img src="images/pic.jpg" >
<h4>Think PHP 5.0 博客系统项目实战演练</h4>
<p><span>高级</span>^ 1125人在学习</p>
</li>
<li>
<img src="images/pic.jpg" >
<h4>Think PHP 5.0 博客系统项目实战演练</h4>
<p><span>高级</span>^ 1125人在学习</p>
</li>
<li>
<img src="images/pic.jpg" >
<h4>Think PHP 5.0 博客系统项目实战演练</h4>
<p><span>高级</span>^ 1125人在学习</p>
</li>
</ul>
</div>
</div>
<div class="footer w">
<div class="copyright">
<img src="../第二天/img/btn.png" >
<p>本网站仅为学习测试基本框架，不设计任何商业信息<br>辽ICP备 19019529号-1</p>
</div>
<div class="links">
<dl>
<dt>关于我们</dt>
<dd>联系方式</dd>
<dd>客户服务</dd>
<dd>我们</dd>
<dd>帮助</dd>
</dl>
<dl>
<dt>新手指南</dt>
<dd>联系方式</dd>
<dd>操作</dd>
<dd>我们</dd>
<dd>帮助</dd>
</dl>
</div>
</div>
</body>
</html>
需要图片素材私信我。
1565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
