.navbar { display: flex; justify-content: space-around; /* 均匀分布 */ align-items: center; /* 垂直居中 */ background-color: #f0f0f0; padding: 10px;}
页头 主要内容
.page-layout { display: grid; grid-template-columns: 200px 1fr; /* 左侧200px，右侧自适应 */ grid-template-rows: auto 1fr auto; /* header, main/nav/aside, footer */ grid-template-areas: "header header" "nav main" "nav aside" /* 这里假设aside也在nav下面 */ "footer footer"; min-height: 100vh;}header { grid-area: header; }nav { grid-area: nav; }main { grid-area: main; }aside { grid-area: aside; }footer { grid-area: footer; }
......
@@##@@ 文章标题
文章内容...
评论区
/* 默认样式，通常是针对移动设备的（Mobile First） */body { font-size: 16px; padding: 10px;}/* 当屏幕宽度大于等于 768px 时应用 */@media (min-width: 768px) { body { font-size: 18px; padding: 20px; } .container { max-width: 960px; margin: 0 auto; /* 居中 */ }}/* 当屏幕宽度大于等于 1200px 时应用 */@media (min-width: 1200px) { body { font-size: 20px; } .container { max-width: 1140px; }}
img, video, iframe { max-width: 100%; /* 图片最大宽度为其父容器的100% */ height: auto; /* 高度自动调整，保持图片比例 */ display: block; /* 避免图片底部出现多余空间 */}
/* 手机端默认一列布局 */.grid-container { display: grid; grid-template-columns: 1fr; /* 一列 */ gap: 15px;}/* 平板端两列布局 */@media (min-width: 768px) { .grid-container { grid-template-columns: repeat(2, 1fr); /* 两列 */ }}/* 桌面端三列布局 */@media (min-width: 1200px) { .grid-container { grid-template-columns: repeat(3, 1fr); /* 三列 */ }}
以上就是HTML代码怎么布局_HTML代码页面布局基础与常用结构设计的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1578005.html
微信扫一扫 
支付宝扫一扫 
