入門

！[Alt]キー
（https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-ck-c0xffffffff-no-rj-mo0）
オンラインチュートリアルと呼ばyoutubeにオープンチャネルからこの学習リソース、（HTTPS ：システムの中から//www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）は、このプラットフォームようにも私に、彼は私が彼自身のCSSスタイルのいくつかは惹か送信された最初の時間のためのチャネルの意思がないプッシュが、あなたと共有する学習リソースのいくつかの有用な。

簡単な紹介

今日はいくつかのフォリオデザインのUIを導入しました

1.シンプルなページ

<body>
    <ul>
        <li>
            <a href="#">
                <</a>
        </li>
        <li><a href="#" class="active">1</a></li>
        <li><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>

CSSファイル

body {
    margin: 0;
    padding: 0;
    background: #ff006a;
    font-family: sans-serif;
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 15px 20px rgba(0, 0, 0, .5), 0 0 0 4px #b4004e;
}

ul li {
    list-style: none;
}

ul li a {
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #fff;
    color: #262626;
    text-decoration: none;
    border-radius: 4px;
    margin: 5px;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, .1), 0 2px 5px rgba(0, 0, 0, .5);
}

ul li:first-child a {
    border-radius: 20px 0 0 20px;
}

ul li:last-child a {
    border-radius: 0 20px 20px 0;
    /*top right bottom left*/
}

ul li a.active,
ul li a:hover {
    background: #ff006a;
    color: #fff
}

いいえ違いを中心に、私はボックスシャドウとの国境半径を言及したいと思い、前に説明しました

MDNは、ボックスシャドウの解釈から見て、私はより明確な感じ
ここに画像を挿入説明
のボーダー半径を

実績

ここに画像を挿入説明

2.hoverの意志ライトバージョン

そして、同じHTMLに

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #1f1f1f;
}

ul {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ul li {
    list-style: none;
}

ul li a {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    background: #353535;
    color: #565656;
    text-decoration: none;
    border-radius: 4px;
    margin: 5px;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, .1), 0 2px 5px rgba(0, 0, 0, .5);
}

ul li a.active,
ul li a:hover {
    color: #fff;
    text-shadow: 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27), 0 0 20px rgb(255, 224, 27);
}

構文ボックスシャドウとテキストの影はほとんど

実績

ここに画像を挿入説明

jQueryを使って3次と前

    <ul class="pagination">
        <li>
            <a href="#" class="prev">
                < Prev</a>
        </li>
        <li class="pageNumber active"><a href="#">1</a></li>
        <li class="pageNumber"><a href="#">2</a></li>
        <li class="pageNumber"><a href="#">3</a></li>
        <li class="pageNumber"><a href="#">4</a></li>
        <li class="pageNumber"><a href="#">5</a></li>
        <li><a href="#" class="next">Next >
        </a></li>


    </ul>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1ce37c;
}

ul {
    position: relative;
    background: #fff;
    display: flex;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
}

ul li {
    list-style: none;
    line-height: 50px;
    margin: 0 5px;
}

ul li.pageNumber {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    font-weight: 600;
    border-radius: 50%;
}

ul li.pageNumber:hover a,
ul li.pageNumber.active a {
    background: #333;
    color: #fff;
}

ul li:first-child {
    margin-right: 30px;
    font-weight: 700;
    font-size: 20px;
}

ul li:last-child {
    margin-left: 30px;
    font-weight: 700;
    font-size: 20px;
}

さらに重要なのjavascriptのです

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.next').click(function() {
                $('.pagination').find('.pageNumber.active').next().addClass('active');
                $('.pagination').find('.pageNumber.active').prev().removeClass('active');

            })
            $('.prev').click(function() {
                $('.pagination').find('.pageNumber.active').prev().addClass('active');
                $('.pagination').find('.pageNumber.active').next().removeClass('active');

            })
        })
    </script>

次のクリックしたときに実行する主なものであり、次のマークが現在アクティブであり、現在のマークが完了した後に、後から前に使用され、現在は隣にあるこの次の（）関数が戻る、に、注意を払うを削除（）関数ときに実際にそれが戻って参照します。