Material Design Lite 实战以 android-dot-com 模板完整还原 Android.com 首页【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite导读templates/android-dot-com/是 Material Design LiteMDL官方仓库中一个极具代表性的真实站点级示例它以 Android.com 官网首页为蓝本用纯 HTML/CSS/JS 演示如何将 MDL 的 Layout、Textfield、Menu、Card、Grid、Typography、Mega-Footer 等组件组合成一套可商用外观的营销型首页。阅读本文后你将掌握该模板的完整文件结构、每个区块对应的组件用法、styles.css的定制手法以及如何通过 gulp 构建任务把模板编译为可直接部署的静态站点。一、模板的设计目标用 MDL 复刻一个真实感官网模板自带说明文档 templates/android-dot-com/README.md 只有短短两段却点明了整个示例的定位The goal of this sample is to illustrate implementing a real-world-looking site withMaterial Design Lite. We therefore decided to do a cover of the front page of the android.com website, which while not a 1:1 match illustrates MDL usage well.翻译过来即本示例的目标是演示如何用 MDL 实现一个看起来像真实产品官网的站点因此选择翻版coverAndroid.com 首页——不求逐像素 1:1 还原而是为了充分展示 MDL 的用法。这一点决定了阅读模板的正确姿势每个 HTML 片段都对应一种可迁移到任意项目中的组件组合模式而不是把它当成唯一正确答案。二、模板文件结构与构建方式模板目录共五个组成部分文件/目录作用index.html完整页面骨架全部 MDL 组件的组合styles.css534 行站点定制样式品牌色、区块布局、响应式适配material.scssSCSS 入口仅一行import ../../src/material-design-lite;images/位图素材logo、设备图、背景图、卡片图等README.md模板说明值得注意的构建细节index.html顶部对 MDL 资源的引用是占位符形式link relstylesheet href$$hosted_libs_prefix$$/$$version$$/material.min.css ... script src$$hosted_libs_prefix$$/$$version$$/material.min.js/script这两个占位符由 gulp 构建流程统一替换见 gulpfile.babel.js 中templates:static任务对 HTML 的管道处理因此在仓库里直接双击打开index.html无法加载 MDL 资源必须经过构建或使用templates:localtestingoverride任务gulpfile.babel.js把占位符替换为本地资源后才能本地预览。构建命令入口包括gulp templates聚合执行templates:static、templates:images、templates:fonts、templates:stylesgulpfile.babel.js产物输出到dist/templates/gulp zip:templates把dist/templates下每个模板压缩成mdl-template-模板名.zipgulpfile.babel.jsgulp watch中对templates/**/*的监听可让模板改动自动重建gulpfile.babel.js。三、页面骨架Layout 组件的一鱼三吃整个页面的最外层容器是div classmdl-layout mdl-js-layout mdl-layout--fixed-headermdl-js-layout是触发 JS 增强的关键类由 src/mdlComponentHandler.js 统一扫描并升级组件。在此基础上模板在同一页面里同时展示了 Layout 组件的三种能力Fixed Header固定头部mdl-layout--fixed-header让滚动时头部始终吸顶Waterfall Header瀑布流头部头部容器同时使用mdl-layout__header--waterfall这是 MDL 独有的效果——向下滚动时头部自动折叠成紧凑形态向上滚动恢复Drawer抽屉导航mdl-layout__drawer提供移动端侧滑导航由头部左上角的汉堡按钮触发。这三者对应的样式与 JS 逻辑分别在 src/layout/_layout.scss 与 src/layout/layout.js 中实现模板就是它们的组合示范。四、头部功能区拆解导航、可展开搜索框与溢出菜单android-header头部一行mdl-layout__header-row内按顺序排布了四个功能区1. Logo 与桌面导航桌面导航使用mdl-navigationmdl-navigation__link并叠加mdl-typography--text-uppercase实现全大写导航文字nav classandroid-navigation mdl-navigation a classmdl-navigation__link mdl-typography--text-uppercase hrefPhones/a !-- Tablets / Wear / TV / Auto / One / Play ... -- /nav2. 可展开搜索框Expandable Textfield这是模板最亮眼的交互之一一个默认只显示放大镜图标的输入框点击后展开为完整搜索框。其结构为div classandroid-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width label classmdl-button mdl-js-button mdl-button--icon forsearch-field i classmaterial-iconssearch/i /label div classmdl-textfield__expandable-holder input classmdl-textfield__input typetext idsearch-field /div /div要点在于mdl-textfield--expandable与mdl-textfield__expandable-holder的配对使用实现见 src/textfield/_textfield.scss 与 src/textfield/textfield.js。模板还做了两个联动细节搜索框获得焦点.is-focused时导航容器淡出并收窄styles.css移动端搜索聚焦时用~与两个选择器同时隐藏居中的移动端标题注释专门说明了这是为了兼容 iOS 9 与 OS X 10.10 的 WebView 解析差异styles.css。3. 溢出菜单Menu 组件右上角的更多按钮把菜单组件塞进了头部button classandroid-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect idmore-button i classmaterial-iconsmore_vert/i /button ul classmdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect formore-button li classmdl-menu__item5.0 Lollipop/li li classmdl-menu__item4.4 KitKat/li li disabled classmdl-menu__item4.3 Jelly Bean/li li classmdl-menu__itemAndroid History/li /ul关键约定ul通过formore-button属性与触发按钮绑定mdl-menu--bottom-right控制弹出方向disabled菜单项直接由属性声明对应 src/menu/_menu.scss 与 src/menu/menu.js。页脚底部的Versions / For Developers两个下拉同样复用了这一模式只是换成mdl-menu--top-left向上弹出。4. 移动端标题切换桌面标题android-title与移动端标题android-mobile-title在同一行共存通过媒体查询切换显隐styles.css保证小屏下导航、Logo 不重叠。五、内容区第一屏全屏 Hero 与 FAB 按钮android-be-together-section是 800px 高的首屏区块用background: url(images/slide01.jpg) center 30% no-repeat; background-size: cover;实现全幅背景styles.css配合mdl-typography--text-center与自定义的logo-font字体类展示be together. not the same.主标语和副标语。Hero 底部放了一个锚点跳转的 FABFloating Action Buttona href#screens button classandroid-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect i classmaterial-iconsexpand_more/i /button /aFAB 由mdl-button--fab激活圆形形态模板用自定义样式覆盖为薄荷绿底黑字并绝对定位在 Hero 下缘styles.css。FAB 的完整样式/交互定义在 src/button/_button.scss 与 src/button/button.jsmdl-js-ripple-effect则启用 src/ripple/_ripple.scss 与 src/ripple/ripple.js 的水波纹效果。六、Powering screens of all sizes横向滚动设备展示条紧随其后的android-screen-section用纯 CSS 实现了一个横向可滚动的设备陈列区.android-screens设置white-space: nowrap; overflow-x: auto;styles.css内部五个android-screenWear / Phones / Tablets / TV / Auto各以不同固定宽度inline-block排布——Wear 宽 160px、手机 64px、平板 110px、TV 与 Auto 各 300px。每个设备下挂一个mdl-typography--font-regular mdl-typography--text-uppercase链接。这种一大块背景 轻量排版类的组合正是 MDL 排版工具类src/typography/_typography.scss的典型用法。七、Grid Card可复用的More from Android卡片栅格More from Android区块是 MDL 最值得抄走的部分展示了Grid 与 Card 的黄金组合div classandroid-card-container mdl-grid div classmdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp div classmdl-card__mediaimg srcimages/more-from-1.png/div div classmdl-card__titleh4 classmdl-card__title-textGet going on Android/h4/div div classmdl-card__supporting-text.../div div classmdl-card__actions a classandroid-link mdl-button mdl-js-button mdl-typography--text-uppercase href Make the switch i classmaterial-iconschevron_right/i /a /div /div !-- 其余 3 张卡片结构一致 -- /div解读其中的响应式设计桌面端每行 4 列mdl-cell--3-col来自 src/grid/_grid.scss 的 12 列栅格平板与手机端自动降为每行 2 列mdl-cell--4-col-tablet mdl-cell--4-col-phonemdl-card系列区块media/title/supporting-text/actions定义见 src/card/_card.scssmdl-shadow--3dp对应 src/shadow/_shadow.scss 的投影级别。模板还对卡片做了三处定制styles.css媒体图撑满宽度、mdl-card__actions绝对定位到底部形成吸底按钮、支持文字改为黑色并加大底部内边距——这些覆盖展示了如何在不改组件源码的前提下微调卡片观感。八、页脚Mega Footer 的三段式结构页脚使用mdl-mega-footer样式见 src/footer/_mega_footer.scss按官方三段式组织top-section左侧三个圆形社交按钮mdl-mega-footer--social-btn右侧Back to Top锚点链接回到#topmiddle-section版权与免责声明文字bottom-section两个向上弹出的菜单Versions / For Developers复用mdl-menu组件 Blog、Privacy Policy 链接。定制方面模板把页脚背景改为近白#fafafa并移除 MDL 默认的段落分隔线::after { border-bottom: none; }styles.css移动端≤900px则直接隐藏 bottom-section 以简化小屏页脚styles.css。九、品牌化定制styles.css 的覆盖方法论整个模板的Android 味来自一套清晰的样式覆盖策略值得提炼为通用方法论全局基调body { margin: 0; }清理默认间距::selection自定义为品牌绿#6ab344品牌色贯穿链接统一使用#8bc34ahover 加深为#7cb342、强调色用#64ffdahover#00bfa5、导航文字#757575、头部图标#767777这些颜色直接决定了整站的识别度头部定制白色头部背景、导航链接 700 字重 14px、hover 时底部出现 4px 绿色下划线styles.css导航对齐的 RTL 技巧为了让导航在搜索框聚焦时向左溢出容器设direction: rtl; order: 1;内部导航再设direction: ltr; justify-content: flex-end;styles.css源码注释解释了这一 hack 的意图抽屉定制标题区做成 160px 高的绿色色块并让白色 Logo 贴底styles.css分类小标题用绿色区分响应式断点以media (max-width: 900px)为界切换桌面/移动两套布局——隐藏桌面导航、切换移动端标题、缩小 Hero 高度800px → 350px、调整标语字号、隐藏 FAB 等styles.css。十、组件清单与迁移建议通读 index.html 后可归纳出本模板实际用到的 MDL 能力清单它们各自对应仓库内的实现模块可作为复用索引组件/工具模板中的体现源码位置Layoutfixed waterfall header、drawer、mdl-layout__contentsrc/layout/_layout.scss、src/layout/layout.jsTextfield可展开搜索框、浮动标签src/textfield/_textfield.scss、src/textfield/textfield.jsMenu头部溢出菜单、页脚版本菜单src/menu/_menu.scss、src/menu/menu.jsButtonFAB、icon 按钮、带 ripple 按钮src/button/_button.scss、src/button/button.jsCardMore from Android四卡片src/card/_card.scssGrid卡片栅格与响应式列src/grid/_grid.scssFootermdl-mega-footer三段式页脚src/footer/_mega_footer.scssTypographymdl-typography--text-uppercase、--font-thin等工具类src/typography/_typography.scssShadowmdl-shadow--3dp卡片投影src/shadow/_shadow.scssRipple按钮与菜单项的mdl-js-ripple-effectsrc/ripple/_ripple.scss、src/ripple/ripple.js迁移到自有项目时建议复制index.html中需要的区块骨架 → 从styles.css抽取对应覆盖规则 → 通过material.scss的方式引入 MDL 全量 SCSS 后自行编译或直接在页面引入构建好的material.min.css与material.min.js。注意模板中 MDL 资源以$$hosted_libs_prefix$$/$$version$$占位符形式引用真实部署前需替换为实际托管的 MDL 资源地址可用gulp templates或gulp templates:localtestingoverride完成替换与本地预览。结语android-dot-com 模板虽然只是 MDL 仓库中一个翻版示例但它完整示范了从页面骨架、头部交互、内容栅格到页脚定制的全链路组合方式是学习如何用 MDL 搭出真实感官网的最佳活教材。对照 templates/android-dot-com/index.html 与 templates/android-dot-com/styles.css 逐段阅读再结合本文的组件映射表你就能把这套模式复用到任何营销页、产品首页或落地页中。【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考