文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css布局 - 工作中常见的两栏布局案例及分析

目录： 一、大结构上的导航栏和内容区域两栏布局     1、博客园为例     2、腾讯课堂个人中心页     3、慕课网个人中心页     4、github个人中心页 二、mini版的nav...一、大结构上的导航栏和内容区域两栏布局 首先我们从 大结构上 说起，因为我发现很多网站从整个首屏的大结构上都是这种两栏布局： 旁边是侧边栏导航，中间是大块内容区域。...因为mainCont向左移，超出了main区域。所以mainCont的儿子mainCont-inner使用margin-left再向右移动回来。...看来平时多看看别人的代码还是很能开拓思路的。 二、mini版的nav+cont结构 像不像上边大结构缩放0.5倍后的样式。左边内容区域（content），右边导航栏（nav）。 ?...其实都不能算是需要我们注意的正儿八经的两列结构了。但是我想说的是我们工作中，常常抓耳挠腮的不是他的实现。

2.8K11
您找到你想要的搜索结果了吗？
是的
没有找到

【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

一、横向导航栏实现核心要点 需求 : 实现如下布局 ; 上一篇博客中 , 已经实现了顶部的搜索栏 , 本篇博客开始实现后续部分 ; 1、固定定位下面的布局设置 在上一篇博客中实现的搜索栏 , 使用...上下各有 3 像素的外边距 , 左右各有 4 像素的外边距 ; 导航栏整体背景为白色 ; 在该横向导航栏中 设置了 5 个元素 , 这里可以使用百分比布局实现 , 也可以使用 Flex 弹性布局实现..., 需要修改其主轴的方向为 y 轴 , 子元素从上到下排列 ; 水平方向居中 , 需要通过设置 侧轴居中 实现 , 主轴是 y 轴 , 侧轴就是 x 轴 , 代码示例 : .local-nav a {...-- 搜索栏右侧按钮 --> 我 的 <!...*/ margin: 0 auto; /* 字体大小 14 像素 */ font-size: 14px; /* 如果是苹果就是用苹果默认字体 如果不是苹果手机

48120

windows10切换快捷键_Word快捷键大全

大家好，又见面了，我是你们的朋友全栈君。...将光标向左移动一个字 Ctrl + 向右键 将光标向右移动一个字 Ctrl + 向上键 将光标移动到上一行 Ctrl + 向下键 将光标移动到下一行 Ctrl + Home 移动到文档的开头 Ctrl...） Caps Lock + Ctrl + 向右键 转到下一个同级（仅当应用提供结构导航时） Caps Lock + Ctrl + 向左键 转到上一个同级（仅当应用提供结构导航时） Caps Lock +...Ctrl + 向下键 转到第一个子项（仅当应用提供结构导航时） Caps Lock + N 移动到主陆标 扫描模式键盘命令 快捷键 功能 向上键和向下键 移动到应用或网页中的下一行或上一行文本 向右键和向左键...并不是所有键盘都有上下文键，一般长这样▼，在右Alt和右Ctrl键之间，作用是打开上下文菜单（右击菜单）。没有上下文键还不想碰鼠标时，Shift + F10就是完美的替代方案。

5.3K10

html布局_css三栏布局

大家好，又见面了，我是你们的朋友全栈君 编写程序实现如下图效果： 实现代码如下： <!...标签居中显示 */ } .nav{ width: 80%; /* 导航栏宽度为整个网页80% */ height: 36px; /* 导航栏高度为36像素 */ background-color: #e4beed...; /* 导航栏底色为#e4beed */ line-height: 36px; } .nav ul{ margin-left: 30%; /* 导航栏下的ul标签与左侧距离为导航栏宽度的30% */...} .nav li{ float: left; /* 导航栏下的li标签整体向左浮动 */ list-style: none; /*去掉导航栏下的li标签前的小圆点*/ margin-left: 100px...* 右侧内容栏高度为600像素 */ float:right; /* 右侧菜单栏整体向右浮动，达到使右边内容栏与左侧菜单栏同在一行的目的*/ background-color: #d5aedf; /*

3.5K30

Win10 快捷键大全（史上最全）「建议收藏」

windows10(win10正式版)让人感到最意外的就是直接跳过了win9。那么今天我为大家讲解他推出的常用快捷键。希望能够帮到大家。...执行该字母对应的命令 Alt + Enter 显示选定项的属性 Alt + 空格键 为活动窗口打开快捷菜单 Alt + 向左键 后退 Alt + 向右键 前进 Alt + Page Up 向上移动一个屏幕...） 删除选定项并将其移动到“回收站” Ctrl + R（或 F5） 刷新活动窗口 Ctrl + Y 重做操作 Ctrl + 向右键 将光标移动到下一个字词的起始处 Ctrl + 向左键 将光标移动到上一个字词的起始处...否则，删除命令行中光标左侧的所有字符。 Ctrl + End（历史记录导航） 如果命令行为空，则将视口移动到命令行。否则，删除命令行中光标右侧的所有字符。...将光标向左移动一个字 Ctrl + 向右键 将光标向右移动一个字 Ctrl + 向上键 将光标移动到上一行 Ctrl + 向下键 将光标移动到下一行 Ctrl + Home 移动到文档的开头 Ctrl

16.4K30

NEC CSS命名规则

、模块、元件内的清除）等统一设置处理的样式布局 grid (.g-)：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等模块 module (.m-)：通常是一个语义化的可以重复使用的较大的整体...，比如导航、登录、注册、各种列表、评论、搜索等元件 unit (.u-)：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中，比如按钮、输入框、loading、图标等功能 function (...主栏子容器maincmnc侧栏sidesd侧栏子容器sidecsdc盒容器wrap/boxwrap/box模块 module (.m-), unit (.u-)语义命名简写导航navnav子导航subnavsnav...votevote版权copyrightcprt结果resultrst标题titlett按钮buttonbtn输入inputipt功能 function (.f-)语义命名简写浮动清除clearbothcb向左浮动...floatleftfl向右浮动floatrightfr内联块级inlineblockib文本居中textaligncentertac文本居右textalignrighttar文本居左textalignlefttal

1.6K30

Win系统好软推荐

win系统至今已经快30年的历史了.遗留了无限多的好应用.大家又有各种奇奇怪怪的的各种需求.我这些文章的目的就是为了记录这些软件的使用,以及他们如何让我们的数字生活变得更美....我打开了一本我最近在看的书,还是比较流畅的,毕竟书不是太大 ? 因为我的电脑支持触摸,我就试了下标记什么的.很不错的感觉,就是定位精度可能得用触摸笔什么的,手指还是不那么称心如意 ?...AutomationPropertyChangedEvent: BoundingRectangleProperty https://github.com/mdhiggins/CenterTaskbar 地址放上,自己食用.不会吃的再喊我...从任务栏添加或删除图标时，图标将移动到中心或用户指定的位置。您可以选择在各种不同的动画之间进行选择并更改其速度。如果您不喜欢动画并希望它们立即移动，则可以禁用动画。...也可以更改中心位置，以根据中心位置将图标向左或向右移动。当前支持所有任务栏设置，包括垂直任务栏和无限任务栏。TaskbarX自2018年5月6日开始开发。也称为FalconX和Falcon10。

1.5K40

【译】W3C WAI-ARIA最佳实践 -- 布局

Right Arrow: 将焦点向右移动一个单元格。如果焦点位于行中最右侧的单元格，则焦点不会移动。 Left Arrow: 将焦点向左移动一个单元格。...Shift + Right Arrow: 向右扩展选择一个单元格。 Shift + Left Arrow: 向左扩展选择一个单元格。 Shift + Down Arrow: 向下扩展选择一个单元格。...如果焦点位于网格中的最后一个单元格上，则焦点不会移动。 Left Arrow: 将焦点向左移动一个单元格。可选地，如果焦点位于行中最左侧的单元格上，则焦点可能会移动到上一行中的最后一个单元格。...例如如果一个单元格包含一个按钮，网格导航键在单元格上放置焦点，而不是按钮上，屏幕阅读器会朗读出按钮的标签，但不会告知用户存在一个按钮。...这些小部件的示例包括链接，按钮，菜单栏，切换按钮，单选按钮（不是单选按钮组），开关和复选框。 一个单元格包含文本或一个单独的图形，网格导航键在单元格上设置焦点。

6.1K50

Android开发之React Navigation 导航栏样式调整+底部角标消息提示

这是坚持学习react-native的第二篇文章，可能会迟到，但是绝不会缺席，这篇要涉及到的是react-navigation，也是rn社区主推的一个导航库。...因为android 和iOS 手机的不同，导航栏的显示也不太一样，而这篇文章会尽量的配置属性，让两端的导航栏样式、页面跳转的动画保持一致，同时还会介绍底部导航栏添加角标的方法。...这里使用的是3.9.1版本，网上好多文章是2.x版本的，用法基本大同小异。 android 导航栏标题居中适配 默认情况下，iOS的标题居中显示，而android的则不！！！ ?...android 导航栏去除阴影样式 android的导航栏还有阴影的样式，添加elevation 设置阴影的偏移量 defaultNavigationOptions:{ headerStyle:{...至此的导航栏的效果跟iOS基本保持一致。

2.3K10

提高效率 |ArcGIS Pro 中所有快捷键一网打尽

Ctrl + 下箭头 将视穹向照相机的方向移动。 Ctrl + 右箭头 向右移动视穹，使之与场景照相机的朝向垂直。 Ctrl + 左箭头 向左移动视穹，使之与场景照相机的朝向垂直。...在 3D 中，照相机在保持照相机角度和高度不变的同时会向左移动一个屏幕宽度。 End 向右移动一个屏幕大小。 在 2D 中，向右平移一个屏幕宽度。...在 3D 中，照相机在保持照相机角度和高度不变的同时会向左移动一个屏幕宽度。End向右移动一个屏幕大小。在 2D 中，向右平移一个屏幕宽度。...当照相机移动时，调整鼠标指向以设置您要行驶的方向。可以选择使用 W 和 S 键更改方向。 左箭头键和右箭头键 从视图中心向左或向右移动照相机。...按住左箭头或右箭头键可垂直于照相机当前的视图方向左或向右移动照相机。当照相机移动时，调整鼠标指向以设置要相对垂直行驶的方向。可以选择使用 A 和 D 键更改方向。

94620

Windows快捷键速查

Ctrl + 向右键 将光标移动到下一个字词的起始处。 Ctrl + 向左键 将光标移动到上一个字词的起始处。 Ctrl + 向下键 将光标移动到下一段落的起始处。...Windows 徽标键 + 向左键 最大化屏幕左侧的应用或桌面窗口。 Windows 徽标键 + 向右键 最大化屏幕右侧的应用或桌面窗口。...Windows 徽标键 + Shift + 向左键或向右键 将桌面上的应用或窗口从一台显示器移动至另一台显示器。 Windows 徽标键 + 空格键 切换输入语言和键盘布局。...Ctrl + Home（历史记录导航） 如果命令行为空，则将视区移动到缓冲区顶部。否则，请删除命令行中光标左侧的所有字符。...Ctrl + End（历史记录导航） 如果命令行为空，则将视区移动到命令行。 否则，请删除命令行中光标右侧的所有字符。 6. 对话框 快捷键 说明 F4 显示活动列表中的项目。

4.2K20

win10快捷键大全 win10常用快捷键

：Alt + Tab(不是新的，但任务切换界面改进) • 任务视图：Win + Tab(松开键盘界面不会消失) • 创建新的虚拟桌面：Win + Ctrl + D • 关闭当前虚拟桌面：Win + Ctrl...切换窗口：Alt + Tab（不是新的，但任务切换界面改进）。 任务视图：Win + Tab（松开键盘界面不会消失）。 创建新的虚拟桌面：Win + Ctrl + D。...“回收站”而直接将其删除 F2 重命名选定项目 Ctrl+向右键 将光标移动到下一个字词的起始处 Ctrl+向左键 将光标移动到上一个字词的起始处 Ctrl+向下键 将光标移动到下一个段落的起始处 Ctrl...将选择内容或活动图形向右移动一个像素 向左键 将选择内容或活动图形向左移动一个像素 向下键 将选择内容或活动图形向下移动一个像素 向上键 将选择内容或活动图形向上移动一个像素 Esc 取消某个选择 Delete...Ctrl+H 在文档中替换文本 Ctrl+向左键 将光标向左移动一个字 Ctrl+向右键 将光标向右移动一个字 Ctrl+向上键 将光标移动到上一行 Ctrl+向下键 将光标移动到下一行 Ctrl+Home

4.3K70

flex大法：一网打尽所有常见布局

元素有个高度为1000的子元素，这个高度就是它的min-content，所以它不会缩小，它一个元素就比容器元素高了，再加上头和尾因为都没有内容，所以虽然理论上它们不是为0的，但是为了更好的显示效果，浏览器就直接把它们减少到...经典导航栏 如图所示是一个经典的网站导航栏的布局，logo和导航在左，用户信息在右，不用flex可能会使用浮动，上图使用浮动还好，但是如果右边是两个块，那么右边浮动的元素的显示顺序和书写顺序要不一致才行...，这个使用flex可以轻松的做到，给2n的行设置flex-direction: row-reverse即可让偶数行的主轴方向由默认的从左向右变成从右向左： 此外也可以使用order属性，这个属性可以让...，以【单列布局】为基础，给content添加三个子元素，两侧定宽，并且不允许收缩，中间允许扩展即可： 垂直居中 不知道各位最开始用flex是为什么，反正笔者就是冲着垂直居中去的，用它实在是太简单了，之前还考虑是不是定高呀...，现在连让文字居中我都是用flex，无情的抛弃了text-align和line-height。

85810

CSS中鼠标滑过图片放大效果

整一个图片放大特效还是比较酷的。 但在写代码之前，我们要做的就是： 悬停在上面的卡应该在保持长宽比的同时展开。 当一张牌悬停时，其他牌不应改变大小并向外移动，以免彼此重叠。...由于通用的同级组合器仅适用于位于给定选择器之后的同级（没有“向后”），因此我们需要另一种方法。 一种方法是在父容器本身上添加其他悬停规则。这是计划： 悬停父容器时，请将该容器内的所有项目向左移动。...使用通用的同级组合器可以将悬停的项目向右移动后放置的项目。 获得超级特定的信息，因此悬停的项目不会像其他项目一样进行转变。 我们假设您的文档使用从左到右的书写模式。...如果要在从右到左的上下文中使用此效果，则需要将悬停的外部容器内的所有项目设置为向右移动，并使用常规的同级组合器将所有选定的项目向左移动。...CSS3中鼠标滑过图片突出放大效果 向外移动兄弟元素 此时悬停效果看起来更加圆滑，不再那么生硬。需要注意的一点是：此最终版本正在使用:focus和:focus-within伪类来支持键盘导航。

8.3K10

Android编程自定义对话框(Dialog)位置及大小的方法

本文实例讲述了Android编程自定义对话框(Dialog)位置及大小的方法。..., * 可以直接调用getWindow(),表示获得这个Activity的Window * 对象,这样这可以以同样的方式改变这个Activity的属性. */ Window dialogWindow =...,负值忽略. * 当参数值包含Gravity.CENTER_HORIZONTAL时 * ,对话框水平居中,所以lp.x就表示在水平居中的位置移动lp.x像素,正值向右移动,负值向左移动. * 当参数值包含...Gravity.CENTER_VERTICAL时 * ,对话框垂直居中,所以lp.y就表示在垂直居中的位置移动lp.y像素,正值向右移动,负值向左移动. * gravity的默认值为Gravity.CENTER...时对话框应出现在程序的左上角,但在 * 我手机上测试时发现距左边与上边都有一小段距离,而且垂直坐标把程序标题栏也计算在内了, * Gravity.LEFT, Gravity.TOP, Gravity.BOTTOM

2.6K31

使用CSS Flexbox 构建可靠实用的网站 Header

然后，你所需要做的就是应用justify-content来分配它们之间的间距。...Header 变化 1 image.png 假设我想要在导航链接旁边添加了一个按钮。这应该如何处理?我们应该把它作为链接添加到导航栏中吗?还是应该和导航分开?我更喜欢这样做。...下面有两种解决方案： image.png 我更喜欢第二种解决方案，因为它不会过早隐藏导航。 一般来说，如果元素不影响布局，我会尽量避免隐藏它。...我们需要确保导航链接的数量不会超过特定的限制。下面一个logo偏离中心的例子 ?: ? 正如在上图中看到的，logo没有居中。所以要记住这一点，以避免这种意想不到的问题 ?。...实际上不是。 通常，header 可能有一个内部间距（padding），当我们强制某项占据全部宽度时，除非清除padding ，否则它不会生效。

1.7K30

Windows10中的键盘快捷方式

Windows 10 ---- 键盘快捷方式就是按键或按键组合，可提供一种替代方式来执行通常使用鼠标执行的操作。...打开活动窗口的快捷方式菜单 Alt + 向左键 返回 Alt + 向右键 前进 Alt + Page Up 向上移动一个屏幕 Alt + Page Down 向下移动一个屏幕 Ctrl + F4 关闭活动文档...Ctrl + Y 恢复操作 Ctrl + 向右键 将光标移动到下一个字词的起始处 Ctrl + 向左键 将光标移动到上一个字词的起始处 Ctrl + 向下键 将光标移动到下一段落的起始处 Ctrl +...，或在文档中选择文本 Shift + Delete 删除选定项，无需先移动到回收站 向右键 打开右侧的下一个菜单，或打开子菜单 向左键 打开左侧的下一个菜单，或关闭子菜单 Esc 停止或离开当前任务...否则，请删除命令行中光标左侧的所有字符。 Ctrl + End（历史记录导航） 如果命令行为空，则将视区移动到命令行。否则，请删除命令行中光标右侧的所有字符。

4.5K20

Framer 使用滚动变体创建动画

Demo1: 实现一个滚动到不同部分,修改导航栏的背景颜色的效果 创建导航栏组件 第一步就是创建一个导航栏组件 可以直接按下命令 K 并调出快捷菜单。...然后输入组件名字,就可以进入到组件编辑页面了 然后我们创建一个最基本的导航栏(默认) 左边放入LOGO 右边放入包裹每一菜单项的大盒子 也就是导航栏 采用flex布局, 子项y方向垂直居中, x方向左右两端分布...当然有很多地方需要优化,但这不是重点....当黑色部分在浏览器视口中,导航栏使用默认的组件 当白色部分在浏览器视口中,导航栏使用黑色背景的导航栏组件 当黄色部分在浏览器视口中,导航栏使用黄色背景的导航栏组件 效果: 我们可以看到 当滚动不到不同部分的时候...,导航栏就会使用不同的组件.

5810
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券