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

最新推荐文章于 2022-08-25 03:14:30 发布

zhennann

最新推荐文章于 2022-08-25 03:14:30 发布

阅读量412

点赞数

分类专栏： Cabloy 文章标签： nodejs

本文链接：https://blog.csdn.net/piaoshu_cn/article/details/105875517

版权

Cabloy 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

什么是自适应布局

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

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

自适应布局：pc = mobile + pad
自适应布局：视图尺寸

什么是PC布局

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

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

演示

1. 头部按钮

在这里插入图片描述

2. 左边栏

在这里插入图片描述

3. 右边栏

在这里插入图片描述

4. 状态栏（左）

在这里插入图片描述

5. 状态栏（右）

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhennann

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）

超逸の学习技术博客

04-04

2万+

很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。

Vue3电影中后台开发纪实（九）：项目简历与面试

最新发布

欧阳桫的技术博客

12-17

1780

刀锋电影管理端是刀锋电影App与刀锋电影小程序的中后台管理端程序；包含用户管理、数据看板、在映影片管理、预告管理、城市管理、影院管理、订单管理、运营管理、售后客服等模块；运营人员通过该系统可以创建与维护系统用户、管理用户权限、发布影片与影院信息、创建运营活动、跟踪用户订单、提供售后服务等；

参与评论您还未登录，请先登录后发表或查看评论

状态栏的设计与实现

透明果冻

12-14

2059

状态栏实际上是个窗口，一般分为几个窗格，每个窗格显示不同的信息。AppWizard会为应用程序自动创建一个状态栏，该状态栏包括几个窗格，分别用来显示状态栏提示和CAPS LOCK、NUM LOCK 、SCROLL LOCK键的状态。在MFC中，状态栏的功能由CStatusBar类实现。创建一个状态栏需要以下几个步骤：CStatusBar对象。CStatusBar::Create创建状态栏窗口。CS

PC端网页布局——世纪佳缘（三）头部

tingyu_的博客

07-27

671

来看头部，做好的效果图如下：接下来就进入主题吧~~ 先来分析一下：有两张图片，一个填写账号密码和登录按钮的登录框，其他登录方式，（因为海外登录方式与前面纯图标的不太一样，这里又是只做了个大致的样式，所以就把海外用户登录与忘记密码做在了一个大div块中，大家可以按照自己的想法自行修改）很明显，除了图片，后面的内容做在了一个大块中，其中每一个小块又可以使用div来做，而div是块标签，要想一行显示，就需要使用浮动了初步做好长这样：去掉灰色（body的颜色）和粉色（头部颜色）之后

Java工具界面设计规范(二)

Scorpio的专栏

10-10

923

1 对话框和提示框1.1 统一使用的对话框消息对话框、警告对话框、错误对话框等统一定制，开发人员调用现成的即可1.2 对话框设计图17给出了一个对话框的设计示例。该对话框由一个标题、一系列组件和一行命令按钮组成，默认按钮是“确定”按钮，加下划线的字母是助记键，用以提醒用户同时按Alt键和相应字母键来激活相应组件，不可编辑的“Ruler Unit

UI尺寸规范

weixin_36450680的博客

03-21

1万+

这篇UI尺寸规范，很久之前就整理了，作为记性不好的我，很是受用。今天看了篇排版原则的文章，才知道有很多人可能都会存在盲区，所以把整理的结果和大家分享一下。

纯代码为wordpress网站侧边栏增加好看的按钮

ibibao的博客

08-25

618

我们平时在建站的过程中，经常会遇到需要用按钮对超链接进行美化的需求。但是有的朋友只是偶尔使用一次，不想为网站安装太多插件增加服务器的负担，那么其实我们还可以使用纯代码为网站添加好看的按钮。方法比较简陋，但是可以实现给wordpress侧边栏添加按钮目的就可以了，有精力的朋友可以使用CSS再美化一下。我这里也收集了一些比较好的在线按钮生成器网站，大家可以直接在网站生成后复制代码到自己的网站上使用即可。比如本站侧边栏的这几个按钮，就是用简单的代码做出来的。

vue实现二级响应式导航栏

weixin_44570977的博客

06-05

3382

1.通过vue实现表现和数据分离 2.实现了二级导航栏 3.兼容pc端和移动端 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>响应式二级导航栏</title> <style type="text/css"> ...

微信小程序布局问题全解析：优化技巧一网打尽

微信小程序布局是构建小程序界面的基础，它决定了小程序的视觉呈现和交互体验。小程序布局主要由视图容器、组件和样式组成。视图容器是布局的基础元素，它负责管理子元素的位置和大小。小程序提供了多种视图容器，...

H5开发：H5如何设置head头部与做到咯浏览器适配

热门推荐

Generon的博客

07-25

1万+

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 name="format-detect

pc端常见布局样式总结（针对常见的）

weixin_30354675的博客

02-13

1220

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 宽度适配 */ ...

js实现pc端页面的手势滑动

A3872215的专栏

12-15

4296

js实现pc端页面的手势滑动，支持上下和左右滑动 id 传入产生滚动条的 dom ； function CreatDrag(id) { var oBox = document.getElementById(id); oBox.onmousedown = function(ev) { var ev = ev || event; v

Niushop PC端顶部导航菜单设置

chiyouchan7161的博客

06-26

1009

PC端顶部导航菜单设置二、导航设置 (店铺导航能够有效帮助粉丝跳转到各个关键页面，是整个店铺的“指南针”) 1.导航列表显示项包括导航名称、链接地址、所属类型、是否显示、创建时间、排序、单个导航的修改和删除操作。其中，点击每个导航名称，会在浏览器新标签页中打开前台对应的页面。点击修改，...

[ HTML + CSS + jQuery ] 实现侧边栏sidebar：点击底部导航栏上的按钮打开侧边栏，从右向左滑出，再次点击按钮收起

shawxlee的CSDN博客

04-28

5966

一个简单有效的侧边栏实现办法今天在做项目的时候，需要实现一个侧边栏效果，一开始想到用Bootstrap，但是Bootstrap4的collapse组件只能向下或向上打开，于是在网上研究了一阵，总结出目前觉得效果理想的最简单的办法。效果示例： HTML代码：去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的代码片. // An highlighted block var...

html 头部样式

xuhuanchao的专栏

08-30

983

无标题文档 .head li{ FLOAT: left; WIDTH: 77px; HEIGHT: 38px; TEXT-ALIGN: center; list-style:none; } A{ text-decoration:none; }

pc端常见布局(-)

dishujuan8959的博客

03-16

312

1.固定宽度三列布局见新浪微博首页　　html结构如下 <div class="wrapper"> /**最外层容器元素**/ <div class="primary"> /**右侧主要内容区域**/ <div class="primary"> /**主要内容区域的主要...

自适应三栏布局的Typecho博客主题模板设计

三栏布局是一种常见的网页布局方式，其特点是页面被分为三个部分：左侧一栏、中间主体一栏和右侧一栏。这种布局方式适用于多种网站，尤其是博客网站，因为它能够有效地展示文章内容、侧边栏信息（例如分类、标签、...