收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

css实现侧边栏中树枝的效果

2651人阅读 2020/8/15 18:06 总访问：5182783 评论：0 收藏：0 手机
分类: 前端

效果如下

就是这种侧边栏中间那一块的效果：

具体效果如下：


左边的虚线是利用ul左边框实现的：border-left: 1px dashed #ccccd8


横着的虚线就是利用里边的一个div实现的，也是通过边框来实现的。


这样写后上面和下面都会冒出来一截枝枝，我们利用伪类选择器在上面和下面生成一个元素来挡住冒出来的枝枝就行了

具体完成的代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         body {
  10.             margin: 0px;
  11.             padding: 0px;
  12.         }
  14.         .aside-content {
  15.             max-height: 238px;
  16.             overflow: hidden;
  17.             -webkit-box-sizing: border-box;
  18.             box-sizing: border-box;
  19.             padding: 12px 16px 16px 16px;
  20.             position: relative;
  21.         }
  23.         /* 使用伪类选择器凭空产生一个div，挡住上面冒出来的枝枝，
  24.            注意要通过left,和top调整到当好重叠在上面冒出来的枝枝位置才能挡住，也就是要和aside-content中
  25.            padding设置左上距离一致才行
  26.         */
  27.         .aside-content::before {
  28.             display: block;
  29.             position: absolute;
  30.             content: '';
  31.             width: 1px;
  32.             height: 12px;
  33.             background: #fff;
  34.             left: 16px;
  35.             top: 12px;
  36.         }
  38.         /* 使用伪类选择器凭空产生一个div，挡住下面冒出来的枝枝，
  39.         */
  40.         .aside-content::after {
  41.             display: block;
  42.             position: absolute;
  43.             content: '';
  44.             width: 1px;
  45.             height: 12px;
  46.             background: #fff;
  47.             left: 16px;
  48.             bottom: 16px;
  49.         }
  51.         .myul {
  52.             padding-inline-start: 0px;
  53.             margin-block-start: 0px;
  54.             margin-block-end: 0px;
  55.             padding: 0;
  56.             margin: 0;
  57.             border-left: 1px dashed #ccccd8;
  58.             list-style: none;
  59.         }
  61.         .myul li {
  62.             display: -webkit-box;
  63.             display: -ms-flexbox;
  64.             display: flex;
  65.             -webkit-box-pack: justify;
  66.             -ms-flex-pack: justify;
  67.             justify-content: space-between;
  68.             -webkit-box-align: center;
  69.             -ms-flex-align: center;
  70.             align-items: center;
  71.             margin-bottom: 16px;
  72.         }
  74.         /* 最后一个li去掉底部的间距 */
  75.         .aside-content ul li:nth-last-child(1) {
  76.             margin-bottom: 0;
  77.         }
  79.         .special-column-name {
  80.             display: -webkit-box;
  81.             display: -ms-flexbox;
  82.             display: flex;
  83.             -webkit-box-align: center;
  84.             -ms-flex-align: center;
  85.             align-items: center;
  86.             color: #555666;
  87.             font-size: 14px;
  88.             line-height: 24px;
  89.             -webkit-box-flex: 1;
  90.             -ms-flex: 1;
  91.             flex: 1;
  92.             overflow: hidden;
  93.             position: relative;
  94.         }
  96.         /* 利用div实现横着的枝枝效果 */
  97.         .special-column-bar {
  98.             width: 12px;
  99.             height: 1px;
  100.             border-bottom: 1px dashed #ccccd8;
  101.             -ms-flex-negative: 0;
  102.             flex-shrink: 0;
  103.         }
  104.     </style>
  105. </head>
  107. <body>
  108.     <div class="aside-content">
  109.         <ul class="myul">
  110.             <li><a class="special-column-name">
  111.                     <div class="special-column-bar"></div>查看视频
  112.                 </a></li>
  113.             <li><a class="special-column-name">
  114.                     <div class="special-column-bar"></div>资料下载
  115.                 </a></li>
  116.             <li><a class="special-column-name">
  117.                     <div class="special-column-bar"></div>查看视频
  118.                 </a></li>
  119.             <li><a class="special-column-name">
  120.                     <div class="special-column-bar"></div>资料下载
  121.                 </a></li>
  122.             <li><a class="special-column-name">
  123.                     <div class="special-column-bar"></div>查看视频
  124.                 </a></li>
  125.         </ul>
  126.     </div>
  128. </body>
  130. </html>

使用vue element ui实现一个这种侧边栏效果

在原来项目里边写，结构就不改了，前面去使用组件循环去生成里边的内容的，情况比较多，我这里简化一下。

里边的组件
默认的里边比较复制要处理各种情况，各种类型的数据显示下载这些，这里简化到非常的简单只显示一下就行了,组件里边就是一个li

  1. <template>
  2.   <li>
  3.     <a class="special-column-name">
  4.       <div class="special-column-bar"></div>实验资料下载哇
  5.     </a>
  6.   </li>
  7. </template>
  9. <script>
  10. export default {
  11.     data() {
  12.         return {
  13.         }
  14.     },
  15.     mounted() {
  16.     },
  17.     // 组件方法
  18.     methods: {
  19.     }
  20. }
  21. </script>
  24. <style  lang="scss" scoped>
  25. .special-column-name {
  26.   display: -webkit-box;
  27.   display: -ms-flexbox;
  28.   display: flex;
  29.   -webkit-box-align: center;
  30.   -ms-flex-align: center;
  31.   align-items: center;
  32.   color: #555666;
  33.   font-size: 14px;
  34.   line-height: 24px;
  35.   -webkit-box-flex: 1;
  36.   -ms-flex: 1;
  37.   flex: 1;
  38.   overflow: hidden;
  39.   position: relative;
  40. }
  42. /* 利用div实现横着的枝枝效果 */
  43. .special-column-bar {
  44.   width: 22px;
  45.   height: 1px;
  46.   border-bottom: 1px dashed #ccccd8;
  47.   -ms-flex-negative: 0;
  48.   flex-shrink: 0;
  49. }
  50. </style>

引入组件：

  1. import CourseSourceItemNarrowConcise from './components/lab-course/course-source-item-narrow-concise.vue'
  3. export default {
  4.   components: {
  5.     CourseSourceItemNarrowConcise,
  6.   }
  7.  }

引入组件后循环生成：

  1. <el-card class="box-card">
  2.   <div slot="header" class="clearfix box-header">
  3.     <span class="box-title"><img src="../../assets/imgs/labroom/course-icon.png">实验资料</span>
  4.   </div>
  5.   <div class="aside-content">
  6.     <ul class="labroom_information">
  7.       <CourseSourceItemNarrowConcise v-for="(it, sindex) in resources" :r-type="it.recourseType + ''"
  8.         :item-data="it" :chapter="chapter" :key="sindex" class="box-item" />
  9.     </ul>
  10.   </div>
  11. </el-card>

父组件哪里加入样式：

  2. <!-- 实验资料那一块的效果，包含树枝枝 -->
  3. <style lang="scss" scoped>
  4. .aside-content {
  5.   max-height: 238px;
  6.   overflow: hidden;
  7.   -webkit-box-sizing: border-box;
  8.   box-sizing: border-box;
  9.   padding: 0px 0px 0px 0px;
  10.   position: relative;
  11. }
  13. /* 使用伪类选择器凭空产生一个div，挡住上面冒出来的枝枝，
  14.            注意要通过left,和top调整到当好重叠在上面冒出来的枝枝位置才能挡住，也就是要和aside-content中
  15.            padding设置左上距离一致才行
  16.         */
  17. .aside-content::before {
  18.   display: block;
  19.   position: absolute;
  20.   content: '';
  21.   width: 1px;
  22.   height: 12px;
  23.   background: #fff;
  24.   left: 0px;
  25.   top: 0px;
  26. }
  28. /* 使用伪类选择器凭空产生一个div，挡住下面冒出来的枝枝，
  29.         */
  30. .aside-content::after {
  31.   display: block;
  32.   position: absolute;
  33.   content: '';
  34.   width: 1px;
  35.   height: 12px;
  36.   background: #fff;
  37.   left: 0px;
  38.   bottom: 0px;
  39. }
  41. .labroom_information {
  42.   padding-inline-start: 0px;
  43.   margin-block-start: 0px;
  44.   margin-block-end: 0px;
  45.   padding: 0;
  46.   margin: 0;
  47.   border-left: 1px dashed #ccccd8;
  48.   list-style: none;
  49. }
  51. .labroom_information li {
  52.   display: -webkit-box;
  53.   display: -ms-flexbox;
  54.   display: flex;
  55.   -webkit-box-pack: justify;
  56.   -ms-flex-pack: justify;
  57.   justify-content: space-between;
  58.   -webkit-box-align: center;
  59.   -ms-flex-align: center;
  60.   align-items: center;
  61.   margin-bottom: 16px;
  62. }
  64. /* 最后一个li去掉底部的间距 */
  65. .labroom_information li:nth-last-child(1) {
  66.   margin-bottom: 0;
  67. }
  68. </style>
增加图标的显示效果

代码如下，只调整组件里边的一点结构和样式就行了，js里边留下的部分处理逻辑的不用管：

  1. <template>
  2.   <li>
  3.     <a class="special-column-name">
  4.       <div class="special-column-bar"></div>
  5.       <img :src="require('@/assets/imgs/labroom/' + titleImgs[rType])">
  6.       <!-- <span> {{ itemText[rType]['bntText'] }}</span> -->
  7.       <span class="describle" :title="itemText[rType]['bntText']+'-'+itemData.name"> {{ itemText[rType]['concise'] }}:{{ itemData.name }}</span>
  8.     </a>
  9.   </li>
  10. </template>
  12. <script>
  13. import CpProgress from '@/components/cp-progress/cp-progress.vue'
  14. export default {
  15.   name: 'CourseSourceItem',
  16.   components: {
  17.     CpProgress
  18.   },
  19.   props: {
  20.     rType: {
  21.       type: String,
  22.       default: ''
  23.     },
  24.     itemData: {
  25.       type: Object,
  26.       default: () => { }
  27.     },
  28.     chapter: {
  29.       type: Object,
  30.       default: () => { }
  31.     }
  32.   },
  33.   data() {
  34.     return {
  35.       titleImgs: {
  36.         '0': 'course-video-1.png',
  37.         '1': 'course-video-1.png',
  38.         '2': 'rar.png',
  39.         '3': 'course-exam-paper.png',
  40.         '4': 'course-courseware.png',
  41.         '5': 'course-exp.png'
  42.       },
  43.       itemText: {
  44.         '1': {
  45.           // bntText: '观看实验视频',
  46.           bntText: '观看视频',
  47.           concise: "视频",
  48.           btnColor: '#3699FF',
  49.           lab: '视频'
  50.         },
  51.         '2': {
  52.           // bntText: '素材资料下载',
  53.           bntText: '素材下载',
  54.           concise: "素材",
  55.           btnColor: '#3699FF',
  56.           lab: '素材'
  57.         },
  58.         '3': {
  59.           bntText: '试卷下载',
  60.           concise: "试卷",
  61.           btnColor: '#687DF2',
  62.           lab: '试卷'
  63.         },
  64.         '4': {
  65.           // bntText: '课件资料下载',
  66.           bntText: '课件下载',
  67.           concise: "课件",
  68.           btnColor: '#FF6935',
  69.           lab: '课件'
  70.         },
  71.         '5': {
  72.           bntText: '进入学习',
  73.           concise: "学习",
  74.           btnColor: '#3699FF',
  75.           lab: ''
  76.         }
  77.       },
  78.       linearColors: [{
  79.         v: 100,
  80.         s: '#3699FF',
  81.         e: '#3699FF'
  82.       }]
  83.     }
  84.   },
  85.   mounted() {
  86.     console.log(this.itemData)
  87.   },
  88.   methods: {
  89.     btnActon() {
  90.       const _self = this
  91.       console.log(_self.itemData)
  92.       if (_self.rType === '1') { // 看视频
  93.         _self.$utils.openwindow(`/#/sublab/watch-the-video/${_self.$route.params.courseid}/${_self.chapter.id}/${_self.itemData.urlID}`, '视频播放')
  94.       } else if (_self.rType === '2' || _self.rType === '4' || _self.rType === '3') {
  95.         this.$utils.downloadOssFil(_self.itemData.urlID, _self.itemData.name)
  96.         // 作业
  97.       } else if (_self.rType === '5') { // 查看实验报告
  98.         _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()}`, '实验详情')
  99.       }
  100.     },
  101.     // 下载文件
  102.     downLoadFile(id) {
  103.       var self = this
  104.       self.$http.get('/oss/api/SmartFiles/GetFileUrl', {
  105.         fileId: id
  106.       }).then(res => {
  107.         if (res.success) {
  108.           window.location.href = res.data.url
  109.         } else {
  110.           self.$message({
  111.             type: 'error',
  112.             message: res.msg
  113.           })
  114.         }
  115.       })
  116.     }
  117.   }
  118. }
  119. </script>
  121. <style  lang="scss" scoped>
  122. .special-column-name {
  123.   display: -webkit-box;
  124.   display: -ms-flexbox;
  125.   display: flex;
  126.   -webkit-box-align: center;
  127.   -ms-flex-align: center;
  128.   align-items: center;
  129.   color: #555666;
  130.   font-size: 14px;
  131.   line-height: 24px;
  132.   -webkit-box-flex: 1;
  133.   -ms-flex: 1;
  134.   flex: 1;
  135.   overflow: hidden;
  136.   position: relative;
  137.   cursor: pointer;
  138. }
  140. /* 利用div实现横着的枝枝效果 */
  141. .special-column-bar {
  142.   width: 16px;
  143.   height: 1px;
  144.   border-bottom: 1px dashed #ccccd8;
  145.   -ms-flex-negative: 0;
  146.   flex-shrink: 0;
  147. }
  150. .special-column-name img {
  151.   width: 24px;
  152.   height: 24px;
  153.   border: 1px solid #e8e8ed;
  154.   border-radius: 2px;
  155.   display: block;
  156.   margin-right: 8px;
  157.   margin-left: 4px;
  158. }
  160. // 内容超出显示省略号
  161. .special-column-name .describle {
  162.   overflow: hidden;
  163.   text-overflow: ellipsis;
  164.   white-space: nowrap;
  165. }
  166. </style>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

css弹性盒子，flex布局
css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

css图片和文字对齐问题
文字和图片写到一排经常会出现对不齐的问题 这样感觉图片会上来一点没有和文字对齐，如下图 但是如果修改下html结...

css实现简单矩形对话框
在前端做项目时，我们可能会遇到写对话框的需求，这次做视频会议页面就遇到了，记录下日后有个参照。//网页部分 &lt;divcla...

如何修改css中存在的element.style内联样式
改腾讯地图的时候调整了下样式，发现样式一直存在问题，修改style里面的值，一点用都没有，html中这个值还找不到是在哪里出...

珍藏！！ JS css不传之秘集合
&lt;!--其中5指每隔5秒刷新一次页面--&gt; &lt;metahttp-equiv=&quot;refresh&quot;content=&quot;5&quot;&gt; =========...

css中单位pxem，rem和vh/vw的理解
&gt;px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字...

DIV+css网页布局常用的一些基础知识整理
一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print...

css相对定位与绝对定位
一般相对定位和绝对定位可以配合起来使用 例如实现如下的效果 只需要在外层div设置为相对定位，在内部设置为绝对定位就...

修改了css后，让浏览器从缓存中更新
当我们修改了css后，如果不做一些操作，浏览器是不会自动更新我们的样式文件的。除非是过期或者用户手动刷新清理缓存等。所...

css定位的简单运用
父容器使用相对定位position: relative子容器使用绝对定位position: relative这样就可以子容器相对父容器定位了，可以写一...

jscss异步加载
有些时候为了效率，我们需要js与css能够异步加载方法1：直接在后面加一个async的关键字&lt;scriptsrc=&quot;~/lib/jquery/d...

css3样式学习代码
上代码！上代码！不说了&lt;!DOCTYPEhtml&gt; &lt;htmllang=&quot;en&quot;&gt; &lt;head&gt; &lt;metacharset=&quot;UT...

css实现动画效果案列:冒泡案列
css实现动画效果案列:冒泡案列效果图:代码:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;...

html/css样式
代码： &lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;/&gt; &lt;title&gt...

css div水平居 。文字垂直居中 。flex的方式实现div的垂直与水平居中。布局模板
DIV等元素水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样：效果：可以看到这个div已经居中了但是...

使用jquery操作元素的css样式（获取、修改等等）
使用jquery操作元素的css样式（获取、修改等等） //1、获取和设置样式 $(&quot;#tow&quot;).attr(&quot;class&quot;)...