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

趣学前端 | UI效果实战篇-按钮、布局、导航

UI展示效果实现第一波包括按钮、布局、导航。 UI展示效果大部分参考的Antd 按钮 实现方案 类型 介绍 效果展示 实现方案 操作类型 主按钮:用于主行动点,一个操作区域只能有一个主按钮。...文本按钮:纯文字展示效果,所以没有设置边框。 链接按钮:为了和文本按钮做区分,文字做了高亮处理,文字颜色设置为蓝色。...因为上中下三部分是垂直展示的,所以 将父元素flex-direction属性的值设置为column。 这样子元素会呈垂直显示。 顶部-侧边&通栏-底部布局 顶部:主导航放置于页面的顶端。...侧边&通栏:侧边一般放二级导航; 通栏展示主内容。 底部:一些网站信息放到底部。 上中下依旧是垂直展示,中间包含侧边和通栏两部分。...左侧边和右侧内容水平展示,右侧的三个部分垂直展示。 实现代码 码上掘金 导航 Antd是这样定义导航的: 导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。

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

    iPhone X 适配手Q H5 页面通用解决方案

    目前的H5页面可以分为通栏页面和非通栏页面两种,每种页面都可能有底部操作栏,具体如下: 通栏页面 顶部通栏 某些业务的一级页面多数使用了顶部通栏banner的效果,由于iPhone X在状态栏增加了24px...的高度,对于现在通栏banner规范的内容区域会有遮挡情况。...解决方案:对于通栏页面在页面顶部增加一层高度44px的黑色适配层,整个页面往下挪44px。...对于通栏页面,设置了viewport-fit的属性,发现会不生效,经过跟同事查看手Q源码后发现,终端对于WebView通栏的情况设置了UIScrollViewContentInsetAdjustmentNever..._bid=278&_wvx=1 对于有底部操作栏(包括通栏和非通栏),通过加URL参数来增加底部适配层以及设置颜色。

    13.1K1911

    CODING 2.0:如何通过设计给品牌创造价值?

    首页展示的内容信息就好比在给用户讲述一个产品故事,如何让用户记住这个故事,光有一个好的文案是不够的,更需要通过优秀的设计传达。...我们尝试过两种首屏排版方案,一种通栏式,一种异形式。但由于通栏式的单一铺底排版让首页气质看起来非常保守,不符合极客的品牌定位。为了追求创新,我们最终选择了大胆的异形式排版方案。...背景图案提炼出对应功能图标的元素用来点缀,让排版显得更加生动活泼 03 / 知名企业的客户案例增强用户信任感 / 这个模块里我们将客户故事和客户 logo 墙一起展示,通过阅读大客户的案例故事,把用户带入不同行业的使用场景中去

    56240
    领券