本文分享了在不依赖源代码的情况下，通过观察网页效果图自行编写HTML和CSS的过程，特别是关于header部分的调试心得。内容涉及将header划分为四个div，包括四个小div的居中排列、文本样式处理以及使header始终保持在页面顶部的fixed定位和z-index应用。
前天根据网页效果图以及源代码，自己摸索，对照源代码，把一份resume的网页勉强写完。整个页面分为header，left，right&footer 四个大的div。由于有源代码做参照，理解深度有效。因此昨天抛弃源代码，全凭效果图自己摸索实现代码。
本次的网页是一个“个人主页”式的静态界面。同样可以把页面分为header，main，footer三块，main里面可以再分为left 和 right两部分：
首先讲header div里面的坑：
（1）header div 分为2块，其中一块是4个 小块排成一排列，从效果图上推测应该是链接的形式出现，另一块则是文本形式。
a. 4个小div 在header div 里面居中排成一排：
给4个div－inline 设置样式：display：inline－block；实现4个div 排列在一排的效果
在header div 样式里设置：text－align：center；给4个小div 统一归类class＝“inline”，在inline样式里设置：margin：0 auto，其含义是上下外边距为0
最低0.47元/天 解锁文章
扫一扫
1531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
