<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 宽高为100% 的背景图片。-->
<div class="container bgImg">
<!-- flex列表 -->
<ul class="flex_example">
<li>
<!-- 头像？？ -->
<div class="flex_example_div1"></div>
<!-- 内容 -->
<div class="flex_example_div2">
<p>这里是主要内容？？</p>
<p>2016-07-18 12:12:12</p>
</div>
<!-- 其他一些什么东西？？最右边的 -->
<button class="flex_example_button">一个按钮</button>
</li>
<li>
<!-- 头像？？ -->
<div class="flex_example_div1"></div>
<!-- 内容 -->
<div class="flex_example_div2">
<p>这里是主要内容？？</p>
<p>2016-07-18 12:12:12</p>
</div>
<!-- 其他一些什么东西？？最右边的 -->
<button class="flex_example_button">一个按钮</button>
</li>
</ul>
<!-- img 三列 -->
<ul class="mt30 float_img_three clearfix">
<li>这</li>
<li>里</li>
<li>可</li>
<li>换</li>
<li>成</li>
<li>图</li>
<li>片</li>
</ul>
<!-- img 两列 -->
<ul class="mt30 float_img_two clearfix">
<li>这</li>
<li>里</li>
<li>可</li>
<li>换</li>
<li>成</li>
<li>图</li>
<li>片</li>
</ul>
<!-- 文字列表 -->
<ul class="text_list mt30">
<li><a href="javascript:;">右边的箭头可以用图片</a></li>
<li><a href="javascript:;">我这用的是大于号</a></li>
</ul>
<!-- 固定头 -->
<header>
<a href="javascript:;" class="header_left"></a>
<p>敢不敢点左边那坨圆圆的东西？？</p>
<a href="javascript:;" class="header_right"></a>
</header>
<!-- 左侧隐藏栏 -->
<div class="left_hide">
<p>这里是左侧隐藏栏</p>
<p>点右边半透明的地方我会消失哦！</p>
</div>
<!-- 透明层 -->
<div class="layer"></div>
<!-- 按钮 -->
<button class="fixed_button mt30">我一般被固定在底部不动哦!!!</button>
<button class="eight_button">80%宽度的按钮</button>
<button class="six_button">60%宽度的按钮</button>
</div>
<script src="http://www.caochao.cc/js/jquery-2.1.3.min.js"></script>
<script>
$(function(){
$('.header_left').on('click', function(){
$('.layer').fadeIn();
$('.left_hide').animate({
'left': '0'
}, 500);
});
$('.layer').on('click', function(){
$('.layer').fadeOut();
$('.left_hide').animate({
'left': '-50%'
}, 500);
});
})
</script>
</body>
</html>
扫一扫
2491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
