[散修弟子]CSS-471|2016年03月22日的日报-技能树.IT修真院

发表于： 2016-03-22 22:15:01

1 1016

今天的任务：网上参考了个例程，慢慢看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>基本的九宫格(http://www.cnblogs.com/binyong)</title>

*{margin:0;padding:0;}

.box{overflow:hidden;position:relative;width:50%;margin:50px auto;padding:10px;background:#F34703;}

.t_l,.t_m,.t_r{position:absolute;top:0;z-index:2;height:10px;font-size:0%;}

.t_l{left:0;width:10px;background:blue;}

.t_m{z-index:1;width:100%;background:orange;}

.t_r{right:0;width:10px;background:blue;}

.m_l,.m_r{position:absolute;z-index:2;width:10px;}

.m_l{top:0px;left:0;z-index:1;background:orange;height:2000px;}

.m_r{top:0px;right:0;z-index:1;background:orange;height:2000px;}

.b_l,.b_m,.b_r{position:absolute;bottom:0;z-index:2;height:10px;font-size:0%;}

.b_l{left:0;width:10px;background:blue;}

.b_m{z-index:1;width:100%;background:orange;}

.b_r{right:0;width:10px;background:blue;}

.m_m{width:100%;font-size:12px;color:#fff;}

h3{text-align:center;font-size:14px;line-height:26px;}

.m_m p{line-height:22px;padding:0 20px;}

</style>

</head>

<body>

<p>这是一个九宫格基本布局模型，未加载任何图片，请随意拉伸缩放窗体大小，看看九宫格向各个方向自由伸展。</p>

<p>本模型测试在以下几个浏览器中完全通过：</p>

<p>IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。</p>

</div>

</div>

</body>

</html>

明天，计划，好好看明白，然后做一个九宫格，放在我的开发板里面

遇到的问题，需要好好学习，

收获，无

返回列表