首先说明,本人边工作边学习前端,断断续续看了5个月的教程,自己摸索出来的内容。也许有一些写法不符合规范,还希望大家指正。我写从零开始系列的初衷就是想告诉大家前端入门不是很难,贵在坚持。
前段时间我夫人学校要弄个新闻集,她一直用表格在统计很不方便,也不直观。所以我开始动手准备写个页面。
环境准备
- 下载前端编写工具,推荐brackets,下载地址http://brackets.io/
- 挑选jquery,推荐网站http://www.htmleaf.com/,没有什么理由,就两个字免费,最后我们选中了这一个jquery,http://www.htmleaf.com/jQuery/pubuliuchajian/201808015256.html
- 下载jquery.js,或者直接引用cdn的
改造页面
直接上代码,之前下载的juqery中稍加修改即可,我把内容全部删除了,下面几步将会详细介绍如何插入新闻集
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>金陵河西新闻合集</title>
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="./css/main.css">
<link href="https://fonts.googleapis.com/css?family=Hind:400,600|Open+Sans:300,600" rel="stylesheet">
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="./dist/sortable.min.css">
<script type="text/javascript" src="./dist/sortable.js"></script>
</head>
<body>
<div class="container">
<header class="htmleaf-header">
<h1>金陵河西新闻合集<span>only for michelle.mi</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="#" title="学校网站" target="_blank"></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="#" title="学校微博" target="_blank"></a>
</div>
</header>
<main class="sortable">
<div class="container">
<div class="wrapper">
<ul class="sortable__nav nav">
<li>
<a data-sjslink="all" class="nav__link">
All
</a>
</li>
<li>
<a data-sjslink="市级" class="nav__link">
市级
</a>
</li>
<li>
<a data-sjslink="省级" class="nav__link">
省级
</a>
</li>
<li>
<a data-sjslink="国家级" class="nav__link">
国家级
</a>
</li>
</ul>
<div id="sortable" class="sjs-default">
</div>
</div>
</div>
</main>
</div>
</body>
</html>
最终页面变成这样子,大家也可以根据自己的喜好去更改底色