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

<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;
}

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。