移动Web学习06-移动端适配&Less预处理器项目案例
<!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>FC游乐园</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./lib/iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 主体内容start-->
<div class="main">
<!--轮播图start -->
<div class="banner">
<ul>
<li>
<a href="#"><img src="./uploads/banner_1.png" alt=""></a>
</li>
</ul>
</div>
<!--轮播图end -->
<!--标题 start -->
<div class="title">
<h4>乐园活动</h4>
</div>
<!--标题 end -->
<!--内容模块start -->
<div class="item">
<!-- 图片模块 start-->
<div class="pic">
<a href="#"><img src="./uploads/item_1.png" alt=""></a>
<span class="active">进行中</span>
<i class="iconfont icon-shoucang1"></i>
</div>
<!-- 图片模块 end -->
<!-- 文本模块start -->
<div class="txt">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<p>免费</p>
</div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi"></i><span>200</span>人已报名
</p>
<p>
<i class="iconfont icon-shizhong"></i>本<span>周六</span>开始
</p>
</div>
</div>
<!-- 文本模块end -->
</div>
<!--内容模块end -->
<!--内容模块start -->
<div class="item">
<!-- 图片模块 start-->
<div class="pic">
<a href="#"><img src="./uploads/item_1.png" alt=""></a>
<span class="active">进行中</span>
<i class="iconfont icon-shoucang1"></i>
</div>
<!-- 图片模块 end -->
<!-- 文本模块start -->
<div class="txt">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<p>免费</p>
</div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi"></i><span>200</span>人已报名
</p>
<p>
<i class="iconfont icon-shizhong"></i>本<span>周六</span>开始
</p>
</div>
</div>
<!-- 文本模块end -->
</div>
<!--内容模块end -->
<!--内容模块start -->
<div class="item">
<!-- 图片模块 start-->
<div class="pic">
<a href="#"><img src="./uploads/item_1.png" alt=""></a>
<span class="active">进行中</span>
<i class="iconfont icon-shoucang1"></i>
</div>
<!-- 图片模块 end -->
<!-- 文本模块start -->
<div class="txt">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<p>免费</p>
</div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi"></i><span>200</span>人已报名
</p>
<p>
<i class="iconfont icon-shizhong"></i>本<span>周六</span>开始
</p>
</div>
</div>
<!-- 文本模块end -->
</div>
<!--内容模块end -->
<!--内容模块start -->
<div class="item">
<!-- 图片模块 start-->
<div class="pic">
<a href="#"><img src="./uploads/item_1.png" alt=""></a>
<span class="active">进行中</span>
<i class="iconfont icon-shoucang1"></i>
</div>
<!-- 图片模块 end -->
<!-- 文本模块start -->
<div class="txt">
<div class="top">
<h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
<p>免费</p>
</div>
<div class="bottom">
<p>
<i class="iconfont icon-qizhi"></i><span>200</span>人已报名
</p>
<p>
<i class="iconfont icon-shizhong"></i>本<span>周六</span>开始
</p>
</div>
</div>
<!-- 文本模块end -->
</div>
<!--内容模块end -->
</div>
<!-- 主体内容 end -->
<!-- 底部工具栏 start -->
<footer class="footer">
<a href="#" class="current">
<i class="iconfont icon-index-copy"></i>
<p>首页</p>
</a>
<a href="#">
<i class="iconfont icon-youhuiquan"></i>
<p>卡卷</p>
</a>
<a href="#">
<i class="iconfont icon-iconfront-"></i>
<p>我的</p>
</a>
</footer>
<!-- 底部工具栏 end -->
<script src="./js/flexible.js"></script>
</body>
</html>