html框架代码大全：教你十分钟学会html框架
html框架代码大全：教你十分钟学会html框架<!DOCTYPE html>其次给html写上编码让浏览器知道他是什么编码，不然会出现乱码head头<head></head>body体
今天我教大家怎么零基础编写html框架
首先建立一个index.html文件，index（为首页的意思）
请大家先看看效果图
网站可分为三个部分
head头
<head></head>
body体
其次给html写上编码让浏览器知道他是什么编码，不然会出现乱码
<!DOCTYPE html>
<html>
<head>
<!--网站编码为utf-8-->
<meta charset="utf-8">
<!--此为网站标题-->
<title></title>
</head>
<body>
</body>
</html>
在给网站起个标题
<!DOCTYPE html>
<html>
<head>
<!--网站编码为utf-8-->
<meta charset="utf-8">
<!--此为网站标题-->
<title>html框架</title>
</head>
<body>
</body>
</html>
现在我们开始写body体
先建立三个div块
我们给这三个块下个名称
在给这三个div块写上css样式，css样式有三种我们先讲内联，下节课再讲外联
再给css样式写上内容
/*width:为宽度;height :为高;background:为网站背景;（也可以用color表示）css样式要以;结尾*/
现在我们来看看效果
div块靠左，不美观怎么办？
没关系我们写上css让它居中更美观
/*margin:上边距 右边距 下边距 左边距;margin:0 auto; 0就是块离浏览器上边框的距离为0个像素点，auto为块自动居中*/
/*也可以用margin-left：左边距;margin-right: 右边距;margin-top: 上边距;margin-bottom: 下边距;*/
再让我们看看效果吧
是不是居中了
只是这样还不像网站怎办别急我们再给它写上幻灯片的框架和做导航和右内容框架
我们在建三个块分别命名为lmage（图片的意思）left（左）right（右）
我们在给这三个块写上css样式
让我们看看效果吧
让我们再给右内容区写的东西吧
我们再写上四个块
我们给这四个块写上css样式
.kuai1{
width: 50%;
height:50%;
background: #bcdbcd;
}
.kuai2{
width: 50%;
height:50%;
float: left;
background: #cdfcdf;
}
.kuai3{
width: 50%;
height:50%;
background: #defdef;
}
.kuai4{
width: 50%;
height:50%;
background: #efbefb;
}
这是我们会发现板块乱了怎么办，别担心现在教给你新知识那就是浮动代码
/*float:为浮动代码;（意为漂浮起来）*/
/*float:left;(向左浮动)float:right;(向右浮动)*/
让我们看看效果如何把
是不是很漂亮呢
好了现在我们就回顾一下这节课的知识点吧
<!--网站编码为utf-8-->
<meta charset="utf-8">
<!--这为网站标题-->
<title>html框架</title>
/*width:为宽度;height :为高;background:为网站背景;（也可以用color表示）css样式要以;结尾*/
/*margin:上边距 右边距 下边距 左边距;margin:0 auto; 0就是块离浏览器上边框的距离为0个像素点，auto为块自动居中*/
/*也可以用margin-left：左边距;margin-right: 右边距;margin-top: 上边距;margin-bottom: 下边距;*/
/*float:为浮动代码;（意为漂浮起来）*/
/*float:left;(向左浮动)float:right;(向右浮动)*/
<!--这为div（块）-->
<div class="header"></div>
<div class="body">
<div class="lmage"></div>
<div class="left"></div>
<div class="right">
<div class="kuai1"></div>
<div class="kuai2"></div>
<div class="kuai3"></div>
<div class="kuai4"></div>
</div>
</div>
<div class="footer"></div>
<!--class为块名称也可以用//id// //name//为名称-->
下面为这节课css样式所用到的代码
<style type="text/css">
/*width:为宽度;height :为高;background:为网站背景;（也可以用color表示）css样式要以;结尾*/
/*margin:上边距 右边距 下边距 左边距;margin:0 auto; 0就是块离浏览器上边框的距离为0个像素点，auto为块自动居中*/
/*也可以用margin-left：左边距;margin-right: 右边距;margin-top: 上边距;margin-bottom: 下边距;*/
/*float:为浮动代码;（意为漂浮起来）*/
/*float:left;(向左浮动)float:right;(向右浮动)*/
.header{
width: 1080px;
height: 200px;
margin: 0 auto;
background: #ffcabc;
}
.body{
width: 1080px;
height: 800px;
margin: 0 auto;
background: #eeccdd;
}
.lmage{
width: 1080px;
height: 200px;
background: #ccdddd;
}
.left{
width: 30%;
height: 600px;
float: left;
background: #cceeff;
}
.right{
width: 70%;
height: 600px;
float: right;
background: #ababab;
}
.kuai1{
width: 50%;
height:50%;
float: left;
background: #bcdbcd;
}
.kuai2{
width: 50%;
height:50%;
float: left;
background: #cdfcdf;
}
.kuai3{
width: 50%;
height:50%;
float: left;
background: #defdef;
}
.kuai4{
width: 50%;
height:50%;
float: left;
background: #efbefb;
}
.footer{
width: 1080px;
height: 200px;
margin: 0 auto;
background: #ccddff;
}
</style>
下面为这节课body体里面所写的div代码
<!--这为div（块）-->
<div class="header"></div>
<div class="body">
<div class="lmage"></div>
<div class="left"></div>
<div class="right">
<div class="kuai1"></div>
<div class="kuai2"></div>
<div class="kuai3"></div>
<div class="kuai4"></div>
</div>
</div>
<div class="footer"></div>
<!--class为块名称也可以用//id// //name//为名称-->
