前端代码片段总结——统计数字展示栏
分类:计算机 | 前端 | 综合 447
更新:2021-11-13 19:17:42编辑
1 效果图
2 代码
html代码:
<div class="statistics_body">
<!-- 文章总数 -->
<div class="div_articlecount">
<div class="div_articlecount_top">
<span id="articleCount">111</span>
<span id="articleUnit">篇</span>
</div>
<div class="div_articlecount_bottom">文章总数</div>
</div>
<!-- 今日访问量统计 -->
<div class="div_todayvisitcount">
<div class="div_articlecount_top">
<span id="articleCount">10000</span>
<span id="articleUnit">次</span>
</div>
<div class="div_articlecount_bottom">今日访问量(pv)</div>
</div>
</div>
css代码:
<style>
.statistics_body {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
padding: 10px;
}
.div_articlecount {
width: 150px;
height: 100px;
padding: 10px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 2px 4px 0 rgb(54 58 80 / 32%);
border-radius: 8px;
}
.div_todayvisitcount {
width: 170px;
height: 100px;
padding: 10px;
margin-left: 20px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 2px 4px 0 rgb(54 58 80 / 32%);
border-radius: 8px;
}
.div_articlecount_top {
font-size: 2rem;
font-weight: 700;
font-family: Arial;
}
.div_articlecount_top #articleCount {
color: #24acf2;
}
.div_articlecount_top #articleUnit {
font-size: 1.2rem;
opacity: 0.7;
font-weight: 700;
margin-left: 0.3rem;
}
.div_articlecount_bottom {
margin-top: 15px;
font-size: 1rem;
font-weight: 500;
color: #787a7d;
}
</style>
猿导航
阅读排行榜
- 1three.js加载3D瓦片和3dtiles数据生成交互式地图的开源项目7946
- 2vue和el-table使用经验-如何刷新表格数据7540
- 3uni-app使用经验—vue页面和html页面如何互相调用接口并传参3671
- 4Spring学习经验—@ResponseBody注解的使用说明2197
- 5nuxt.js项目中如何添加和使用全局变量2183
- 6如何用批处理命令(bat脚本)启动和停止windows服务2139
- 7Intellij IDEA下的版本控制VCS的启用与关闭2037
- 8Druid异常解决经验—java.sql.SQLException url not set2014
- 9nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数2002
- 10解决SpringBoot使用maven下载不了jar包的问题1965
- 11mybatis使用经验——mybatis-spring-boot-starter和mybatis的版本对应关系表(持续更新~)1860
- 12在Nuxt.js项目的head中引用外部js文件1780
- 13linux如何成功地离线安装docker1774
- 14Nuxt.js项目实现路由鉴权和用户登录1750
- 15软件项目管理——详细设计说明书模板11718