模仿博客园页面

最新推荐文章于 2021-03-09 18:12:59 发布

??yy

最新推荐文章于 2021-03-09 18:12:59 发布

阅读量329

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/folkzy/p/7388437.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <script>
        
    var blogs =
    [
        {
            "title": "阿里云服务API的试用",
            "abstract": "摘要: 1. 注册阿里云，并在API市场购买服务，在后台得到AppCode.."
        }
    ];
        
    $(document).ready(function(){
        $("#panel").hide();
        $("#flip").click(function(){
            console.log("clicked");
            $("#panel").slideToggle("slow");
        });
    });

    </script>

</head>

<body>

<h1>folkzy</h1>
    
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
    	<div>
    		<ul class="nav navbar-nav">
    			<li class="active"><a href="#">博客园</a></li>
    			<li><a href="#">首页</a></li>
    			<li><a href="#">新随笔</a></li>
    			<li><a href="#">联系</a></li>
    			<li><a href="#">订阅</a></li>
    			<li><a href="#">管理</a></li>
    		</ul>
    	</div>
	</div>
</nav>
    
<table class="table table-hover">
    <tr><th>标题</th><th>阅读量</th><th>评论数</th></tr>
    <tr id="flip"><td>阿里云服务API的试用</td><td>30</td><td>11</td></tr>
    <tr id="panel"><td bgcolor="#EEEEEE" colspan="3">摘要: 1. 注册阿里云，并在API市场购买服务，在后台得到AppCode..</td></tr>
    <tr><td>新技能四步走</td><td>41</td><td>2</td></tr>
    <tr><td>前端开发入门笔记</td><td>41</td><td>13</td></tr>
    <tr><td>自我修养第一篇</td><td>41</td><td>0</td></tr>
    <tr><td>FreeRTOS栈溢出检查</td><td>41</td><td>5</td></tr>
    <tr><td>高数上册第三章</td><td>41</td><td>12</td></tr>
    <tr><td>C语言笔记</td><td>41</td><td>21</td></tr>
</table>

<ul class="pagination">
    <li><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">»</a></li>
</ul>

</body>
</html>

显示效果如下：

参考资料

http://www.runoob.com/jquery/jquery-slide.html

转载于:https://www.cnblogs.com/folkzy/p/7388437.html

??yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模仿博客园页面

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" hre...
复制链接

扫一扫