css計數器之小案例

阿新 • • 發佈：2021-02-15

技術標籤：css

css計數器
counter-reset:counterName //建立或重置計數器
counter-increment:counterName //遞增變數
content:插入生成的內容 //一般和偽類 ::before或::after搭配使用
counter(counterName)或counters(函式) //將計數器的值新增到元素

先展示效果圖，然後下面是程式碼。雖然看著簡單，但用到的知識點蠻多的。
最重要的是程式碼的可擴充套件性
效果圖展示

<!DOCTYPE html>
<html lang="en">

<head>
    < 
meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            counter-reset: 
 counter;
        }

        .circle_container {
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* margin-top: 30px; */
        }

        .circle_container li {
            counter-increment: counter; 

            list-style: none;
            flex-grow: 1;
            position: relative;
        }
        .circle_container li:last-child{
            flex-grow: 0;
        }
        .circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #BCBCBC;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        li .line{
            width: 100%;
            height: 2px;
            background-color: #bcbcbc;
            position: absolute;
            top: 20px;
            left: 0;
            z-index: -1;
        }
        .circle_container li:last-child .line{
            display: none;
        }
        .circle_num {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            line-height: 35px;
            text-align: center;
            color: #fff;
            font-weight: bold;
        }
        .circle_num::after {
            content: counter(counter)
        }
        .circle_detail {
            margin-top: 10px;
            color: #444;
            font-weight: bold;

        }
        .circle_detail::after {
            content: '第'counter(counter)'步'
        }
        .finished .circle{
            background-color:#00BC9B;
        }
        .finished .circle_num{
            border: 2px solid #fff;
        }
        .finished .circle_detail{
            color:#00BC9B;
        }
        .finished .line{
            background-color: #00BC9B;
        }
    </style>
</head>

<body>
    <ul class="circle_container">
        <li class="finished">
            <div class="line"></div>
            <div class='circle'>
                <span class='circle_num'></span>
            </div>
            <div class="circle_detail"></div>
        </li>
        <li class="finished">
            <div class="line"></div>
            <div class='circle'>
                <div class='circle_num'></div>
            </div>
            <div class="circle_detail"></div>
        </li>
        <li>
            <div class="line"></div>
            <div class='circle'>
                <span class='circle_num'></span>
            </div>
            <div class="circle_detail"></div>
        </li>
        <li>
            <div class="line"></div>
            <div class='circle'>
                <span class='circle_num'></span>
            </div>
            <div class="circle_detail"></div>
        </li>
    </ul>
</body>

</html>

css計數器之小案例

技術標籤：css css計數器 counter-reset:counterName //建立或重置計數器 counter-increment:counterName //遞增變數 content:插入生成的內容 //一般和偽類 ::before或::after搭配使用 counter(counterName)或co

【資料分析】小案例之確診病例資料預測(只用於理解預測演算法理解)

import pandas as pd# 用來讀取資料的一個包. from sklearn.linear_model import LinearRegression# 機器學習的包用來做線性迴歸的-> 用咱們的資料幫我們求出一個函式

iOS 小案例demo 之加法計算器

如圖所示：建立按鈕與方法的聯絡：程式碼結構：執行結果：增加控制元件屬性：在ViewController 的compute方法拿到兩個文字框的值，然後把計算結果顯示到最右邊的文字標籤

前端小案例之3D導航欄

技術標籤：前端學習之小案例htmlcss 簡單3D導航欄案例-滑鼠經過盒子時底部盒子旋轉

手寫Netty之多路複用Select小案例

注意:本文只是將上文多路複用器Select、Poll、Epoll區別梳理中提出的概念與Netty中的步驟聯絡起來,方便後面回顧,程式碼中註釋很多,對於大家來說如果不是懷有同樣的目的,不一定有用。

Spring之ioc連線資料庫的一個小案例

用到的包: spring5 spring-test dbutils mysql c3p0 junit 1.配置pom.xml <dependencies> <dependency>

Html+CSS小案例專案：CSS開發小米商城電商產品展示效果

關於電商產品展示，無論是從首頁還是到欄目頁，再到產品的詳情頁，產品展示效果不僅僅是在電商平臺，在很多的企業網站也使用頻繁，今天為大家分享一個HTML+CSS小案例專案：小米電商平臺的商品展示頁面！我們來一起看

java實現傳送email小案例

這是一個小的傳送emai的案例，供大家參考，具體內容如下程式碼裡面放了很多註解，這裡多說無益。

spring 整合Web基於註解的開發使用maven管理的模擬登入的未連線資料庫小案例

spring整合web 本專案中使用到的註解介紹：一：@Repositor 此註解表示Dao層元件在Dao層實現類上面新增用於訪問資料庫，目的是將Dao的實現類新增到IOC容器中交給IOC容器管理。

JavaScript實現電燈開關小案例

今天學習了JavaScript的一些簡單知識，感覺挺有意思，僅僅通過簡簡單單的幾行程式碼就能模擬出生活中的一些應用場景，Interesting。比如我今天要寫的這個模擬電燈開關的小案例。

14 開發小案例-綜合運用

學習了這麼多知識，這節課我們來實踐一下，我們在這節課會設計一個小爬蟲來爬取網所有的免費課資訊。當然，爬取網所有免費課資訊只是一個大的目標而已，具體要實現這個目標我們還需要對劃分步驟，將一個大目標分解成

CSS佈局之盒子模型[一]

每個HTML標籤都會生成一個盒模型，盒模型是正常流佈局非常重要的概念。盒模型由內邊距(padding)+長度(width)+高度(height)+邊框(border)+外邊距(margin)組成。

CSS學習之選擇器優先順序與屬性繼承

CSS學習之選擇器優先順序與屬性繼承選擇器優先順序　　其實選擇器是具有優先順序的，我們來看下面這一組案例：

java-抽象類、介面等實際應用（酒店小案例）

1、酒店小案例某五星級酒店，資金雄厚，要招聘多名員工（經理、廚師、服務員）。入職的員工需要記錄個人資訊（姓名、工號、經理特有獎金屬性）。他們都有自己的工作要做。

CSS定位之BFC背後的神奇原理

BFC已經是一個耳聽熟聞的詞語了，網上有許多關於 BFC 的文章，介紹瞭如何觸發 BFC 以及 BFC 的一些用處（如清浮動，防止 margin 重疊等）。

在spring boot 專案中使用thymeleaf模板；小案例

準備MySql資料庫，表Prereg，IDEA資料庫中的表如下所示： IDEA目錄結構如下：新增thymeleaf依賴：

資料結構之小頂堆的新增，取出及建立

package com.sun.test; import java.util.Arrays; import java.util.Comparator; public class HeapTestmin<E>{

7-2.檔案處理工具之grep案例分析

1.顯示/proc/meminfo檔案中以大小s開頭的行(要求：使用兩種方法) 案例思路分析：首先大小s，我們可以想到-i忽略大小選項，s開頭的行可以用行首錨定符^，用"."代表s後面的任意字元，用"*"表示前

資料處理與分析實戰小案例系列（一）

本節目錄菸草掃碼資料統計實戰一、菸草掃碼資料統計條碼庫.xls 掃碼.xlsx scan_code_stat.py

MapReduce之ReduceJoin案例

@目錄Reduce Join原理案例實操需求分析MR分析MR實現ReduceJoin程式碼實現 Reduce Join原理

css計數器之小案例

相關推薦