基于原生js和flex布局开发侧边栏

2021-04-30 08:27

阅读：599

标签：http ons lin for hid jpg info nload width

技术图片

css:

 1 body{
 2     padding: 0 10%;
 3 }
 4 ul,li{
 5     margin: 0;
 6     padding: 0;
 7     list-style: none;
 8 }
 9 .flex-box{
10     display: flex;
11     border: 1px solid;
12 }
13 .flex-left{
14     width: 200px;
15     text-align: center;
16     background: peru;
17 }
18 .flex-right{
19     flex-grow: 1;
20 }
21 .flex-left li{
22     height: 60px;
23     line-height: 60px;
24     font-size: 18px;
25     border-bottom: 1px solid;
26 }
27 .flex-left li:last-child{
28     border-bottom: none;
29 }
30 .active{
31     background: #8b8bde;
32 }
33 .hide{
34     display: none;
35 }

html:

 1 class="flex-box">
 2     class="flex-left">
 3         
 4             class="li-node active">标题一
 5             class="li-node">标题二
 6             class="li-node">标题三
 7             class="li-node">标题四
 8         
 9     
10     class="flex-right">
11         class="div-node">页面1
12         class="div-node hide">页面2
13         class="div-node hide">页面3
14         class="div-node hide">页面4
15     
16

js:

基于原生js和flex布局开发侧边栏

标签：http ons lin for hid jpg info nload width

原文地址：https://www.cnblogs.com/bushan/p/12198218.html

上一篇：HTML-页面图片加载报错403，但可以单独打开图片的问题解决

下一篇：js Array to Tree

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：基于原生js和flex布局开发侧边栏
文章链接：http://soscw.com/index.php/essay/80328.html

亲，登录后才可以留言！

基于原生js和flex布局开发侧边栏

评论

热门文章

推荐文章

最新文章

置顶文章