HTML CSS实现首页

一、知识点：盒子模型

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.首页页面效果图

猜你喜欢