码迷,mamicode.com
首页 > Web开发 > 详细

网页框架模版(上、下(左、中、右))

时间:2015-03-10 00:06:49      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

<html>
<head>
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/web.css"/>
</head>

<body>
<!--top block -->
<div class="top"> 

</div>
<!--mstyledle-left-->
<div class="middle-left">
  
</div>
<!--middle-middle-->
<div class="middle-mid">
  <!--middle tr td td-->
   </div>
<!--middle-right-->
<div class="middle-right"> </div>
</body>
</html>

效果为:
技术分享

middle-mid部分css样式少写了width,自己添加即可。

css代码为:

.top{
    color:red;
    width:auto;
    height:10%;
    border-width:1;
    border-style:dotted;
}
.middle-left{
    color:red;
    width:20%;
    height:90%;
    float:left;
    border-width:1;
    border-style:dashed;
}
.middle-mid{
    color:red;
    font-family:"微软雅黑",Tahoma,Geneva,sans-serif;
    font-size:12;
    padding-bottom:30px;
    padding-left:30px;
    padding-right:30px;
    padding-top:30px;
    margin-left:20px;
    margin-top:20px;
    width:53%;
    float:left;
    border-width:1;
    border-style:dotted;
}
.middle-right{
    color:red;
    font-size:12;
    width:20%;
    float:right;
    height:90%;
    border-width:1;
    border-style:dashed;
}

 

网页框架模版(上、下(左、中、右))

标签:

原文地址:http://www.cnblogs.com/cdlinux/p/4324700.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!