从零开始——瀑布流页面（1）挑选合适的页面

最新推荐文章于 2024-05-15 17:55:28 发布

许辰铭

最新推荐文章于 2024-05-15 17:55:28 发布

阅读量132

点赞数

文章标签：数据库 jquery

本文链接：https://blog.csdn.net/weixin_46462410/article/details/105251872

版权

首先说明，本人边工作边学习前端，断断续续看了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>

最终页面变成这样子，大家也可以根据自己的喜好去更改底色
在这里插入图片描述

许辰铭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始——瀑布流页面（1）挑选合适的页面

首先说明，本人边工作边学习前端，断断续续看了5个月的教程，自己摸索出来的内容。也许有一些写法不符合规范，还希望大家指正。我写从零开始系列的初衷就是想告诉大家前端入门不是很难，贵在坚持。前段时间我夫人学校要弄个新闻集，她一直用表格在统计很不方便，也不直观。所以我开始动手准备写个页面。环境准备1、下载前端编写工具，推荐brackets，下载地址http://brackets.io/2、挑选jq...
复制链接

扫一扫