css实现ol顺序排列指示牌导航牌效果代码

代码语言:html

所属分类:菜单导航

代码描述:css实现ol顺序排列指示牌导航牌效果代码

代码标签: 顺序 排列 指示牌 导航 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://use.fontawesome.com/releases/v5.15.3/css/all.css");
        
        *,
        *::before,
        *::after {
        	margin: 0;
        	padding: 0;
        	box-sizing: border-box;
        }
        
        body {
        	min-height: 100vh;
        	font-size: 20px;
        	display: flex;
        	flex-direction: column;
        	justify-content: center;
        	align-items: center;
        	padding: 2em;
        	font-family: sans-serif;
        	background-color: #f0f0f0;
        }
        h1 {
        	margin-bottom: 1em;
        	text-align: center;
        }
        #dir-sign {
        	list-style-type: none;
        	counter-reset: step;
        	display: flex;
        	flex-direction: column;
        	gap: 1.5em;
        	position: relative;
        	padding-top: 2.5em;
        	padding-bottom: 7.5em;
        }
        #dir-sign::be.........完整代码请登录后点击上方下载按钮下载查看

网友评论0