<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <link href="common.css" rel="stylesheet" type="text/css"> -->
<title>左中右版式</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{background:#FFF;font-family:'微软雅黑';}
ul{list-style:none;}
a{text-decoration:none;}
li{list-style: none;}
.clear {clear: both;height: 0;overflow: hidden;}
#wrap{
width:100%;
margin:0 auto;
}
#header{
margin:1px;
height:80px;
border:solid 1px #0000FF;
}
#container{
position:relative;
margin:1px;
height:550px;
}
#left_side{
position:absolute;
top:0px;
left:0px;
border:solid 1px #0000FF;
width:170px;
height:100%;
}
#content{
margin:0px 190px 0px 190px;
border:solid 1px #0000FF;
height:100%;
}
#right_side{
position:absolute;
top:0px;
right:0px;
border:solid 1px #0000FF;
width:170px;
height:100%;
}
#footer{
margin:3px 1px 1px 1px;
/* height:80px; */
overflow:hidden;
border:solid 1px #0000FF;
}
.l_header{
position: relative; /*注意，这里是为了下面垂直居中*/
margin:1px;
height:220px;
border:solid 1px #0000FF;
}
.l_h_cotent{
position:absolute; /*垂直水平居中都需要这个*/
margin:1px;
height:50px; /*垂直居中*/
top:50%; /*垂直居中*/
margin-top: -25px; /*垂直居中*/
width: 600px; /*水平居中*/
left: 50%; /*水平居中*/
margin-left: -300px; /*水平居中*/
border:solid 1px #0000FF;
}
.pagination { /*未知宽度的水平居中*/
position: relative;
}
.pagination ul {
position: absolute;
left: 50%;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
float: left;
position: relative;/*注意，这里不能是absolute，大家懂的*/
right: 50%;
}
.l_container{
position:relative;
margin:1px;
height:250px;
}
.l_left_side{
position:absolute;
top:0px;
left:0px;
border:solid 1px #0000FF;
width:170px;
height:100%;
}
.l_content{
position:relative;
margin:0px 190px 0px 190px;
border:solid 1px #0000FF;
height:100%;
}
.l_right_side{
position:absolute;
top:0px;
right:0px;
border:solid 1px #0000FF;
width:170px;
height:100%;
}
.n_main{
position:absolute;
top:50%;
margin-top: -90px;
height:180px;
width:100%;
border:solid 1px #0000FF;
}
.n_center{
position:relative;
margin:1px;
height:150px;
border:solid 1px #0000FF;
}
.n_ul{
position:absolute;
top:50%;
margin-top: -60px;
height:120px;
width:100%;
border:solid 1px #0000FF;
}
.n_center li{
width:520px; /*水平居中*/
margin:1px auto; /*水平居中*/
height:100px; /*垂直居中*/
line-height:40px; /*垂直居中*/
text-align:center; /*字体水平居中*/
border:solid 1px #0000FF;
}
.ul_nav{
display: table;
width: calc(100% + 38px);
table-layout: fixed;
/* display: grid;
grid-template-columns:repeat(9,1fr);
grid-gap:48px; */
height:56px;
line-height:56px;
/* border:solid 1px #0000FF; */
}
.ul_nav li{
display: table-cell;
padding-right: 37px;
}
.ul_nav li a{
display:block;
padding:0 5px;
}
.ul_nav a:hover {
color:#ffffff;
background-color: #2195DE;
}
.current{
color:#ffffff;
background:#2195DE;
}
.ul_li_div{
width:520px;
height:100px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.ul_li_div span{
color: #4A4A4A;
font-weight:bold;
}
.ul_li_div p{
font-size: 12px;
color: #000000;
letter-spacing: 0;
line-height: 12px;
margin:0 60px;
}
/*******浮动的方式排版（优点是父div的高度随着子div增大而增大）********/
#news_tab {
width:1154px;
margin:0 auto;
/* height:1267px; */
overflow:hidden; /**这个一定要加上**/
border:solid 1px #0000ff;
}
.n_t_leftside {
float:left;
width:190px;
height:967px;
overflow:hidden;
border:solid 1px #0000ff;
}
.n_t_content {
float:left;
width:698px;
height:1067px;
overflow:scroll;
border:solid 1px #0000ff;
}
.content_tab {
width:100%;
height:1967px;
border:solid 1px #0000ff;
}
.n_t_rightside {
float:left;
width:260px;
height:1067px;
overflow:hidden;
border:solid 1px #0000ff;
}
/*************************************/
</style>
<script language="javascript" type="text/javascript">
function change_bg(obj){
var a=document.getElementsByClassName("divide")[0].getElementsByTagName("a");
for(var i=0;i<a.length;i++){a[i].className="";}
obj.className="current";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap" class="wrap">
<div id="header">header</div>
<div id="container">
<div id="left_side">left_side</div>
<div id="content">
content
<div class="l_header">
<div class="l_h_cotent">
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</div>
</div>
<div class="l_container">
<div class="l_left_side">left_side</div>
<div class="l_content">
<div class="n_main">
<div class="n_center">
<ul class="n_ul">
<li class="n_li">
<div class="ul_li_div">
<p><span>公司宗旨</span><br/>
绿色：投资国家产业政策鼓励的行业，对违法违规灰色业务实行零容忍；<br/>
诚信：以专业判断为基础，诚信经营，投资人利益至上；
</p>
</div>
</li>
<li class="n_li">居中</li>
</ul>
</div>
</div>
</div>
<div class="l_right_side">right-side</div>
</div>
<div class="divide">
<ul class="ul_nav">
<li><a href="#" class="current" onclick="change_bg(this)">网站首页</a></li>
<li><a href="#" onclick="change_bg(this)">关于我们</a></li>
<li><a href="#" onclick="change_bg(this)">投资业务</a></li>
<li><a href="#" onclick="change_bg(this)">并购资讯</a></li>
<li><a href="#" onclick="change_bg(this)">医疗资讯</a></li>
<li><a href="#" onclick="change_bg(this)">基金产品</a></li>
<li><a href="#" onclick="change_bg(this)">新闻资讯</a></li>
<li><a href="#" onclick="change_bg(this)">会员中心</a></li>
<li><a href="#" onclick="change_bg(this)">联系我们</a></li>
</ul>
</div>
</div>
<div id="right_side">right-side</div>
</div>
<div id="footer">
footer
<div id="news_tab">
<div class="n_t_leftside"></div>
<div class="n_t_content">
<div class="content_tab"></div>
</div>
<div class="n_t_rightside"></div>
</div>
</div>
</div>
</form>
</body>
</html>
h5左中右经典布局demo
需积分: 46 177 浏览量
2018-12-12
14:41:30
上传
评论
收藏 2KB RAR 举报
经典布局.rar （1个子文件） 
经典布局 
index.html 8KB资源评论
ccgao11
- 粉丝: 0
- 资源: 5
最新资源
- C语言基础-C语言编程基础之Leetcode编程题解之第30题串联所有单词的子串.zip
- C语言基础-C语言编程基础之Leetcode编程题解之第29题两数相除.zip
- C语言基础-C语言编程基础之Leetcode编程题解之第28题找出字符串中第一个匹配项的下标.zip
- 实验报告模板(1).docx
- C语言基础-C语言编程基础之Leetcode编程题解之第26题删除有序数组中的重复项.zip
- C语言基础-C语言编程基础之Leetcode编程题解之第25题K个一组翻转链表.zip
- hnu计算机系统作业-计算机系统基础课程大作业.zip
- 树莓派app.apk
- C++的基于同态加密技术的匿名电子投票系统源码.zip
- SW建模格式图.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
