框架师学习笔记——搭建一个在网页上、中、下水平方向居中的框架

和往常一样，一边喝早茶，一边上网和女粉丝侃大山，在手机和平板电脑上整理修改《Html５》、《JavaScript》、《Css3》、《Dos》、《C++》等多年前写的教程，并研究学习各种品牌的小程序。

突然女粉丝问：“陈老师，会搭建一个在网页上、中、下水平方向居中的框架吗？”。
我答：“会的！”。
女粉丝问：“陈老师可以教我吗？”。
我答：“好的~!”,下面我就教大家搭建一个在网页水平方向居中的上、中、下框架。

准备一个Html5标准框架做试验用，如Html5标准框架

设计一个chenjie_div01类，实现控制框架的背影色和水平居中方式，如Css代码1。

.chenjie_div01
{
width:500px;
height:128px;
background:gray;
margin:auto;
}

设计一个chenjie_div02类，实现控制框架的背影色和水平居中方式，如Css代码2。

.chenjie_div02
{
width:500px;
height:128px;
background:red;
margin:auto;
}

设计三个div容器，分别调用chenjie_div01和02类，如html代码1。

陈老师做试验，上。


陈老师做试验，中


陈老师做试验，下

把Css代码1~2和Html代码1移植嵌入到Html5基础框架中，如混合代码小程序1

陈老师做试验，上。


陈老师做试验，中


陈老师做试验，下

运行混合代码小程序1，就可以看到图1的效果，如果还不会运行方法，可以看我以前写的Html5，学习代码运行方法。

注：看到图1页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。

图片

图1

图1中就是水平居中上、中、下div框架,看到这个效果本次试验就成功了。

好！杰哥Html5混合Css3框架师学习笔记分享到这里，要知后事如何请关注、分享、收藏我的作品，如果喜欢请打赏。