高度灵活可定制的PC布局：头部按钮、左边栏、右边栏、状态栏

最新推荐文章于 2021-03-26 14:36:46 发布
最新推荐文章于 2021-03-26 14:36:46 发布
阅读量381 收藏
点赞数
分类专栏： Cabloy 文章标签： nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/piaoshu_cn/article/details/105875517
版权

什么是自适应布局

CabloyJS提供了一套布局管理器，实现自适应布局

关于自适应布局的概念，强烈建议先阅读以下两篇文章：

  1. 自适应布局：pc = mobile + pad

  2. 自适应布局：视图尺寸

什么是PC布局

CabloyJS内置了一套Mobile布局和PC布局。其中，PC布局提供了更丰富的布局元素和交互体验。

PC布局是由模块a-layoutpc实现的，如果对底层的实现机制感兴趣，可以直接查看模块a-layoutpc的源码，这里重点说明PC布局的风格，以及如何定制，如何进行二次开发

演示

1. 头部按钮

在这里插入图片描述

2. 左边栏

在这里插入图片描述

3. 右边栏

在这里插入图片描述

4. 状态栏（左）

在这里插入图片描述

5. 状态栏（右）

在这里插入图片描述

zhennann
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cocoscreator不全屏，显示状态栏设置方法
09-27
关于cocoscreator如何设置不全屏并且显示状态栏的具体方法(详细到傻瓜式操作)，适用于像我这种cocoscreator的小白，这种问题大神都不屑回答
纯代码为wordpress网站侧边栏增加好看的按钮
ibibao的博客
08-25 531
我们平时在建站的过程中，经常会遇到需要用按钮对超链接进行美化的需求。但是有的朋友只是偶尔使用一次，不想为网站安装太多插件增加服务器的负担，那么其实我们还可以使用纯代码为网站添加好看的按钮。方法比较简陋，但是可以实现给wordpress侧边栏添加按钮目的就可以了，有精力的朋友可以使用CSS再美化一下。我这里也收集了一些比较好的在线按钮生成器网站，大家可以直接在网站生成后复制代码到自己的网站上使用即可。比如本站侧边栏的这几个按钮，就是用简单的代码做出来的。
pc端常见布局样式总结（针对常见的）
weixin_30354675的博客
02-13 1198
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 宽度适配 */ ...
React Navigation 基础 6 : 头部按钮
Details Inside Spring
03-23 2870
现在我们已经知道了如何定制屏幕头部，现在来让他有点感觉！夸大了哈，我们只是想让它能够按照良好定义的方式响应我们的触碰。 向头部增加一个按钮 和头部交互最常见的方式是点击头部标题左边或者右边的按钮。现在，我们就向头部右边增加一个按钮(整个屏幕上最不容易被触碰到的地方之一，具体取决于指头和屏幕的大小，但是通常我们会把按钮放在这里)。 class HomeScreen extends Re...
PC端网页布局——世纪佳缘（三）头部
tingyu_的博客
07-27 591
来看头部，做好的效果图如下： 接下来就进入主题吧~~ 先来分析一下： 有两张图片，一个填写账号密码和登录按钮的登录框，其他登录方式，（因为海外登录方式与前面纯图标的不太一样，这里又是只做了个大致的样式，所以就把海外用户登录与忘记密码做在了一个大div块中，大家可以按照自己的想法自行修改） 很明显，除了图片，后面的内容做在了一个大块中，其中每一个小块又可以使用div来做，而div是块标签，要想一行显示，就需要使用浮动了 初步做好长这样： 去掉灰色（body的颜色）和粉色（头部颜色）之后
HTML+css+jQuery实现导航栏效果--pc端
06-15
HTML+css+jQuery实现导航栏效果--pc端 适合前端，下载即可使用。 $(function(){ // 鼠标移入事件 $('.nav>li').mousemove(function(){ $(this).addClass('active').siblings('li').removeClass('active') //...
微信小程序教程系列之设置标题栏和导航栏（7）
11-28
微信小程序标题栏和导航栏的设置方法，具体内容如下 设置标题栏 标题栏window 在app.json文件里面，通过window对象里面的属性进行设置 示例： app.json： 运行： 设置导航栏 导航栏TabBar 如果我们的小程序是一...
iOS去除Webview键盘顶部工具栏的方法
01-06
左边有两个上下按钮，右边有一个Done/完成按钮。这是用来切换输入框的，就像 PC 上按Tab键可以切换输入框一样。 为了让 App 中嵌入的 H5 更接近 Native，咱们可以去掉它。 UIWebView UIWebView，可以使用[self ...
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
11-21
PC端 移动端 代码 <!DOCTYPE html> <html> <head> <title>左侧导航</title> <meta charset="utf-8"> [removed][removed] <meta name="viewport" content="width=device-...
vue中将按钮放在右边_在Windows中将窗口控制按钮移到左侧
cum44153的博客
10-06 6489
vue中将按钮放在右边Recently Ubuntu joined Mac by moving the Minimize, Maximize, and Close Buttons to the left side of app windows. If this is a feature that you would also like to have in Windows, then Leftsi...
pc端常见布局(-)
dishujuan8959的博客
03-16 292
1.固定宽度三列布局 见新浪微博首页 　　html结构如下 <div class="wrapper"> /**最外层容器元素**/ <div class="primary"> /**右侧主要内容区域**/ <div class="primary"> /**主要内容区域的主要...
两栏布局右侧自适应+左右拖动改变两栏宽度
萌萌的It人 www.itmmd.com
06-18 3747
今天一下午的学习成果，分享一下，欢迎高手指教。 首先是布局，左右两栏布局，中间留出可拖动的地方。布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 html> 3 head>
自研海外PCDN系统技术架构与演进
LiveVideoStack
02-07 4334
Photo byNick WehrlifromPexels本文来自小溪流科技首席架构师张道远在LiveVideoStackCon 2019深圳站上的演讲，演讲内容主要涉及PCDN海...
电商头部导航栏滑动效果
xiao白的博客
04-19 865
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>menu</title> <meta name="viewport" content="width=device-width,initial-scale=1...
Niushop PC端顶部导航菜单设置
chiyouchan7161的博客
06-26 988
PC端顶部导航菜单设置 二、导航设置 (店铺导航能够有效帮助粉丝跳转到各个关键页面，是整个店铺的“指南针”) 1.导航列表显示项包括导航名称、链接地址、所属类型、是否显示、创建时间、排序、单个导航的修改和删除操作。其中，点击每个导航名称，会在浏览器新标签页中打开前台对应的页面。点击修改，...
html 头部样式
xuhuanchao的专栏
08-30 953
无标题文档 .head li{ FLOAT: left; WIDTH: 77px; HEIGHT: 38px; TEXT-ALIGN: center; list-style:none;  } A{ text-decoration:none; }
pc端产品设计
weixin_54799532的博客
03-26 1760
一、pc端和移动端的区别 1、交互不一样 2、使用场景不一样 pc：室内、桌椅、长时间 app端：任何时间、任何地点 3、设备感知能力不一样 二、pc作用 1、官网品牌宣传（可以识别公司的正规性） 2、导流（app导流） 3、第三方对接（合作品牌） 三、pc端原型设计尺寸 宽度1000分辨率（原型尺寸） 电脑 1280*768 手机iPhone/7/8 750*1334 四、网站结构 1、通栏 2、两栏 3、三栏 4、混合 混合...
头部菜单栏（选项卡）demo
YanGo的博客
11-28 1743
又来写demo了，一个点击头部菜单栏的选项卡demo，对于初学者来说还是可以参考的。 在目前的web（或者webapp）开发中，很少会用这种来写多页面选项卡的，毕竟如果页面内容复杂的话，会出现加载慢卡顿等问题。但是对于单页面逻辑没那么复杂的话还是可以的。 好了，只是参考参考用，下面贴代码   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;h...
uniapp 获取状态栏高度
最新发布
09-06
uniapp可以通过以下方式获取状态栏高度： 1. 在页面的代码中使用uni.getSystemInfo()方法获取设备参数，其中包括状态栏高度。代码如下： uni.getSystemInfo({ success: (e) => { let statusBar = e....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值