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

iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

默认型样式包括左侧的图标(可选),和图标右边对齐的文字标题。 默认型样式适合展示一系列无须通过附加信息便可以区分的项。 ?...副标题型包括左侧图标(可选),图标右边对齐展示的文字标题,以及在标题下方同样对齐展示的副标题。 对齐的文本标签让用户可以更快速地扫视表格。...副标题型包括左侧图标(可选),图标右边对齐展示的文字标题,以及在标题下方同样对齐展示的副标题。 ?...Value 1 (UITableViewCellStyleValue1).在Value 1样式下,标题对齐,副标题用较细的字体右对齐。 ?...Value 2 (UITableViewCellStyleValue2).Value 2样式蓝色字体标题右对齐,黑色字体的副标题对齐,混排在同一行。这种样式通常不包含图片。

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

    【CSS】课程网站头部制作 ⑤ ( 用户测量 | 用户代码编写 | 代码示例 )

    ; 导出的切片如下 : 二、用户代码编写 ---- 1、HTML 结构 头像 与 名称 单独放在一个 div 盒子 , 这两个元素都要垂直居中对齐 , 分别需要单独设置 ; 头像垂直居中对齐...1200 像素 , 在浏览器居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...的外边距 */ margin-right: 60px; } /* 导航设置 浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置浮动 */ .nav...排列在 导航后面 */ float: left; /* 设置外边距 65 像素 */ margin-left: 65px; } /* 搜索 输入框 */ .search input {...*/ .search button { /* 设置浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度

    2.5K30

    【CSS】课程网站 Banner 制作 ① ( Banner 测量 | Banner 盒子模型代码 | 代码示例 )

    1200 像素 , 在浏览器居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...的外边距 */ margin-right: 60px; } /* 导航设置 浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置浮动 */ .nav...排列在 导航后面 */ float: left; /* 设置外边距 65 像素 */ margin-left: 65px; } /* 搜索 输入框 */ .search input {.../* 设置浮动 , 方便与右侧的按钮进行排列 */ float: left; /* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */ width: 340px;...*/ .search button { /* 设置浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度

    3.9K20

    前端设计开发常用命名规则

    Navbar “navbar“等同于横向的导航,是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”. 4....)、subnav(子导航/二级导航) 旗帜、广告和商标:logo(旗帜)、brand(商标)、banner(标语) 搜索:sreach(搜索)、sreachbox(搜索框)、sreachbtn(搜索按钮...:topnav 边导航:sidebar 导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary (3)功能....font12px { font-size: 12px; } .font9pt {font-size: 9pt; } (3)对齐样式,使用对齐目标的英文名称, .left { float:left;...} .bottom { float:bottom; } (4)标题样式,使用’类别+功能’的方式命名, .barnews { } .barproduct { } 注意事项: ---- 1.一律小写;

    2.6K50

    【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    一、多排按钮导航样式及核心要点 1、实现效果 要实现下面的导航效果 ; 2、总体布局设计 该导航可使用 10 个 标签盒子 进行制作 ; 该导航的宽度自动充满整个屏幕 , 宽度为..., 同事设置其宽度为 20 像素 ; 除了图片外 , 每个链接还有一行文字 , 设置文字水平对对齐 nav { /* 整个导航布局距离顶部 5 像素 */ padding-top:.../* 导航的文本 设置为 块级元素 */ display: block; } 二、完整代码实例 ---- 1、HTML 标签结构 <!...在水平方向上充满父容器即可 */ width: 100%; } /* 多排按钮导航 */ nav { /* 整个导航布局距离顶部 5 像素 */ padding-top...图片宽度为 40 像素 高度自适应 */ width: 40px; /* 上下 10 像素外边距 */ margin: 10px 0; } nav a span { /* 导航的文本

    3.3K40

    【CSS】课程网站 网格商品展示 模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )

    1200 像素 , 在浏览器居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...的外边距 */ margin-right: 60px; } /* 导航设置 浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置浮动 */ .nav...排列在 导航后面 */ float: left; /* 设置外边距 65 像素 */ margin-left: 65px; } /* 搜索 输入框 */ .search input {...*/ /* 侧导航 样式 */ .subnav { /* 设置浮动 */ float: left; /* 左侧侧导航 190 x 420 , 左右两侧各 20 像素内边距 */ width... 无序列表 列表项 高度 45 像素 */ .subnav li { /* 高度 = 行高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航

    4.3K40

    【CSS】课程网站横版导航 ( 横版导航测量及样式 | 代码示例 )

    的外边距 */ margin-right: 60px; } /* 导航设置 浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置浮动 */ .nav...排列在 导航后面 */ float: left; /* 设置外边距 65 像素 */ margin-left: 65px; } /* 搜索 输入框 */ .search input {...*/ .search button { /* 设置浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度...*/ /* 侧导航 样式 */ .subnav { /* 设置浮动 */ float: left; /* 左侧侧导航 190 x 420 , 左右两侧各 20 像素内边距 */ width... 无序列表 列表项 高度 45 像素 */ .subnav li { /* 高度 = 行高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航

    5.2K30

    CSS命名规范

    (一)常用的CSS命名规则   头:header   内容:content/container   尾:footer   导航:nav   侧:sidebar   栏目:column   页面外围控制整体布局宽度...:nav   侧:sidebar   栏目:column   页面外围控制整体布局宽度:wrapper   左右:left right center   (2)导航   导航:nav   主导航:mainbav...  子导航:subnav   顶导航:topnav   边导航:sidebar   导航:leftsidebar   右导航:rightsidebar   菜单:menu   子菜单:submenu...  .font12px { font-size: 12px; }   .font9pt {font-size: 9pt; }   (3)对齐样式,使用对齐目标的英文名称,   .left { float...:left; }   .bottom { float:bottom; }   (4)标题样式,使用”类别+功能”的方式命名,   .barnews { }   .barproduct { }   注意事项

    1.6K20

    【CSS】课程网站 Banner 制作 ③ ( Banner 右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程代码示例 )

    的外边距 */ margin-right: 60px; } /* 导航设置 浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置浮动 */ .nav...排列在 导航后面 */ float: left; /* 设置外边距 65 像素 */ margin-left: 65px; } /* 搜索 输入框 */ .search input {...*/ .search button { /* 设置浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度...*/ /* 侧导航 样式 */ .subnav { /* 设置浮动 */ float: left; /* 左侧侧导航 190 x 420 , 左右两侧各 20 像素内边距 */ width... 无序列表 列表项 高度 45 像素 */ .subnav li { /* 高度 = 行高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航

    3.6K60

    【CSS】课程网站 Banner 制作 ② ( Banner 版心盒子测量 | Banner 版心盒子模型左侧导航代码示例 )

    的 背景是 黑色半透明 背景 ; 使用吸管工具 , 吸取 鼠标移动到 侧导航 上的颜色值 为 #00b4ff ; 侧导航 , 默认状态下 , 文字默认颜色为白色 ; 二、Banner 版心盒子模型左侧导航代码示例...1200 像素 , 在浏览器居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...的外边距 */ margin-right: 60px; } /* 导航设置 浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置浮动 */ .nav...排列在 导航后面 */ float: left; /* 设置外边距 65 像素 */ margin-left: 65px; } /* 搜索 输入框 */ .search input {...*/ .search button { /* 设置浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度

    3.3K50

    团队合作时CSS的命名规范

    常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper...:nav 侧:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右:left right center (2)导航 导航:nav 主导航:mainnav 子导航...:subnav 顶导航:topnav 边导航:sidebar 导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title....font12px { font-size: 12px; } .font9pt {font-size: 9pt; } (3)对齐样式 使用对齐目标的英文名称, .left { float:left...; } .bottom { float:bottom; } (4)标题样式 使用”类别+功能”的方式命名, .barnews { } .barproduct { } 注意事项 1、一律小写;

    96210

    【CSS】课程网站头部制作 ④ ( 搜索按钮测量 | 搜索按钮代码编写 | 代码示例 )

    文章目录 一、搜索按钮测量 1、按钮测量 2、按钮切图 二、搜索按钮代码编写 1、HTML 标签结构 2、CSS 样式 3、展示效果 一、搜索按钮测量 ---- 1、按钮测量 右侧的按钮大小...搜索盒子 , 与 Input 表单放置在一行 , 并且二者之间没有缝隙 , 默认的行内块元素之间会有一条无法控制的缝隙 ; 最后 , 设置按钮图片 , 按钮图片无法填充满 , 使用平铺样式 ,...*/ img { width: 100%; } /* 版心宽度 1200 像素 , 在浏览器居中对齐 */ .w { width: 1200px; margin: auto; }...的外边距 */ margin-right: 60px; } /* 导航设置 浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置浮动 */ .nav...排列在 导航后面 */ float: left; /* 设置外边距 65 像素 */ margin-left: 65px; } /* 搜索 输入框 */ .search input {

    2.3K70

    Material Design — 菜单(Menus)

    菜单不应该被用作app内导航的主要方法。 ? :应用的操作太多时将会设置一个菜单    右:包含五个选项的菜单 菜单标签 按钮或控件的标签应该简洁而准确地反映菜单内的项目(如下图)。...菜单通常使用单个单词作为标签,“文件”,“格式”和“编辑”。其他上下文可能需要更长的标签。 禁用菜单选项 菜单显示一组一致的菜单项。...理想情况下,嵌套的层级都需要做显示,因为很难用嵌套多层的子菜单进行导航。 ? 菜单项例子 不可用的操作 将操作显示为不可用(置灰)而不是将其删除,让用户知道它们可以在正确的条件下存在。...---- 简单菜单(Simple Menus) 移动端或pc 使用列表的简单菜单显示特定列表项的选项。 垂直对齐 靠近屏幕边缘时,简单菜单将垂直重新对齐,以使所有菜单项完全可见。...·不在菜单重复展示已选项(同Menus)。 ·简单的菜单总是与列表项文本的开头对齐,并且不会基于点击位置重新水平定位(如下图)。 ?

    5.8K100

    【CSS】课程网站头部制作 ③ ( 搜索表单测量 | 搜索表单代码编写 | 代码示例 )

    ---- 1、左侧边界 搜索 , 大概结构如下 , 左侧是个文本框 , 右侧是个按钮 ; 导航文本 有 10 像素内边距 , 20 像素外边距 , 文本输入框 表单 , 距离 导航栏外边距有...-- 头部模块 - 结束 --> 2、CSS 样式 搜索样式如下 : /* 搜索盒子模型 */ .search { /* 设置浮动 排列在 导航后面 */ float...: left; /* 设置外边距 65 像素 */ margin-left: 65px; } /* 搜索 输入框 */ .search input { /* 设置浮动 , 方便与右侧的按钮进行排列...*/ body { background-color: #f3f5f7; } /* 插入图片自适应 */ img { width: 100%; } /* 版心宽度 1200 像素 , 在浏览器居中对齐...的外边距 */ margin-right: 60px; } /* 导航设置 浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置浮动 */ .nav

    1.9K30

    6详解AppBar小部件

    AppBar 应用是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航按钮,或者只是页面标题。...在本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。 以下是我们将介绍的内容: Flutter 的 AppBar 是什么?...它通常位于屏幕顶部,并且能够在其布局包含其他小部件。AppBar 通常显示概括本页的功能模块,例如图标和标题,并且通常包含按钮或其他用户交互点。...), Flutter AppBar 中心标题 actions actions是与 AppBar 右侧对齐的小部件列表。我们通常在用作按钮的应用程序中看到它们来触发下拉菜单、个人资料头像等。...工具高度和不透明度 最后,我们有工具属性。工具包含文字,图标,按钮,和其他任何公司的前景,除了小部件,Container和Image。

    16.4K10

    一、首页第一个首页制作【仿淘票票系统前后端完全制作(除支付外)】

    ,设置他的垂直对齐为居中即可: 接着为了方便其内部元素距离上下左右的距离,设置左右上下的内边距: 由于我们的标题分为左右两个部分,在此直接在这个标题行内部创建两个行,一个命名为,一个命名为右...点击需要添加下拉菜单的容器,然后点击扩展组件,点击下拉菜单即可添加: 在下拉菜单的属性,,更改当前选中值,设置选项列表的内容,更改大小即可完成: 接着在右侧的行更改水平对齐属性选择靠右...即可占满整行: 接着右侧信息内部也分为左侧和右侧 ,左侧为影片信息,右侧为按钮购买,那么此时创建两个行为这些内容的父容器,并且给予命名: 此时左侧信息为 70% 右侧购票为 30%...,设置对应的文本和颜色: 三、添加导航容器 我们还发现,这个首页的导航是在下部: 那么此时就需要用到一个导航容器,点击扩展组件,找到导航容器添加到当前页面: 此时将刚刚所编写的所有内容赋值到导航页...1: 重命名导航页1为首页: 接着点击首页导航,在属性更改选中的图标以及文本: 接着预览: 最后把其它导航页的名称和图片进行修改即可(添加多个导航直接复制即可

    8.6K20

    ONLYOFFICE桌面编辑器8.1版:个性化编辑和功能强化的全面升级

    要切换模式非常简单,只需点击工具的“模式切换”按钮,然后从弹出的选项中选择“编辑模式”或“查看模式”。...4.改进从右至语言的支持&新的本地化选项 从上个版本开始,ONLYOFFICE 套件便支持从右至显示的语言,8.1 版本又其进行了改进: 改进语序 改正不同文本类型的对齐方式 优化从右至的文本排版...精准的文本对齐调整 为了更贴近从右至语言的排版需求,ONLYOFFICE 8.1细化了文本对齐功能。...无论是处理标题、段落、列表还是表格,用户都能轻松地在“段落”设置,进行对齐方式的选取和设置,如右对齐对齐或两端对齐。...在属性面板调整播放选项,自动播放、循环及静音。 控制音频音量 在属性面板调整音量,确保其符合演示需求。 预览演示文稿 点击顶部工具的“播放”按钮,进入演示模式预览。

    14210
    领券