首页
学习
活动
专区
圈层
工具
发布

HTML- white-space 和 overflow 两个重要的 CSS 属性

CSS的作用是给 HTML 元素添加样式和布局,接下来利用CSS的 white-space 和 overflow 这两个属性让元素实现左右滑动,效果如下: ?...点击按钮 day4-前端 菜单会滚动到中间,在iOS中想要实现这种效果还是比较简单的,接下来看看在前端中实现这种效果的要点有哪些?...它的默认值是 nomal ,就是遇到空格字符就会折叠,而另外一个属性 nowrap 恰好与它相反,意思是不折叠一直显示,刚好满足我们的需求。...: inherit; 五、点击按钮,让某个菜单滚动到中间 其实就是一个方法 Element.scrollTo() ,可以使界面滚动到给定元素的指定坐标位置。...-- 点击事件 --> id="button" onclick="clickedScroll()">点击滚动菜单 html> day6.css /*清除标签默认边距

2.8K20

XCode快捷键

编辑 CMD + [: 左缩进 CMD + ]: 右缩进 CMD + CTRL + LEFT: 折叠 CMD + CTRL + RIGHT: 取消折叠 CMD + CTRL + TOP: 折叠全部函数...: 快速帮助  下面也是一些有用的快捷键(转自http://www.cppblog.com/brucejini/archive/2010/12/24/137367.html) Command + Shift...+ E :扩展编辑器 Command + [ :左移代码块 Command + ] :右移代码块 Tab :接受代码提示 Esc :显示代码提示菜单 Ctrl + ....(句点):反向循环浏览代码提示 Ctrl + / :移动到代码提示中的下一个占位符 Command + Ctrl + S :创建快照 Ctrl + F :前移光标 Ctrl + B :后移光标 Ctrl...Ctrl + T :交换光标左右两边的字符 Ctrl + D:删除光标右边的字符 Ctrl + K :删除本行 Ctrl + L : 将插入点置于窗口正中 Command + Alt + D:显示open

1.1K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Windows快捷键速查

    Ctrl + 向右键 将光标移动到下一个字词的起始处。 Ctrl + 向左键 将光标移动到上一个字词的起始处。 Ctrl + 向下键 将光标移动到下一段落的起始处。...Ctrl + 向上键 将光标移动到上一段落的起始处。 Ctrl + Alt + Tab 使用箭头键在所有打开的应用之间进行切换。...Alt + Shift + 箭头键 当组或磁贴的焦点放在“开始”菜单上时,可将其朝指定方向移动。...Alt + 所选择的键 开始在块模式下选择。 箭头键 按指定方向移动光标。 Page Up 将光标向上移动一个页面。 Page Down 将光标向下移动一个页面。...Ctrl + Home(标记模式) 将光标移动到缓冲区的起始处。 Ctrl + End(标记模式) 将光标移动到缓冲区的结尾处。 Ctrl + 向上键 在输出历史记录中上移一行。

    6.6K20

    Linux学习笔记之vim操作指令大全

    h或退格: 左移一个字符; l或空格: 右移一个字符; j: 下移一行; k: 上移一行; gj: 移动到一段内的下一行; gk: 移动到一段内的上一行; +或Enter: 把光标移至下一行第一个非空白字符...w: 前移一个单词,光标停在下一个单词开头; W: 移动下一个单词开头,但忽略一些标点; e: 前移一个单词,光标停在下一个单词末尾; E: 移动到下一个单词末尾,如果词尾有标点,则移动到标点; b:...n%: 到文件n%的位置。 zz: 将当前行移动到屏幕中央。 zt: 将当前行移动到屏幕顶端。 zb: 将当前行移动到屏幕底端。 4.3 标记 使用标记可以快速移动。...当弹出补全菜单后: C-p 向前切换成员; C-n 向后切换成员; C-e 退出下拉菜单,并退回到原来录入的文字; C-y 退出下拉菜单,并接受当前选项。...13.9 折叠 zf – 创建折叠的命令,可以在一个可视区域上使用该命令; zd – 删除当前行的折叠; zD – 删除当前行的折叠; zfap – 折叠光标所在的段; zo – 打开折叠的文本; zc

    3.9K21

    对话框、模态框和弹出框看起来很相似,它们有何不同?

    (注意:将焦点困在一个元素中不使该元素成为模态元素,但如果它是真正的模态元素,则焦点无法移动到外部元素,因为外部元素不是可聚焦的)。...与对话框一样,如果有一个可见的标题,将标题的 ID 与警告对话框的 aria-labelledby 属性相关联。如果不存在明确的标题,也可以将 aria-label 添加到警告对话框上。...点击按钮时将切换出 popover,因为 popover 的 ID 与按钮的 popovertarget 属性匹配。...它们共同点是它们由两个部分组成:一个是触发器元素,另一个是被触发的元素。 披露组件不会捕获焦点,没有背景,也不是模态的。它们通常使用触发器或特定的关闭按钮进行关闭或折叠。...如果存在多个按钮,可能是其中最不破坏性的一个,例如如果有“取消”和“确认”按钮,一个合理的默认选项可能是“取消”。 当模式对话框关闭时:如果用户触发它,将焦点移回触发器。

    6.3K00

    IdeaVim 基本操作

    ge 后移一个单词,光标停在上一个单词末尾 { 前移1段 } 后移1段 上面的操作都可以配合n使用,比如在正常模式下输入3h,则光标向左移动3个字符 快捷键 含义 0 移动到行首 $ 移动到行尾...zz 将当前行移动到屏幕中央 zt 将当前行移动到屏幕顶端 zb 将当前行移动到屏幕底端 文本的插入 基本插入 快捷键 含义 i 在光标前插入 a 在光标后插入 I 在当前行第一个非空字符前插入 A...修改当前[n]行 [n]s 以输入的文本替代光标之后1(n)个字符,相当于c[n]l [n]S 删除指定数目的行,并以所输入文本代替之 注意,类似cnw,dnw,ynw的形式同样可以写为ncw,ndw...zo 打开折叠的文本 zc 收起折叠 zR 打开所有折行 zM 收起所有折行 Ctrl+i 前进 Ctrl+o 后退 ~ 反转光标所在字符的大小写 可视模式下的U或u 把选中的文本变为大写或小写 版权声明...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/187141.html原文链接:https://javaforall.cn

    2.8K30

    begin主题使用说明(详解教程)

    移动端菜单只在移动浏览器上可见,需要到主题选项----基本设置中,勾选“启用单独移动端导航菜单”,但WP自带的判断移动设备的函数,很多浏览器并不能识别这个移动菜单,可以将移动浏览器的标识(UA)改成iPhone...另外,推荐用这两种自定义固定链接形式: /%postname%.html /%post_id%.html 第一种,需要手动将中文标题改为英文或拼音,使用有些繁琐。...4、通栏幻灯,通过修改模板文件中的文章ID,调用指定文章。...为幻灯中的文章添加图片,编辑指定的文章,添加自定义栏目,名称:cat_img,值:图片地址,图片尺寸:宽度大于等于1080px,高度不限,但必须相同。...打开这个新建的代码高亮页面,通过转换工具,将代码转换为HTML代码。 编辑文章时切换到文本(HTML)模式,将转换后的代码复制粘贴到文章中。

    6K40

    React Native开发之ATOM开发实用技巧

    2、tree-view-finder 左边菜单栏显示方式,类似Mac OS下的finder。 ? 3、minimap 类似sublim text右边的代码缩略图。...8、emmet 这款插件是用来支持zend-coding,Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。...它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。 9、autoclose-html html标签自动比较。..., ctrl-E 移动到一行结束 cmd-left, ctrl-A 移动到一行开始 cmd-up 移动到文件开始 cmd-down移动到文件结束 ctrl-g移动到指定行 row:...alt-cmd-[折叠 alt-cmd-] 展开 alt-cmd-shift-{ 折叠全部 alt-cmd-shift-}{ 展开全部 cmd-k cmd-N { 指定折叠层级 N为层级数

    1.2K80

    HTML——全局属性

    属性描述HTML5新class指定本元素的类名 值:样式表中的类,可由空格分离同时指定多个类 hidden指定元素是否隐藏 hidden属性是布尔属性✔id指定元素的唯一ID 值:id style指定元素的行内样式...半角英数字,大小写区分),可由空格分离同时指定多个字符contenteditable指定是否允许用户编辑内容 值:true/false✔contextmenu指定元素的上下文菜单 值:菜单ID✔draggable...导致被拖动数据被移动到新位置) link(拖动数据会产生指向原始数据的链接) ✔tabindex指定元素的tab键控制次序 值:正数数值,-1则表示TAB键移动焦点时将忽略本元素 事件属性 键盘事件属性...属性描述HTML5新onclick指定本元素被鼠标单击时所运行的脚本ondblclick指定本元素被鼠标双击时所运行的脚本ondrag指定本元素拖动时所运行的脚本✔ondragend指定本元素结束拖动操作时所运行的脚本...✔onmouseout指定鼠标指针移出本元素时所运行的脚本 onmouseover指定鼠标指针移进本元素时所运行的脚本onmouseup指定鼠标按钮在本元素上方松开时所运行的脚本 onmousewheel

    2.5K10

    Windows10中的键盘快捷方式

    Ctrl + Y 恢复操作 Ctrl + 向右键 将光标移动到下一个字词的起始处 Ctrl + 向左键 将光标移动到上一个字词的起始处 Ctrl + 向下键 将光标移动到下一段落的起始处 Ctrl +...向上键 将光标移动到上一段落的起始处 Ctrl + Alt + Tab 使用箭头键在所有打开的应用之间进行切换 Alt + Shift + 箭头键 当组或磁贴的焦点放在“开始”菜单上时,可将其朝指定方向移动...,或在文档中选择文本 Shift + Delete 删除选定项,无需先移动到回收站 向右键 打开右侧的下一个菜单,或打开子菜单 向左键 打开左侧的下一个菜单,或关闭子菜单 Esc 停止或离开当前任务...开始在块模式下选择 箭头键 按指定方向移动光标 Page up 将光标向上移动一个页面 Page down 将光标向下移动一个页面 Ctrl + Home(标记模式) 将光标移动到缓冲区起始处 Ctrl...+ End(标记模式) 将光标移动到缓冲区结尾处 Ctrl + 向上键 在输出历史记录中上移一行 Ctrl + 向下键 在输出历史记录中下移一行 Ctrl + Home(历史记录导航) 如果命令行为空

    6.8K20

    如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

    WijmoJS Designer允许用户创建控件实例,指定属性和事件,并生成可以合并到应用程序中的相应HTML 和 Java。WijmoJS 在线Web设计器对于开发网格和图表等复杂对象特别有用。...设计器的主菜单默认为全部折叠,并显示为垂直条形图标。单击页面左上角的WijmoJS徽标以展开菜单。...设计表面现在看起来像这样: 要折叠主菜单,请再次单击WijmoJS 徽标,或单击设计图面内部的任何位置(“编辑”工具栏下方的区域)。...请注意,设计器不会从源视图中保存的HTML恢复状态,只能从设计视图中保存的JSON恢复。 使用图表 现在让我们考虑一个更复杂的例子。...您可以使用自己的绑定替换默认系列以生成代码,但设计人员不会绘制任何数据点。

    8K20

    CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    与div2都是BFC上下文,但是要求的是:外边距将不再与上下文之外的元素折叠,按照要求,我们应该将div1与div2放在不同的上下文中,修改后的脚本如下: <!...2.4、fixed 固定定位,与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。 简单的回顶端示例代码: 指定div2的z-index值时的运行效果: ? 2.6、菜单 使用前面的内容实现了一个简单的下拉菜单,效果如下: ? 菜单结构: ? ?...通俗说就是url中的#选中的id元素将被css选择。在完成没有js的菜单,选项卡时如果不考虑ie8则可以使用这种新的办法。...三、浮动 浮动在CSS布局中饱受诟病,因为控制起来比较麻烦,但如果掌握了他的特性使用起来还是不难的,在CSS中使用float指定浮动属性值,该属性的值指出了对象是否及如何浮动,浮动的框可以向左或向右移动

    4.4K80

    Ext布局

    从图中可以看到north、west和center区域相交的边界分割线变宽了,当鼠标移动到这些分割线的时候,就可以拖放改变相应区域的大小。当然,center区域的大小也会随之改变。...1.3.3 子区域的折叠和展开 通过配置参数collapsible:true可以让一个区域展开和折叠。...下面我们将学习另外几种布局方式,它们与BorderLayout结合使用,从而实现功能更为复杂的布局样式。...(2) animate:展开和折叠时是否使用动画效果。 (3) activeOnTop:默认为false,执行展开和折叠后,子面板的顺序不会改变。如果设置为true,展开的子面板总是放在最上面。...以后无论页面如何变化,Column1的宽度都不会改变,Column2和Column3会根据页面的大小改变而改变。

    48510

    vim从安装到熟练,这篇文章就够了

    pwd=y4wz 提取码: y4wz  压缩包里面有两个文件,一个是vimrc配置文件,一个vim插件包 登陆自己服务器,将vimrc文件移动当前用户根目录下,即~/.vimrc 将插件包移动到vim目录下... ctrl+w H(L,K,J): 将当前窗口移动到最左(右、上、下)面。 ctrl+w r:旋转窗口的位置。 ctrl+w T: 将当前的窗口移动到新的标签页上。...当弹出补全菜单后: C-p 向前切换成员; C-n 向后切换成员; C-e 退出下拉菜单,并退回到原来录入的文字; C-y 退出下拉菜单,并接受当前选项。...折叠 zf -- 创建折叠的命令,可以在一个可视区域上使用该命令; zd -- 删除当前行的折叠; zD -- 删除当前行的折叠; zfap -- 折叠光标所在的段; zo -- 打开折叠的文本...#:向上查找 g*: 同上,但部分符合即可。 #: 向上搜索光标所在词。 g#: 同上,但部分符合即可。 g C-g: 统计全文或统计部分的字数。

    5.3K10

    AJAX之四 Ajax控件工具集

    它常用来做导航菜单和分组数据的展示等,如我们的QQ、MSN等面板效果都可以用Accordion控件来实现。Accordion控件可以看成是一组面板,但每次只能显示一个面板,如图4-1所示。...1.静态菜单效果 我们可以使用多个AccordionPane,分别指定它们的Header和Content属性即可实现。...Accordion控件用来实现菜单折叠效果,可以用来生成静态和动态菜单。 2. Calendar控件用来实现与文本框的智能绑定。 3....以下关于Accordion控件的描述错误的是() A. 可以用来实现菜单折叠效果 B. 可以和数据库绑定,动态生成菜单 C....ServiceMethod属性指定的方法,其参数和返回类型是固定的。 C. MinimumPrefixLength属性表示给出提示的数据行数。 它可以用来实现面板折叠效果。

    1.3K10

    vim配置即.vimrc文件的配置及vim操作技巧

    光标的移动 4.1 基本移动 以下移动都是在normal模式下: h或退格: 左移一个字符; l或空格: 右移一个字符; j: 下移一行; k: 上移一行; gj: 移动到一段内的下一行; gk: 移动到一段内的上一行...w: 前移一个单词,光标停在下一个单词开头; W: 移动下一个单词开头,但忽略一些标点; e: 前移一个单词,光标停在下一个单词末尾; E: 移动到下一个单词末尾,如果词尾有标点,则移动到标点; b:...n%: 到文件n%的位置。 zz: 将当前行移动到屏幕中央。 zt: 将当前行移动到屏幕顶端。 zb: 将当前行移动到屏幕底端。 4.3 标记 使用标记可以快速移动。...当弹出补全菜单后: C-p 向前切换成员; C-n 向后切换成员; C-e 退出下拉菜单,并退回到原来录入的文字; C-y 退出下拉菜单,并接受当前选项。...接着将光标移动到第一讲第三节来继续我们的教程讲解。

    4.8K11
    领券