René's URL Explorer Experiment


Title: GitHub - ZrbJava/layout: 干货!各种常见布局实现+知名网站实例分析

Open Graph Title: GitHub - ZrbJava/layout: 干货!各种常见布局实现+知名网站实例分析

X Title: GitHub - ZrbJava/layout: 干货!各种常见布局实现+知名网站实例分析

Description: 干货!各种常见布局实现+知名网站实例分析. Contribute to ZrbJava/layout development by creating an account on GitHub.

Open Graph Description: 干货!各种常见布局实现+知名网站实例分析. Contribute to ZrbJava/layout development by creating an account on GitHub.

X Description: 干货!各种常见布局实现+知名网站实例分析. Contribute to ZrbJava/layout development by creating an account on GitHub.

Opengraph URL: https://github.com/ZrbJava/layout

X: @github

direct link

Domain: patch-diff.githubusercontent.com

route-pattern/:user_id/:repository
route-controllerfiles
route-actiondisambiguate
fetch-noncev2:dae213b8-7a0f-827c-9946-5fd833b08005
current-catalog-service-hashf3abb0cc802f3d7b95fc8762b94bdcb13bf39634c40c357301c4aa1d67a256fb
request-id953A:B0ED7:501CF8:6F23D7:697379BB
html-safe-nonceb801ff6f09f050981627a5e557d0edf9a64e3f70330455c3e19666b1371c2025
visitor-payloadeyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5NTNBOkIwRUQ3OjUwMUNGODo2RjIzRDc6Njk3Mzc5QkIiLCJ2aXNpdG9yX2lkIjoiMTg0OTkwMDQ2NjkzNDM0ODIxOSIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9
visitor-hmace40504dfd53832c0468b78a24766ceb902931f4f16e0f163843143a323b77d7e
hovercard-subject-tagrepository:125447808
github-keyboard-shortcutsrepository,copilot
google-site-verificationApib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I
octolytics-urlhttps://collector.github.com/github/collect
analytics-location//
fb:app_id1401488693436528
apple-itunes-appapp-id=1477376905, app-argument=https://github.com/ZrbJava/layout
twitter:imagehttps://opengraph.githubassets.com/a9130aa0970e790c31ea42aba666c4d46014c10d9ca91ce57b5077422c8ce804/ZrbJava/layout
twitter:cardsummary_large_image
og:imagehttps://opengraph.githubassets.com/a9130aa0970e790c31ea42aba666c4d46014c10d9ca91ce57b5077422c8ce804/ZrbJava/layout
og:image:alt干货!各种常见布局实现+知名网站实例分析. Contribute to ZrbJava/layout development by creating an account on GitHub.
og:image:width1200
og:image:height600
og:site_nameGitHub
og:typeobject
hostnamegithub.com
expected-hostnamegithub.com
None4cf879a11b0a28a85543899a36aaee9ec9ca2fb7bedad86c0da5731193c95f01
turbo-cache-controlno-preview
go-importgithub.com/ZrbJava/layout git https://github.com/ZrbJava/layout.git
octolytics-dimension-user_id25876639
octolytics-dimension-user_loginZrbJava
octolytics-dimension-repository_id125447808
octolytics-dimension-repository_nwoZrbJava/layout
octolytics-dimension-repository_publictrue
octolytics-dimension-repository_is_forkfalse
octolytics-dimension-repository_network_root_id125447808
octolytics-dimension-repository_network_root_nwoZrbJava/layout
turbo-body-classeslogged-out env-production page-responsive
disable-turbofalse
browser-stats-urlhttps://api.github.com/_private/browser/stats
browser-errors-urlhttps://api.github.com/_private/browser/errors
releasefe8be790582ef7a55477ce1918ac0ed16b106d31
ui-targetfull
theme-color#1e2327
color-schemelight dark

Links:

Skip to contenthttps://patch-diff.githubusercontent.com/ZrbJava/layout#start-of-content
https://patch-diff.githubusercontent.com/
Sign in https://patch-diff.githubusercontent.com/login?return_to=https%3A%2F%2Fgithub.com%2FZrbJava%2Flayout
GitHub CopilotWrite better code with AIhttps://github.com/features/copilot
GitHub SparkBuild and deploy intelligent appshttps://github.com/features/spark
GitHub ModelsManage and compare promptshttps://github.com/features/models
MCP RegistryNewIntegrate external toolshttps://github.com/mcp
ActionsAutomate any workflowhttps://github.com/features/actions
CodespacesInstant dev environmentshttps://github.com/features/codespaces
IssuesPlan and track workhttps://github.com/features/issues
Code ReviewManage code changeshttps://github.com/features/code-review
GitHub Advanced SecurityFind and fix vulnerabilitieshttps://github.com/security/advanced-security
Code securitySecure your code as you buildhttps://github.com/security/advanced-security/code-security
Secret protectionStop leaks before they starthttps://github.com/security/advanced-security/secret-protection
Why GitHubhttps://github.com/why-github
Documentationhttps://docs.github.com
Bloghttps://github.blog
Changeloghttps://github.blog/changelog
Marketplacehttps://github.com/marketplace
View all featureshttps://github.com/features
Enterpriseshttps://github.com/enterprise
Small and medium teamshttps://github.com/team
Startupshttps://github.com/enterprise/startups
Nonprofitshttps://github.com/solutions/industry/nonprofits
App Modernizationhttps://github.com/solutions/use-case/app-modernization
DevSecOpshttps://github.com/solutions/use-case/devsecops
DevOpshttps://github.com/solutions/use-case/devops
CI/CDhttps://github.com/solutions/use-case/ci-cd
View all use caseshttps://github.com/solutions/use-case
Healthcarehttps://github.com/solutions/industry/healthcare
Financial serviceshttps://github.com/solutions/industry/financial-services
Manufacturinghttps://github.com/solutions/industry/manufacturing
Governmenthttps://github.com/solutions/industry/government
View all industrieshttps://github.com/solutions/industry
View all solutionshttps://github.com/solutions
AIhttps://github.com/resources/articles?topic=ai
Software Developmenthttps://github.com/resources/articles?topic=software-development
DevOpshttps://github.com/resources/articles?topic=devops
Securityhttps://github.com/resources/articles?topic=security
View all topicshttps://github.com/resources/articles
Customer storieshttps://github.com/customer-stories
Events & webinarshttps://github.com/resources/events
Ebooks & reportshttps://github.com/resources/whitepapers
Business insightshttps://github.com/solutions/executive-insights
GitHub Skillshttps://skills.github.com
Documentationhttps://docs.github.com
Customer supporthttps://support.github.com
Community forumhttps://github.com/orgs/community/discussions
Trust centerhttps://github.com/trust-center
Partnershttps://github.com/partners
GitHub SponsorsFund open source developershttps://github.com/sponsors
Security Labhttps://securitylab.github.com
Maintainer Communityhttps://maintainers.github.com
Acceleratorhttps://github.com/accelerator
Archive Programhttps://archiveprogram.github.com
Topicshttps://github.com/topics
Trendinghttps://github.com/trending
Collectionshttps://github.com/collections
Enterprise platformAI-powered developer platformhttps://github.com/enterprise
GitHub Advanced SecurityEnterprise-grade security featureshttps://github.com/security/advanced-security
Copilot for BusinessEnterprise-grade AI featureshttps://github.com/features/copilot/copilot-business
Premium SupportEnterprise-grade 24/7 supporthttps://github.com/premium-support
Pricinghttps://github.com/pricing
Search syntax tipshttps://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax
documentationhttps://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax
Sign in https://patch-diff.githubusercontent.com/login?return_to=https%3A%2F%2Fgithub.com%2FZrbJava%2Flayout
Sign up https://patch-diff.githubusercontent.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E&source=header-repo&source_repo=ZrbJava%2Flayout
Reloadhttps://patch-diff.githubusercontent.com/ZrbJava/layout
Reloadhttps://patch-diff.githubusercontent.com/ZrbJava/layout
Reloadhttps://patch-diff.githubusercontent.com/ZrbJava/layout
ZrbJava https://patch-diff.githubusercontent.com/ZrbJava
layouthttps://patch-diff.githubusercontent.com/ZrbJava/layout
Notifications https://patch-diff.githubusercontent.com/login?return_to=%2FZrbJava%2Flayout
Fork 0 https://patch-diff.githubusercontent.com/login?return_to=%2FZrbJava%2Flayout
Star 1 https://patch-diff.githubusercontent.com/login?return_to=%2FZrbJava%2Flayout
1 star https://patch-diff.githubusercontent.com/ZrbJava/layout/stargazers
0 forks https://patch-diff.githubusercontent.com/ZrbJava/layout/forks
Branches https://patch-diff.githubusercontent.com/ZrbJava/layout/branches
Tags https://patch-diff.githubusercontent.com/ZrbJava/layout/tags
Activity https://patch-diff.githubusercontent.com/ZrbJava/layout/activity
Star https://patch-diff.githubusercontent.com/login?return_to=%2FZrbJava%2Flayout
Notifications https://patch-diff.githubusercontent.com/login?return_to=%2FZrbJava%2Flayout
Code https://patch-diff.githubusercontent.com/ZrbJava/layout
Issues 0 https://patch-diff.githubusercontent.com/ZrbJava/layout/issues
Pull requests 0 https://patch-diff.githubusercontent.com/ZrbJava/layout/pulls
Actions https://patch-diff.githubusercontent.com/ZrbJava/layout/actions
Projects 0 https://patch-diff.githubusercontent.com/ZrbJava/layout/projects
Security 0 https://patch-diff.githubusercontent.com/ZrbJava/layout/security
Insights https://patch-diff.githubusercontent.com/ZrbJava/layout/pulse
Code https://patch-diff.githubusercontent.com/ZrbJava/layout
Issues https://patch-diff.githubusercontent.com/ZrbJava/layout/issues
Pull requests https://patch-diff.githubusercontent.com/ZrbJava/layout/pulls
Actions https://patch-diff.githubusercontent.com/ZrbJava/layout/actions
Projects https://patch-diff.githubusercontent.com/ZrbJava/layout/projects
Security https://patch-diff.githubusercontent.com/ZrbJava/layout/security
Insights https://patch-diff.githubusercontent.com/ZrbJava/layout/pulse
Brancheshttps://patch-diff.githubusercontent.com/ZrbJava/layout/branches
Tagshttps://patch-diff.githubusercontent.com/ZrbJava/layout/tags
https://patch-diff.githubusercontent.com/ZrbJava/layout/branches
https://patch-diff.githubusercontent.com/ZrbJava/layout/tags
2 Commitshttps://patch-diff.githubusercontent.com/ZrbJava/layout/commits/master/
https://patch-diff.githubusercontent.com/ZrbJava/layout/commits/master/
README.mdhttps://patch-diff.githubusercontent.com/ZrbJava/layout/blob/master/README.md
README.mdhttps://patch-diff.githubusercontent.com/ZrbJava/layout/blob/master/README.md
READMEhttps://patch-diff.githubusercontent.com/ZrbJava/layout
https://patch-diff.githubusercontent.com/ZrbJava/layout#各种页面常见布局知名网站实例分析相关阅读推荐
@sweet_KKhttps://juejin.im/user/59cc65e0f265da0656047f8d
原文链接https://juejin.im/post/5aa252ac518825558001d5de
https://patch-diff.githubusercontent.com/ZrbJava/layout#一水平居中
https://patch-diff.githubusercontent.com/ZrbJava/layout#1文本行内元素行内块级元素
https://patch-diff.githubusercontent.com/ZrbJava/layout#2单个块级元素
规范https://link.juejin.im/?target=https%3A%2F%2Fwww.w3.org%2FTR%2FCSS21%2Fvisudet.html%23Computing_widths_and_margins
https://patch-diff.githubusercontent.com/ZrbJava/layout#3多个块级元素
https://patch-diff.githubusercontent.com/ZrbJava/layout#4使用绝对定位实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#5任意个元素flex
兼容性不好https://link.juejin.im/?target=https%3A%2F%2Fcaniuse.com%2F%23search%3Dflex
https://patch-diff.githubusercontent.com/ZrbJava/layout#本章小结
https://patch-diff.githubusercontent.com/ZrbJava/layout#二垂直居中
https://patch-diff.githubusercontent.com/ZrbJava/layout#1单行文本行内元素行内块级元素
https://patch-diff.githubusercontent.com/ZrbJava/layout#2多行文本行内元素行内块级元素
https://patch-diff.githubusercontent.com/ZrbJava/layout#3图片
vertical-align和line-height的基友关系https://link.juejin.im/?target=http%3A%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2015%2F08%2Fcss-deep-understand-vertical-align-and-line-height%2F
https://patch-diff.githubusercontent.com/ZrbJava/layout#4单个块级元素
https://patch-diff.githubusercontent.com/ZrbJava/layout#4-1-使用tabel-cell实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#4-2-使用绝对定位实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#4-3-使用flex实现
兼容性不好https://link.juejin.im/?target=https%3A%2F%2Fcaniuse.com%2F%23search%3Dflex
https://patch-diff.githubusercontent.com/ZrbJava/layout#5任意个元素flex-1
兼容性不好https://link.juejin.im/?target=https%3A%2F%2Fcaniuse.com%2F%23search%3Dflex
https://patch-diff.githubusercontent.com/ZrbJava/layout#本章小结-1
vertical-align和line-height的基友关系https://link.juejin.im/?target=http%3A%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2015%2F08%2Fcss-deep-understand-vertical-align-and-line-height%2F
https://patch-diff.githubusercontent.com/ZrbJava/layout#三水平垂直居中
https://patch-diff.githubusercontent.com/ZrbJava/layout#1行内行内块级图片
https://patch-diff.githubusercontent.com/ZrbJava/layout#2table-cell
https://patch-diff.githubusercontent.com/ZrbJava/layout#3button作为父元素
https://patch-diff.githubusercontent.com/ZrbJava/layout#4绝对定位
https://patch-diff.githubusercontent.com/ZrbJava/layout#5绝对居中
https://patch-diff.githubusercontent.com/ZrbJava/layout#6flex
兼容性不好https://link.juejin.im/?target=https%3A%2F%2Fcaniuse.com%2F%23search%3Dflex
https://patch-diff.githubusercontent.com/ZrbJava/layout#7视窗居中
https://patch-diff.githubusercontent.com/ZrbJava/layout#本章小结-2
https://patch-diff.githubusercontent.com/ZrbJava/layout#四两列布局
https://patch-diff.githubusercontent.com/ZrbJava/layout#41-左列定宽右列自适应
https://patch-diff.githubusercontent.com/ZrbJava/layout#1利用floatmargin实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#2利用floatmarginfix实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#3使用floatoverflow实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#4使用table实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#5使用绝对定位实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#6使用flex实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#7使用grid实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#42-左列自适应右列定宽
https://patch-diff.githubusercontent.com/ZrbJava/layout#1使用floatmargin实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#2使用floatoverflow实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#3使用table实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#4使用绝对定位实现-1
https://patch-diff.githubusercontent.com/ZrbJava/layout#5使用flex实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#6使用grid实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#43-一列不定一列自适应
https://patch-diff.githubusercontent.com/ZrbJava/layout#1使用floatoverflow实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#2使用flex实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#3使用grid实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#五三列布局
https://patch-diff.githubusercontent.com/ZrbJava/layout#51-两列定宽一列自适应
https://patch-diff.githubusercontent.com/ZrbJava/layout#1使用floatmargin实现-1
https://patch-diff.githubusercontent.com/ZrbJava/layout#2使用floatoverflow实现-1
https://patch-diff.githubusercontent.com/ZrbJava/layout#3使用table实现-1
https://patch-diff.githubusercontent.com/ZrbJava/layout#4使用flex实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#5使用grid实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#52-两侧定宽中间自适应
https://patch-diff.githubusercontent.com/ZrbJava/layout#521-双飞翼布局方法
https://patch-diff.githubusercontent.com/ZrbJava/layout#522-圣杯布局方法
https://patch-diff.githubusercontent.com/ZrbJava/layout#523-使用grid实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#524-其他方法
https://patch-diff.githubusercontent.com/ZrbJava/layout#1使用table实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#2使用flex实现-1
https://patch-diff.githubusercontent.com/ZrbJava/layout#3使用position实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#六多列布局
https://patch-diff.githubusercontent.com/ZrbJava/layout#61-等宽布局
https://patch-diff.githubusercontent.com/ZrbJava/layout#611-四列等宽
https://patch-diff.githubusercontent.com/ZrbJava/layout#1使用float实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#2使用table实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#3使用flex实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#多列等宽
https://patch-diff.githubusercontent.com/ZrbJava/layout#1使用float实现-1
https://patch-diff.githubusercontent.com/ZrbJava/layout#2使用table实现-1
https://patch-diff.githubusercontent.com/ZrbJava/layout#3使用flex实现-1
https://patch-diff.githubusercontent.com/ZrbJava/layout#4使用grid实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#62-九宫格布局
https://patch-diff.githubusercontent.com/ZrbJava/layout#1使用table实现-1
https://patch-diff.githubusercontent.com/ZrbJava/layout#2使用flex实现-2
https://patch-diff.githubusercontent.com/ZrbJava/layout#3使用grid实现-1
https://patch-diff.githubusercontent.com/ZrbJava/layout#63-栅格系统
https://patch-diff.githubusercontent.com/ZrbJava/layout#1用less生成
https://patch-diff.githubusercontent.com/ZrbJava/layout#七全屏布局
https://patch-diff.githubusercontent.com/ZrbJava/layout#1使用绝对定位实现
https://patch-diff.githubusercontent.com/ZrbJava/layout#2使用flex实现-3
https://patch-diff.githubusercontent.com/ZrbJava/layout#3使用grid实现-2
https://patch-diff.githubusercontent.com/ZrbJava/layout#八网站实例布局分析
https://patch-diff.githubusercontent.com/ZrbJava/layout#81-小米官网
https://www.mi.com/https://www.mi.com/
https://patch-diff.githubusercontent.com/ZrbJava/layout#811-兼容ie9的方法
https://patch-diff.githubusercontent.com/ZrbJava/layout#1页面整体
https://patch-diff.githubusercontent.com/ZrbJava/layout#2局部header
https://patch-diff.githubusercontent.com/ZrbJava/layout#3局部top
https://patch-diff.githubusercontent.com/ZrbJava/layout#4局部center
https://patch-diff.githubusercontent.com/ZrbJava/layout#5局部bottom
https://patch-diff.githubusercontent.com/ZrbJava/layout#6局部footer
https://patch-diff.githubusercontent.com/ZrbJava/layout#7全部代码优化后
https://patch-diff.githubusercontent.com/ZrbJava/layout#812-flexboxgrid搭配用法未来
https://patch-diff.githubusercontent.com/ZrbJava/layout#九其他补充
https://patch-diff.githubusercontent.com/ZrbJava/layout#91-移动端viewport
https://patch-diff.githubusercontent.com/ZrbJava/layout#设置viewport
https://patch-diff.githubusercontent.com/ZrbJava/layout#阅读推荐
https://juejin.im/entry/58e750a02f301e0062367dedhttps://juejin.im/entry/58e750a02f301e0062367ded
https://patch-diff.githubusercontent.com/ZrbJava/layout#92-媒体查询
https://patch-diff.githubusercontent.com/ZrbJava/layout#代码示例
https://patch-diff.githubusercontent.com/ZrbJava/layout#阅读推荐-1
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_querieshttps://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
https://juejin.im/entry/595b6208f265da6c3902041ehttps://juejin.im/entry/595b6208f265da6c3902041e
https://patch-diff.githubusercontent.com/ZrbJava/layout#93-rem
https://patch-diff.githubusercontent.com/ZrbJava/layout#阅读推荐-2
http://yanhaijing.com/css/2017/09/29/principle-of-rem-layout/http://yanhaijing.com/css/2017/09/29/principle-of-rem-layout/
http://caibaojian.com/web-app-rem.htmlhttp://caibaojian.com/web-app-rem.html
https://patch-diff.githubusercontent.com/ZrbJava/layout#94-flexbox
https://patch-diff.githubusercontent.com/ZrbJava/layout#阅读推荐-3
https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.htmlhttps://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html
https://www.w3cplus.com/css3/flexbox-layout-and-calculation.html?from=groupmessagehttps://www.w3cplus.com/css3/flexbox-layout-and-calculation.html?from=groupmessage
https://patch-diff.githubusercontent.com/ZrbJava/layout#95-css-grid
https://patch-diff.githubusercontent.com/ZrbJava/layout#阅读推荐-4
http://blog.jirengu.com/?p=990http://blog.jirengu.com/?p=990
https://drafts.csswg.org/css-grid/https://drafts.csswg.org/css-grid/
Readme https://patch-diff.githubusercontent.com/ZrbJava/layout#readme-ov-file
Please reload this pagehttps://patch-diff.githubusercontent.com/ZrbJava/layout
Activityhttps://patch-diff.githubusercontent.com/ZrbJava/layout/activity
1 starhttps://patch-diff.githubusercontent.com/ZrbJava/layout/stargazers
0 watchinghttps://patch-diff.githubusercontent.com/ZrbJava/layout/watchers
0 forkshttps://patch-diff.githubusercontent.com/ZrbJava/layout/forks
Report repository https://patch-diff.githubusercontent.com/contact/report-content?content_url=https%3A%2F%2Fgithub.com%2FZrbJava%2Flayout&report=ZrbJava+%28user%29
Releaseshttps://patch-diff.githubusercontent.com/ZrbJava/layout/releases
Packages 0https://patch-diff.githubusercontent.com/users/ZrbJava/packages?repo_name=layout
https://github.com
Termshttps://docs.github.com/site-policy/github-terms/github-terms-of-service
Privacyhttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement
Securityhttps://github.com/security
Statushttps://www.githubstatus.com/
Communityhttps://github.community/
Docshttps://docs.github.com/
Contacthttps://support.github.com?tags=dotcom-footer

Viewport: width=device-width


URLs of crawlers that visited me.