首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

分享本站右侧 “类Metro风格侧边实现方法

本站DeveWork.com 右侧边有个“类Metro风格侧边小工具,半年前时候微软所带来“Metro风格”(也叫Modern 风格、Windows UI)还挺流行,因此当初在设计这个主题时候想着运用一下...CSS Sprite:中文翻译为“CSS 雪碧、CSS妖精、CSS图片合并”——多个图片整合到一个图片中,然后再用CSS来定位。...“类Metro风格侧边” 实现思路 首先Jeff 的话先上网找了一下Windows Phone 一些图片,看看在竖屏手机界面Metro 格子是如何摆放,最后确定了如下: ? ?...随后确定每个格子放什么内容,链接到哪个url;然后就是PS 了,最后PS 后大概就跟你看样子差不多了: ? ?...代码 CSS /*metro侧边*/ #metroside{background:url(images/8.jpg) no-repeat;width:300px;height:446px;margin

1K90

Atom 在 linux 下安装有几率侧边默认显示在右侧,移动到左侧设置方法

Atom 在 linux 下安装有几率侧边默认显示在右侧,移动到左侧设置方法 遇到一个奇葩事情。没有macbook了。...我及其讨厌windows,于是给新来前端一台笔记本,安装上了archlinux系统。在安装好atom编辑器之后,发现,侧边显示在右侧,恶心坏了。 通过一番摸索,终于找到了设置选项。...如下: 打开 设置 → Packages → 一直往下翻,找到 tree-view → 点击 setting 或 设置 → 去掉Show On Right Side 勾选,然后就立即生效了。...在中文网络上应该是我第一个解决这个问题。除了archlinux ,在 ubuntu 上应该也有几率出现。不知道什么原因。 版权申明:本文由FungLeo原创,允许转载,但转载必须附注首发链接。谢谢。

1.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

如何使用 CSS 设置和自定义水平和垂直滚动条

在本节中,我们按照以下步骤创建一个可滚动侧边导航:a)创建带有导航项目的导航b)导航样式设置为侧边c)侧边栏位置设置为固定d)使用滚动条管理项目的溢出a)....侧边栏位置设置为固定。在本节中,我们专注于防止侧边在滚动主要内容时移动。我们希望侧边样式设置为固定位置,以便主体可以自行滚动而不带上侧边。...下面的截图显示了侧边与正常内容流分开:固定溢出侧边上面的侧边具有固定位置。页面的正文继续滚动,但侧边保持在用户视图中。...从截图中可以看出,侧边底部看起来不像设置在底部。这是因为内容比其容器高度长。在下一节中,我们学习如何防止导航项目列表显示在侧边之外。d)....overflow-y属性设置为scroll会为超出其高度内容创建一个可滚动容器。超出侧边范围项目将被隐藏。右侧会出现一个滚动条,允许您网站用户查看所有内容

1K00

空间秀发现之旅:Qzone6.0动画诞生记 - 腾讯ISUX

新版增加了空间秀、侧边入口转移至发现tab,当然,还有一些神奇小功能点优化,等着大家自己去发现哦,废话不多说直接上动画。...最后视觉风格采取扁平化与真实场景相结合,虚拟形象与现实生活场景相结合,在契合产品特征同时,让画面内容更富表现力,从而增强用户代入感。 ?...“发现tab框架重塑”则倾向于“模块重塑”概念,侧边中各个功能入口(如:话题圈、画报等)进行拟物化设计,通过模块之间“抽离-重组”,最终落地到空间第四个tab,从而向用户传递出框架重塑这一概念...以开场部分动画为例,我们侧边icon全部在E3d内重新建模,然后通过贴图,来丰富物体材质效果。 ?...首先,通过内置基本模型库来create立方体,调整其外观参数并将模型复制4份,在右侧scene中为模型设置好id名称。 ?

74030

【CSS】1287- 一行 CSS 实现 10 种强大布局

我们在这里做最小侧边大小设置为 150px ,但在更大屏幕上,让它伸展出 25% 。侧边始终占据其父级水平空间 25%,直到 25% 变得小于 150px 。...向组件添加 display: grid 将为您提供一个单列网格,但是主区域高度仅与页脚下方内容一样高。...,并将剩余空间 ( 1fr ) 应用于主区域,而auto调整大小行将采用其子项最小内容大小,以便该内容大小增加,行本身增长以进行调整。...经典圣杯布局:grid-template: auto 1fr auto / auto 1fr auto 对于经典圣杯布局,有页眉、页脚、左侧边右侧边和主要内容。...,这里左侧和右侧边会根据其子项固有大小自动调整大小。

4.6K20

专业光线追踪与全域光渲染软件KeyShot 2023新版发布,详解10大新功能

Web查看器在底部工具添加了图标按钮。新功能二:多了两个新材质库类型:Twinbru布料和人体肤色材质。新功能三:多了三个启动预设场景模板,分别为大场景、中场景、小场景。...关闭阴影可见和反射可见选项后材质对地面的反射和阴影就排除消失了。新功能九:对右侧列表可以多重选取项来右键编辑,以前老版本只能选一项右键操作。...改进增强改进了原始几何体 UV 坐标。更新至数据包 2023.1 Python 更新到版本 3.11.1。打开材料信息管理器时改进了材料加载。 RAL 颜色系统更新到 2022。... PANTONE MATCHING SYSTEM 更新到 v5。在主菜单中添加了工具。删除了实验性功能。通过脚本渲染设置支持标签和 RAW 通道。向 Web 查看器上传添加图像附件。... HDRI 编辑器画布保持在主窗口顶部。DPI 设置现在作为元数据输出到图像。修复关闭 KeyShot 或创建新场景时加速改进。

1.9K30

最新iOS设计规范三|3大界面要素:(Bars)

有时,导航右侧也会有一个控件,如“编辑”或“完成”按钮,用于管理活动视图中内容。在拆分视图中,导航可能会显示在拆分视图单个窗格中。...Phone 使用这种方法,而Music 则使用大标题来区分内容区域。在iOS 13及更高版本中,默认情况下,大标题导航不包含背景材质或阴影。另外,随着页面滑动,大标题要转换为标准标题。 ?...三、侧边(Sidbars) 侧边在iPhone上使用较少,更多用在iPad。它提供了应用程序导航,在侧边中选择一项可以使人们导航到特定内容。例如,“邮件”中显示所有邮箱列表。...由于侧边为您应用程序提供导航,因此可以使用它来提供快捷方式,使用户可以快速访问他们关心内容。最好由用户决定哪些项目最重要。 不要阻止用户隐藏侧边。...允许用户隐藏侧边以为其内容创造更多空间,并使用内置边缘滑动手势再次显示侧边。避免在默认情况下隐藏边侧边标题要保持简洁明了。省略不必要和多余词。

9.8K10

面试必考点:前端布局知识

左侧右侧移到与内容同样高度,这里先利用float浮动元素。...注意浮动完成之后,footer元素被盖在内容块下面了。 ③. 利用margin-left负值左侧右侧内容移到同一高度。...注意:这里右侧都是附在内容内容被压在下面。 ④. 底部footer区域利用clear属性清除content内浮动元素透出来。...内容区域给margin值,居中且留出左右侧边宽度。 ②. 外层content添加position:relative属性。 ③....右侧边设置绝对定位属性,position: absoluate,进行布局在与内容同高位置。 ④. 分别设置left:0与right:0 属性,保持内容块与左右侧有顺序且不重合排列。 <!

82551

超好看30款网站侧边设计

第一部分:为什么需要网站侧边侧边其实就是一种比较经典网站导航设计,它形式通常为竖向一列,展示在网站右侧或者左侧,具体位置当然是取决于整体设计。...但一般来讲,由于视觉习惯和用户行为,侧边栏位于左侧更容易第一时间吸引用户注意力,因而也能很高效地给用户提供导航;而右侧侧边则常被看做是二级导航,因而可以丰富网站结构层次。...Nice cream Nicecream 是一家手工冰淇淋生产网站,图文布局和搭配很好凸显了网站主题,侧边导航位于左侧,引导用户轻松访问感兴趣内容。 ? 6....Deanie chen Deanie chen侧边具有留白、简单、素净特点,和右侧轮播展示色彩丰富大图形成了鲜明对比。 ? 13....Paul David Paul David具有非常简洁侧边,没有过多内容。 ? 27.

11.8K10

vue系列教程之微商城项目|分类

描述 本文需要实现页面如下,点击左侧导航按钮,右侧自动滑动到对应位置。当滑动右侧内容,左侧导航也要做出相应变动。 ?...遍历goods数组,每个元素name放入侧边导航元素中 fenlei.vue ? ? ?...如果overflow:hidden;属性取消,多出内容就会溢出屏幕. 内容滚动 需要内容滚动区域有左侧导航右侧商品分类列表,需要分开处理。...联动思路 通过监听'scrollEnd'事件,获取当前显示子元素索引,奖其赋值给this.activeKey,因为this.activeKey与左侧导航动态绑定,这样就完成了滚动右侧内容,左侧导航随之变化效果...通过vant-ui文档可知,当前选中导航元素下标与this.activeKey动态绑定,再通过组件@change监听导航点击事件,每次点击重新初始化右侧better-scroll对象,this.activeKey

6.3K10

Flutter Drawer 侧边以及侧边布局

简而言之就是,新建一个Drawer组件,然后配置给Scaffold组件drawer属性,这样就实现侧边抽屉视图了。...endDrawer: Drawer( child: Text("右侧侧边"), ), //配置顶部导航 appBar: AppBar...关于上面代码,有以下几点需要说明: 1,通过配置Scaffolddrawer属性,我们可以实现左侧侧边;通过配置ScaffoldendDrawer属性,我们可以实现右侧侧边。...2,配置了Scaffolddrawer属性或者endDrawer属性之后,flutter会自动帮我们在顶部导航左侧或者右侧加上一个按钮,如下图所示: ?...4,我们可以自己来配置抽屉视图,一般是通过Column组件来定义侧边内容。 5,Divider组件可以用来实现分割线。

5.4K20

CSS 侧边在小屏设备中进行隐藏

图片 侧边作用应该就不用多说了吧,能够很方便我们回到网页指定位置,在大屏设备中,侧边往往是悬浮于屏幕右侧,很方便用户使用,但在小屏设备中,屏幕空间有限,所以我们会通过隐藏侧边方式,来节省视口空间使用...我们先来看下,在大屏设备中,侧边如何显示,继而再讲述,从大屏设备切换到小屏设备,侧边如何隐藏,国际惯例,先看 HTML 结构代码 <img src="img...c_nav_fix'); }else{ $navSide.removeClass('c_nav_fix'); } }); 而在一些小屏设备中,如笔记本电脑,屏幕空间有限,我们通常选择<em>将</em><em>侧边</em><em>栏</em>进行隐藏...,只有在浏览者需要用到<em>侧边</em><em>栏</em>中<em>的</em>时候,再将<em>侧边</em><em>栏</em>显示出来,在宽度小于等于 1410 px <em>的</em>设备中,<em>侧边</em><em>栏</em>将会在屏幕<em>右侧</em>进行隐藏,并会出现一个提示图片,当鼠标移至图片上时,提示图片隐藏,<em>侧边</em><em>栏</em>出现;当鼠标从<em>侧边</em><em>栏</em>上移开时...$('.c_nav_tips').animate({'right': '0px'}); $('.c_nav_side').animate({'right': '-240px'}); }) 本篇<em>的</em><em>内容</em>到这里就全部结束了

1.8K30

css布局使用

设置两侧top值都为0,设置左侧left值为0, 右侧right值为0。 对主面板设置左右外边距,margin-left值为左侧宽度,margin-right值为右侧宽度。...通过负边距浮动拉上来,左侧负边距为100%,刚好是窗口宽度,因此会从主面板下面的左边跑到与主面板对齐左边,右侧此时浮动在主面板下面的左边,设置负边距为负自身宽度刚好浮动到主面板对齐右边...为了避免侧遮挡主面板内容,在外层设置左右padding值为左右侧宽度,给侧腾出空间,此时主面板宽度减小。..."> 左侧边宽度固定 主内容宽度自适应 右侧边宽度固定...">主内容宽度自适应 第1个侧边宽度固定 第2个侧边宽度固定

1.9K90

Halo博客部署和使用

侧边“应用市场”安装及启用: Dream for Halo 2.x(主题) 搜索组件:提供统一搜索组件 评论组件:提供完整评论系统 Sitemap:生成站点地图 RSS:生成 RSS 订阅链接 ByteMD...、备案信息、站点声明信息等 基础样式:加载进度条、文章侧边目录、博客背景图、横幅大图、主题色、字体、布局、首页大图轮播、侧边悬浮 文章设置:文章缩略图、版权声明、文章分享、捐赠二维码等 侧边配置:侧边展示...右侧(2) 目录仅在文章详情页显示 广告模块 右侧(3) 无 文章分类模块 右侧(4) 无 文章标签模块 右侧(5) 无 4.5 模板 提供一份页面“关于”通用模板: # 个人信息 - 昵称:...“文章”页内可管理文章分类和标签 添加文章页可切换编辑器,文章设置中可针对调整此篇文章某些设置 使用“对象存储”插件,可在侧边“附件”内改变存储策略 侧边“图库”为菜单“相册”,侧边“链接”为菜单...“友链”,侧边“瞬间”为菜单“动态” 侧边“用户”内角色管理可新建角色权限组,使用“OAuth2 认证”插件可在身份认证中设置多登录方式 侧边“概览”中外部访问地址必须为外网 IP 或者域名,当为

28010

如何在 Linux 系统里查找并删除重复相片

在文件菜单里,选择工具->查找重复图片 第四步 根据你所收集图片数量,会需要一些时间。之后,你应该可以在左侧边里看到有重复所有相片。在选中图片后,重复相片会在右侧边里显示出来。...重复相片默认会按保存位置(比如文件夹)来分组。可以在文件菜单里选择视图->分类显示选择其他方式。 要删除重复相片的话,选中有侧边相片并按下删除键。...可以重复这个操作,选择左侧边图片,一个个删除重复图片。会花太长时间?有个方法可以一次删除多个重复内容。...然后可以在右侧边里选中所有没有标记重复相片,并按下删除按钮。 额外提示:可以在垃圾桶里恢复已删除相片 意外总是有的。人们经常会不小心误删了相片。...而是选择在保存相片文件夹下创建隐藏 .dtrash 文件夹,然后“已删除”相片移动到里面。 在应用程序界面上,你也可以看到这个垃圾桶文件夹。

2.4K40

微搭低代码从入门到精通04-创建自定义应用

通常产品说明书会介绍产品每个部分功能,我们也可以按照通常逻辑拆解一下应用编辑器各项功能图片01 侧边导航第一部分是侧边导航,微搭经过历次改版,侧边导航是加了删,删了又加,最终形成了目前一个布局...侧边导航目前常用功能进行了聚合,第一部分就是我们应用设计视图。第二个图标是数据库,通常可以进行数据源设计。...从安全角度考虑,你密码明文存储,而且只不过是在前端代码里加了一层数据过滤,根本就起不到鉴权效果。...,这个区域可以看到官方提供各种组件,通常会有各类布局组件,表单组件,以及和小程序结合比较紧密组件图片如果你组件拖入到右侧编辑区,那么组件名称会出现在大纲树里,有时候组件比较多时候从大纲树里可以看到组件层级...右侧是预览区,是组件编译后真实一个效果。

59330

CAD2007操作教程下

文字 箭头 文字与箭头 文字始终保持在尺寸线之间 “文字位置”选项区:用户可以设置当文字不在默认位置时位置。...根据需要输入选项: · 要编辑标注文字内容,请输入 t(文字)或 m(多行文字)。要改变标注文字角度,请输入 a(角度)。 指定引线位置。...“新建”:可以修改尺寸对象,此时系统显示“文字格式”工具和文字输入窗口,修改或输入尺寸文字后,选择需要修改尺寸对象即可。 “旋转”可以尺寸文字旋转一定角度。...“倾斜”可以使非角度标注尺寸界线倾斜一个角度。 编辑标注文字 主要是控制文字位置。 课后练习:掌握本节所学内容并完成下图绘制。...删除面:从选择集中删除先前选择边。 旋转面:绕指定轴旋转一个面、多个面或实体某些部分。 旋转角度:从当前位置起,使对象绕选定轴旋转指定角度。 倾斜面:按一个角度面进行倾斜。

8.6K30

Unity入门教程(上)

点击窗口中央New Project按钮或者右上方NEW文本标签,窗口下半部分内容发生改变,出现Project Name文本框等内容。...2,场景视图中央将出现一个平板状游戏对象,同时层级视图中也增加了一项Plane(平面)。 ? 四、创建场景,保存项目 1,观察Unity标题,能发现在最顶端文本右侧有一个“*”符号。 ?...五、调整场景视图摄像机 稍微调整一下摄像机角度,使之能够从正面视角俯看我们刚才创建地面对象。 ? 调整摄像机角度方式如下 按住Alt键同时拖动鼠标左键,摄像机将以地面为中心旋转。...从项目视图Create菜单中选择C# Script,项目视图右侧Assets中将生成一个名为NewBehaviourScript脚本文件,刚创建完成时,将其名字改为Player。...色彩选择窗口内右侧有调色板,点击其中红色区域,刚才白色矩形立即显示为选中颜色。选择完颜色后关闭选择窗口。 ?

3.4K70
领券