一、知识点:盒子模型
- Margin(外边距) - 清除边框外的区域,外边距是透明的
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
1、why:可以更方便的进行页面布局
2、how:
我们把所有的标签都可以看做是一个盒子(div就是一个自定义的盒子),css就是用来修改盒子的外观的
3、div:用来配合盒子模型来完成布局的
4、特殊属性
(1)margin重合问题:上面盒子的margin-bottom,和下面盒子的margin-top,会重合,不会累加: 左右同理
(2)盒子宽高问题box-sizing:默认情况下,盒子高度=height+padding+border;如果设置box-sizing;border-box;那么盒子高度=hight
二、网页的布局
1、分析网站结构:上中下
2、总体整体到部分分解结构
3、整个页面高度
三、网站的整体设计规范
1、共通的规范(常用属性效果)
*{
border: 0;
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html{
font-family:"Microsoft Yahoi";
font-size: 16px;
background-color: #eeeee;
}
四、内容及实现页面
1、步骤分析:
首页整体(公共页头+内容(一张大图片+三张小图片)+公共页尾)【使用盒子模型】
网站的整体设计common(.css)
页头header(.css) (html)
页尾footer(.css)(html)
首页index(.css) (html)
2.重难点
引入
<link href="css/common.css" rel="stylesheet"/>
<link href="css/header.css" rel="stylesheet"/>
首页HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<link href="css/common.css" rel="stylesheet"/>
<link href="css/index.css" rel="stylesheet"/>
</head>
<body>
<div class="all">
<iframe class="iheader" src="header.html"></iframe>
<div class="content">
<img class="imgtop" src="img/about1.jpg"/>
<img class="img1" src="img/cake_03.jpg"/>
<img class="img1" src="img/cake_05.jpg"/>
<img class="img1" src="img/cake_07.jpg"/>
</div>
<iframe class="ifooter" src="footer.html"></iframe>
</div>
</body>
</html>
3.案例实现存在的问题
小细节处难以注意,容易出差错
代码过多冗余
部分页面不规范
4.学习收获
对HTML .css学习更深刻
对盒子模型有了更多的了解与认识
加深了代码思维
5.首页页面效果图