TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
css实现侧边栏中树枝的效果
858
人阅读
2020/8/15 18:06
总访问:
3966814
评论:
0
收藏:
0
手机
分类:
前端
[TOC] #### 效果如下 就是这种侧边栏中间那一块的效果: <img src="https://img.tnblog.net/arcimg/aojiancc2/5685364bbb714d63989b464e6c801cea.png" width="360px" height="auto"> 具体效果如下: <img src="https://img.tnblog.net/arcimg/aojiancc2/f06a047ac8394468a764f4760db49ced.png" style="width:266px;height:auto;"> tn2>左边的虚线是利用ul左边框实现的:`border-left: 1px dashed #ccccd8` tn4>横着的虚线就是利用里边的一个div实现的,也是通过边框来实现的。 tn5>这样写后上面和下面都会冒出来一截枝枝,我们利用伪类选择器在上面和下面生成一个元素来挡住冒出来的枝枝就行了 **具体完成的代码如下:** ``` <!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> body { margin: 0px; padding: 0px; } .aside-content { max-height: 238px; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 12px 16px 16px 16px; position: relative; } /* 使用伪类选择器凭空产生一个div,挡住上面冒出来的枝枝, 注意要通过left,和top调整到当好重叠在上面冒出来的枝枝位置才能挡住,也就是要和aside-content中 padding设置左上距离一致才行 */ .aside-content::before { display: block; position: absolute; content: ''; width: 1px; height: 12px; background: #fff; left: 16px; top: 12px; } /* 使用伪类选择器凭空产生一个div,挡住下面冒出来的枝枝, */ .aside-content::after { display: block; position: absolute; content: ''; width: 1px; height: 12px; background: #fff; left: 16px; bottom: 16px; } .myul { padding-inline-start: 0px; margin-block-start: 0px; margin-block-end: 0px; padding: 0; margin: 0; border-left: 1px dashed #ccccd8; list-style: none; } .myul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 16px; } /* 最后一个li去掉底部的间距 */ .aside-content ul li:nth-last-child(1) { margin-bottom: 0; } .special-column-name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #555666; font-size: 14px; line-height: 24px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; position: relative; } /* 利用div实现横着的枝枝效果 */ .special-column-bar { width: 12px; height: 1px; border-bottom: 1px dashed #ccccd8; -ms-flex-negative: 0; flex-shrink: 0; } </style> </head> <body> <div class="aside-content"> <ul class="myul"> <li><a class="special-column-name"> <div class="special-column-bar"></div>查看视频 </a></li> <li><a class="special-column-name"> <div class="special-column-bar"></div>资料下载 </a></li> <li><a class="special-column-name"> <div class="special-column-bar"></div>查看视频 </a></li> <li><a class="special-column-name"> <div class="special-column-bar"></div>资料下载 </a></li> <li><a class="special-column-name"> <div class="special-column-bar"></div>查看视频 </a></li> </ul> </div> </body> </html> ``` #### 使用vue element ui实现一个这种侧边栏效果 <img src="https://img.tnblog.net/arcimg/aojiancc2/1a59f6615db142b9b6751001c4276f84.png" width="360px" height="auto"> 在原来项目里边写,结构就不改了,前面去使用组件循环去生成里边的内容的,情况比较多,我这里简化一下。 **里边的组件** 默认的里边比较复制要处理各种情况,各种类型的数据显示下载这些,这里简化到非常的简单只显示一下就行了,组件里边就是一个li ``` <template> <li> <a class="special-column-name"> <div class="special-column-bar"></div>实验资料下载哇 </a> </li> </template> <script> export default { data() { return { } }, mounted() { }, // 组件方法 methods: { } } </script> <style lang="scss" scoped> .special-column-name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #555666; font-size: 14px; line-height: 24px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; position: relative; } /* 利用div实现横着的枝枝效果 */ .special-column-bar { width: 22px; height: 1px; border-bottom: 1px dashed #ccccd8; -ms-flex-negative: 0; flex-shrink: 0; } </style> ``` **引入组件:** ``` import CourseSourceItemNarrowConcise from './components/lab-course/course-source-item-narrow-concise.vue' export default { components: { CourseSourceItemNarrowConcise, } } ``` **引入组件后循环生成:** ``` <el-card class="box-card"> <div slot="header" class="clearfix box-header"> <span class="box-title"><img src="../../assets/imgs/labroom/course-icon.png">实验资料</span> </div> <div class="aside-content"> <ul class="labroom_information"> <CourseSourceItemNarrowConcise v-for="(it, sindex) in resources" :r-type="it.recourseType + ''" :item-data="it" :chapter="chapter" :key="sindex" class="box-item" /> </ul> </div> </el-card> ``` **父组件哪里加入样式:** ``` <!-- 实验资料那一块的效果,包含树枝枝 --> <style lang="scss" scoped> .aside-content { max-height: 238px; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0px 0px 0px 0px; position: relative; } /* 使用伪类选择器凭空产生一个div,挡住上面冒出来的枝枝, 注意要通过left,和top调整到当好重叠在上面冒出来的枝枝位置才能挡住,也就是要和aside-content中 padding设置左上距离一致才行 */ .aside-content::before { display: block; position: absolute; content: ''; width: 1px; height: 12px; background: #fff; left: 0px; top: 0px; } /* 使用伪类选择器凭空产生一个div,挡住下面冒出来的枝枝, */ .aside-content::after { display: block; position: absolute; content: ''; width: 1px; height: 12px; background: #fff; left: 0px; bottom: 0px; } .labroom_information { padding-inline-start: 0px; margin-block-start: 0px; margin-block-end: 0px; padding: 0; margin: 0; border-left: 1px dashed #ccccd8; list-style: none; } .labroom_information li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 16px; } /* 最后一个li去掉底部的间距 */ .labroom_information li:nth-last-child(1) { margin-bottom: 0; } </style> ``` ##### 增加图标的显示效果 <img src="https://img.tnblog.net/arcimg/aojiancc2/e8b030d43a6541159e55c7c6d433a13f.png" width="360px" height="auto"> 代码如下,只调整组件里边的一点结构和样式就行了,js里边留下的部分处理逻辑的不用管: ``` <template> <li> <a class="special-column-name"> <div class="special-column-bar"></div> <img :src="require('@/assets/imgs/labroom/' + titleImgs[rType])"> <!-- <span> {{ itemText[rType]['bntText'] }}</span> --> <span class="describle" :title="itemText[rType]['bntText']+'-'+itemData.name"> {{ itemText[rType]['concise'] }}:{{ itemData.name }}</span> </a> </li> </template> <script> import CpProgress from '@/components/cp-progress/cp-progress.vue' export default { name: 'CourseSourceItem', components: { CpProgress }, props: { rType: { type: String, default: '' }, itemData: { type: Object, default: () => { } }, chapter: { type: Object, default: () => { } } }, data() { return { titleImgs: { '0': 'course-video-1.png', '1': 'course-video-1.png', '2': 'rar.png', '3': 'course-exam-paper.png', '4': 'course-courseware.png', '5': 'course-exp.png' }, itemText: { '1': { // bntText: '观看实验视频', bntText: '观看视频', concise: "视频", btnColor: '#3699FF', lab: '视频' }, '2': { // bntText: '素材资料下载', bntText: '素材下载', concise: "素材", btnColor: '#3699FF', lab: '素材' }, '3': { bntText: '试卷下载', concise: "试卷", btnColor: '#687DF2', lab: '试卷' }, '4': { // bntText: '课件资料下载', bntText: '课件下载', concise: "课件", btnColor: '#FF6935', lab: '课件' }, '5': { bntText: '进入学习', concise: "学习", btnColor: '#3699FF', lab: '' } }, linearColors: [{ v: 100, s: '#3699FF', e: '#3699FF' }] } }, mounted() { console.log(this.itemData) }, methods: { btnActon() { const _self = this console.log(_self.itemData) if (_self.rType === '1') { // 看视频 _self.$utils.openwindow(`/#/sublab/watch-the-video/${_self.$route.params.courseid}/${_self.chapter.id}/${_self.itemData.urlID}`, '视频播放') } else if (_self.rType === '2' || _self.rType === '4' || _self.rType === '3') { this.$utils.downloadOssFil(_self.itemData.urlID, _self.itemData.name) // 作业 } else if (_self.rType === '5') { // 查看实验报告 _self.$utils.openwindow(`/#/sublab/learning-lab/${_self.$route.params.courseid}/${_self.chapter.id}/${_self.itemData.labInfo.id}?classid=${this.$route.query.classID}&t=${new Date().getMilliseconds()}`, '实验详情') } }, // 下载文件 downLoadFile(id) { var self = this self.$http.get('/oss/api/SmartFiles/GetFileUrl', { fileId: id }).then(res => { if (res.success) { window.location.href = res.data.url } else { self.$message({ type: 'error', message: res.msg }) } }) } } } </script> <style lang="scss" scoped> .special-column-name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #555666; font-size: 14px; line-height: 24px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; position: relative; cursor: pointer; } /* 利用div实现横着的枝枝效果 */ .special-column-bar { width: 16px; height: 1px; border-bottom: 1px dashed #ccccd8; -ms-flex-negative: 0; flex-shrink: 0; } .special-column-name img { width: 24px; height: 24px; border: 1px solid #e8e8ed; border-radius: 2px; display: block; margin-right: 8px; margin-left: 4px; } // 内容超出显示省略号 .special-column-name .describle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}