几天前跟着老师做了一个学成在线首页的页面 一直没有复习巩固 今天花了一点时间来分析 一下设计过程

一.网页布局

先观察目标网页整体情况建立网页基本框架 可以看到页面元素并没有填满整个页面 而是分布在一个规则的矩形中 我们把这个矩形作为版心 其他的各部分就可以放在这个版心框架w内

.w {

    width: 1200px;

    margin: auto;

}

建立好版心后 可以把页面分为五个部分 由五个div实现 我们给这些盒子添上类名 这样就构建好了各个部分的框架 方便后续管理

接下来就实现逐一实现各部分即可

二.各部分处理

对于每个部分都可以再次细致划分板块 例如header部分可以再分为四部分

图片 列表 表单 用户头像

接下来我们只探讨一些重点部分

1.这里的”首页 课程 部分”是链接形式 对于这种呈列表态分布的链接 我们一般把它放在ul li之中方便管理 display:inline-block 让各链接在一行上分布

这里float是让各模块 在一行上分布

这里出现了line-height=height使文本居中 我们简单说明一下原理

line-height=文字上间距+文本+文字下间距

当line-height=height时就自动把文本挤到中间了! 容易知道若line-height<height 文本将在偏上位置 反之在偏下位置

2.浮动的盒子没有外边距合并问题

这个盒子是靠右浮动的 并设有margin-top=50px 若是普通情况下可能会出现子元素 父元素外边距合并的情况 但因为其浮动属性就不会再出现外边距合并

3.图片按比例填入盒子

这是直接放入以像素为单位的图片的效果 可以说十分垃圾

但只要做以下改动 就可让图片大小自动填充到适合大小

4.清除浮动!

在这一部分如果限制ul盒子大小 则只能放限定数量的小盒子 若超出限制则会影响布局

但如果不限制高度 小盒子浮动 本身不占有位置 ul高度就会为0 也会影响下面的标准流占位

理想中的状态,让子盒子撑开父亲, 有多少孩子,我父盒子就有多高 所以我们引入了清除浮动 让子元素自动撑开父元素

一般使用双伪元素清除浮动 给父元素使用即可

.clearfix:before ,.clearfix:after {

    content: “”;

    display: table;

}

.clearfix:after {

    clear: both;

}

最后即可达到目的

5.footer部分实现

用dl dt dd实现

注意使用padding 调整上下间距 若使用margin会产生外边距合并问题 而对于paddiing 盒子未设置宽度时不会挤大盒子

到这里首页就基本构建结束了 总体来看是结合了之前学习的一些重点 难点 对网页布局和细节处理设计的提升很有帮助