(页脚)。2、在中根据内容类型嵌套(独立文章)、(主题分组)、至(标题层级)等标签,确保层级关系准确。
立即学习 “前端免费学习笔记(深入) ”;
3、为每个语义标签添加有意义的class名称(如class="site-header"),避免仅用语义标签而缺失样式钩子。
二、用CSS重置默认样式并设定基础布局
CSS需消除浏览器 默认边距、字体差异,并建立响应式流动布局基础,确保语义结构能被正确渲染为视觉界面。
1、在CSS文件开头使用通用重置规则:* { margin: 0; padding: 0; box-sizing: border-box; }。
2、为
设置基础字体、行高与颜色,例如:body { font-family: "Sego e UI", sans-serif; line-height: 1.6; color: #333; }。3、对、、、、分别设定min-height、padding及背景色,使其在页面中具备视觉区分度。
三、采用Flexbox实现导航与主侧布局
Flexbox适用于一维布局场景,能高效处理导航菜单对齐与主内容区+侧边栏的横向分布,无需浮动或复杂定位。
1、将设为display: flex;,子元素设为flex: 1;,内部设为margin-right: 1.5rem; 实现水平等距导航项。
2、为父容器(如)设置display: flex; gap: 2rem;,子元素设为flex: 3;,
3、在中为当前激活链接添加.active类,并用background-color: #007bff; color: white; 突出显示。
四、利用CSS Grid定义页眉与页脚区域网格
CSS Grid适合二维布局,可用于精确划分页眉中的logo、搜索框、用户入口,以及页脚的多列信息区块。
1、对应用display: grid; grid-template-columns: 1fr auto 1fr;,将子元素分别放入左(logo)、中(搜索)、右(登录)轨道。
2、对使用grid-template-areas: "copyright social links";,再为每个子容器设置grid-area属性匹配对应区域名。
3、为所有Grid容器统一设置grid-gap: 1rem;,保证内部间距一致,且避免使用float或position: absolute破坏语义流 。
五、添加媒体查询适配移动设备
响应式设计 要求在小屏幕下调整语义区块的堆叠顺序与尺寸,确保内容可读性与操作便利性,而非简单缩放。
1、在CSS末尾添加@media (max-width: 768px) { },将内菜单项改为flex-direction: column; 并隐藏非必要图标。
2、将主侧布局从flex横向改为flex-direction: column;,使
3、为中的搜索框设置width: 100%; padding: 0.5rem;,并禁用user-select: none; 防止误触导致文本无法选中 。