二、使用步骤1.引入库*{box-sizing:border-box;}body{margin:0;padding:0;font-family:Microsoft YaHei,sans-serif;font-size:16px;line-height:1.7;color:#333333;background-color:#f5f5f5;}a{color:#2c5aa0;text-decoration:none;}a:hover{text-decoration:underline;}/* 页面容器最大 1440 × 980 */.page{width:1440px;max-width:calc(100% - 32px);height:980px;max-height:980px;margin:16px auto;overflow:auto;background-color:#ffffff;border:1px solid #e0e0e0;}/* 顶部 header */.top-header{padding:24px 28px;background-color:#2c5aa0;color:#ffffff;}.top-header h1{margin:0 0 8px;font-size:28px;color:#ffffff;}.top-header .tagline{margin:0;font-size:16px;color:#e8eef7;}/* 主体分栏布局 */.container{display:flex;align-items:stretch;}/* 侧栏 aside头像与联系方式 */.sidebar{width:280px;flex-shrink:0;padding:20px 16px;margin:0;border-right:1px solid #e8e8e8;background-color:#fafafa;}.avatar{width:120px;height:120px;display:block;margin:0 auto 20px;border-radius:50%;border:3px solid #2c5aa0;object-fit:cover;}.sidebar h2{margin:0 0 12px;font-size:20px;color:#222222;}.sidebar p{margin:0 0 12px;font-size:16px;color:#666666;}.contact-list{list-style:none;padding:0;margin:0;}.contact-list li{margin-bottom:12px;font-size:16px;color:#666666;}/* 正文 article */.main-content{flex:1;min-width:0;padding:24px 28px;margin:0;}.main-content section{margin-bottom:24px;}.main-content h2{margin:0 0 12px;padding-bottom:8px;font-size:20px;color:#222222;border-bottom:2px solid #2c5aa0;}.main-content p{margin:0 0 14px;font-size:16px;color:#333333;}.main-content ul{margin:0 0 14px;padding-left:22px;}.main-content li{margin-bottom:8px;color:#333333;}/* 底部 footer */.page-footer{padding:16px 28px;text-align:center;border-top:1px solid #e8e8e8;color:#666666;font-size:14px;}.page-footer p{margin:0;}## 代码结构分析 1*{box-sizing:border-box;}用来防止盒子被撑大影响布局。 2body{margin:0;padding:0;font-family:Microsoft YaHei,sans-serif;font-size:16px;line-height:1.7;color:#333333;background-color:#f5f5f5;}清除默认盒子margin和padding、设置全局字体大小颜色样式以及整体背景色。 3a{color:#2c5aa0;text-decoration:none;}a:hover{text-decoration:underline;}美化超链接默认去除下划线设置默认颜色鼠标悬浮时恢复下划线。 4.page{width:1440px;max-width:calc(100% - 32px);height:980px;max-height:980px;margin:16px auto;overflow:auto;background-color:#ffffff;border:1px solid #e0e0e0;}设置固定宽高和最大自适应宽度用以适配不同尺寸电脑。 calc是计算式左右各减去16px防止页面紧贴浏览器边缘。 margin的16px是上下各留出空白auto用来控制水平居中。 overflow用来生成滚动条防止侧边栏或正文文字过多溢出。 最后设置背景色和盒子边框。 5.top-header{padding:24px 28px;background-color:#2c5aa0;color:#ffffff;}设置顶部标题栏的padding以及字体颜色和背景色。 .top-header h1{margin:0 0 8px;font-size:28px;color:#ffffff;}控制主标题的外边距和字体大小颜色。 .top-header .tagline{margin:0;font-size:16px;color:#e8eef7;}设置副标题的外边距和字体颜色大小。 7.container{display:flex;align-items:stretch;}设置主体分栏让侧边栏和正文栏并排。 8.sidebar{width:280px;flex-shrink:0;padding:20px 16px;margin:0;border-right:1px solid #e8e8e8;background-color:#fafafa;}侧栏设置固定宽度禁止压缩盒子设置内边距防止文字紧贴边缘。清除默认外边距防止出现空白缝隙。最后设置与正文栏的分隔线以及背景色。 9.avatar{width:120px;height:120px;display:block;margin:0 auto 20px;border-radius:50%;border:3px solid #2c5aa0;object-fit:cover;}头像设置固定宽高block把img变成行内块元素可以用margin水平居中margin上0下20px。border-radius:50%;把图片变成圆形。然后设置边框。object-fit:cover;保存图片原始比例自动裁剪图片。10.sidebar h2 .sidebar p 设置下外边框和字体。 11.contact-list{list-style:none;padding:0;margin:0;}清除内外边距list-style:none;用来清除列表前面的小圆点。 .contact-list li设置文字下方空隙和字体颜色大小。 12.main-content 、min-width:0;允许容器缩小换行。flex:1;配合侧边栏的flex-shrink:0;实现侧栏固定正文自适应 .main-content section 设置间距 .main-content h2 .main-content p 设置间距边框和字体 .main-content li .main-content ul 间距颜色设置 13底部设置 .page-footertext-align:center;文字水平居中 .page-footer p清除外边距 # 总结