发表于大前端专区
2018/04/08 17:49

Layui导航树美化

1、Layui导航树美化 1.1、引入美化的CSS(自定义) /*左侧导航 使用方法:skin: 'sidebar' */ .layui-tree-skin-sidebar li i{ color: rgba(255,255,255,.7); display: none; } .layui-tree-skin-sidebar li a cite{ color: rgba(255,255,255,.7) } .layui-tree-skin-sidebar li .layui-tree-spread{ display: block; position: absolute; right: 30px; } .layui-tree-skin-sidebar li{ line-height: 45px; position: relative; ...

0
0
发表了博客
2019/04/06 14:49

css实现右侧固定宽度,左侧宽度自适应

https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。 这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧? 要实现这种布局,也算比较简单。我们先给出html结构: 1 2 3 4 5 <div id="wrap"> <div id="s...

0
0
发表了博客
2018/12/25 09:42

最近项目需要用到AdminLTE,所以整理一份中文版的小教程

先介绍一下AdminLTE的官方网站:AdminLTE官方网站 和GitHub:AdminLTE的github,可以在上面自行下载。 AdminLTE 是一个完全响应管理模板,主要依赖于 Bootstrap 3、jQuery 1.11+ 这两个框架,插件中使用的基本都是Bootstrap和jQquery插件。 AdminLTE自带JQuery和Bootstrap3框架,所以不需要再另外下载。 starter.html是 AdminLTE 建议用来作为起点的参考示例,在此基础上做开发会快很多,build目录中包含未编译过的JS,CSS文件,d...

0
0
发表了博客
2019/01/03 10:29

[转]css实现左侧宽度自适应,右侧固定宽度

原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应。总之就是一边固定宽度,一边自适应宽度。 一般固定宽度是导航栏,自适应宽度的是主体内容显示区。 所以要实现这种布局,就先给出如下html结构: <div class="container"> <div class="sidebar">导航区域</div> <div class="main">主体内容显示区域</div> </div> <div class="f...

0
0
发表于大前端专区
2017/12/27 19:03

tab切换代码简单写法

<ul class="sidebar-nav"> <li class="sidebar-nav-link"> <a href="javascript:;" class="js-list active" go="./home/home.html" data-m="home"> <i class="am-icon-home sidebar-nav-link-logo"></i> 首页 </a> </li> <li class="sidebar-nav-link"> <a href="javascript:;" class="js-list" go="./list/user.html" data-m="user"> <i class="am-icon-user sidebar-nav-link-logo"></i> 用户 </a> </li> <li class="sidebar-...

0
0
发表了博客
2018/11/18 10:55

vue+elementui搭建后台管理界面(5递归生成侧栏路由)

有一个菜单树,顶层菜单下面有多个子菜单,子菜单下还有子菜单。。。 这时候就要用递归处理 1 定义多级菜单 修改 src/router/index.js 的 / 路由 { path: '/', redirect: '/dashboard', name: 'Container', component: Container, children: [ {path: 'dashboard', name: '首页', component: Dashboard, children: [ {path: 'dashboard1', name: '首页1', component: Dashboar...

0
0
发表了博客
2019/02/27 22:08

Anaconda+django写出第一个web app(十一)

今天我们来学习给页面添加一个Sidebar,根据Sidebar跳转到相应的tutorial。 打开views.py,编辑single_slug函数: def single_slug(request, single_slug): categories = [c.category_slug for c in TutorialCategory.objects.all()] if single_slug in categories: matching_series = TutorialSeries.objects.filter(tutorial_category__category_slug=single_slug) series_urls = {} ...

0
0
2020/11/28 21:40

Thinkphp5后台模板分离

模板分离对于后期代码管理维护是很方便的,只要修改一处,其它相同地方代码也都能改变,省时还省力,因此,我们应该掌握此项技能。 1.现有后台模板文件:index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>index</title> <meta name="description" content="Dashboard"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge...

0
0
2020/09/10 10:19

删除有道云笔记广告位

因为公司不让装云笔记的客户端,平时在公司都用网页版有道云笔记,每次打开发现左下角的广告位把菜单位压缩得很厉害,撸个脚本弄它。 ![image.png](https://oscimg.oschina.net/oscnet/up-c0fd651ab87bdb9488c80524aa7ac65dcf3.png) 脚本内容非常简单: ```js // 删除广告位 $('.sidebar-ft').remove(); // 设置菜单栏底部 $('.sidebar-content.widget-scroller').attr('style', 'bottom: 10px'); ``` 基于这个脚本,可以弄书签...

0
0
发表了博客
2013/03/22 19:06

CSS 可伸缩布局

布局内容为:sidebar+content。 查看效果 左侧sidebar,右侧content;左侧content,右侧sidebar。无论哪种布局,首先想到的会使用到浮动,但是在保证sidebar固定宽度,而content需要使用剩下的全部宽度时,就要稍微动动脑筋了。 查看源码 对于sidebar在左侧的情况,推荐使用第1种方案,第2中方案,你会发现使用了position:relative和z-index:99,这样在兼容ie浏览器时,可能会存在坑,例如z-index的计算问题。...

0
0
发表了博客
2013/07/18 17:08

css媒体查询/jquery mobile根据不同设备设定不同布局

在单一文件下,css定义方式如下: @media (min-width: 1001px) { #sidebar ul li a:after { content: " (" attr(data-email) ")"; font-size: 11px; font-style: italic; color: #666; } } @media (max-width: 1000px) and (min-width: 700px) { #sidebar ul li a:before { content: "Email: "; font-style: italic; color: #666; } } @media (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { #sidebar ul l...

2
5
发表了博客
2019/03/21 16:36

设置移动端适配

在默认设置情况下,Avada主题本身也是可以根据设备情况做到一定程度的自适应。比如: 有Sidebar的会自动的放到页面的最下面的位置,不管Sidebar是左侧还是右侧位置的; Footer不管是3栏还是4栏,会依次的把这些栏展示在页面的最下面的位置; 这样的自适应,虽然网页看上去没有被弄的变形了之类的,但是用户体验其实并不太好。在电脑端的浏览器中,Sidebar和Footer的区域每个页面都展示出来并没什么不妥,但是在手机端这种屏幕面...

0
0
2020/11/27 09:16

父组件传值给子组件

父组件传值给子组件 父组件 father.vue <template> <div class="sidebar_contianer"> <sidebar-item :routerData="transmitData"></sidebar-item> </div> </template> <script> import sidebarItem from './sidebarItem' export default { data(){ return{ transmitData:"传给子组件的值" } }, components:{ sidebarItem } } </script> child.vue 子组件 <template> <el-button type="primary" @click="queryAuthorization" siz...

0
0
发表于大前端专区
2019/09/15 10:07

57、AdminLTE

AdminLTE是一款建立在bootstrap和jquery上的开源的模版主题工具,它提供了一系列响应的,可重复使用的组件,并内置了多个模版页面,同时自适应多种屏幕分辨率,兼容PC和移动端。通过AdminLTE,我们可以快速的创建一个响应式的HTML5网址。AdminLTE框架在页面框架和设计上,有很大的辅助作用,尤其是前端框架设计师,用好AdminLTE不但美观,而且可以免去写很大CSS与JS的工作量。 AdminLTE布局与皮肤: 布局 .wrapper包住body下的所...

0
0
2020/02/21 00:42

laravel模板继承中yield和section的区别

laravel模板继承中,常用的两种方式即为yield和section. @section('sidebar') 这是 master 的侧边栏。 @show section命令正如其名字所暗示的一样是用来定义一个视图区块的,其中往往还有内容,模板继承的时候 yield指令是用来显示指定区块的内容的 当子页面继承布局之后,即可使用 @section 命令将内容注入于布局的 @section 区块中 sidebar 区块利用了 @parent 命令追加布局中的 sidebar 区块中的内容,如果不使用则会覆盖掉布局...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页