<body>
<div class="col-md-4 left">
<div class="logo">默沙东盲讲</div>
<ul class="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="col-md-8 right">
<div class="col-md-8 close">close</div>
<div class="col-md-8 link">
<a href="">路径菜单</a>
<a href="">路径菜单</a>
<a href="">路径菜单</a>
<a href="">路径菜单</a>
<a href="">路径菜单</a>
</div>
<div class="mai">
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
</div>
</body>
body,html,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.left{
/*background: #00ABA1;*/
width: 33.33%;
max-width: 200px;
height: auto;
float: left;
padding: 20px;
margin: 10px;
font-family: "微软雅黑";
font-size: 18px;
color: white;
margin-right: 24px;
}
.left .logo{
width: 200px;
max-width: 200px;
height: 40px;
padding: 20px;
background: #027f78;
font-family: "微软雅黑";
font-weight: 600;
font-size: 26px;
}
.left .menu{
height: auto;
}
.menu li{
width: 200px;
max-width: 200px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: "微软雅黑";
font-size: 18px;
background: #00ABA1;
padding: 20px;
}
.menu li:hover{
background: #03c6bb;
color: white;
}
.right{
background: #555555;
margin-top: 30px;
float: left;
width: 80%;
height: auto;
}
.right .close {
padding: 10px;
text-align: right;
color: white;
font-size: 18px;
font-weight: 600;
line-height: 30px;
height: 30px;
padding-right: 20px;
background: #333;
}
.right .link {
height: 24px;
background: f3f3f3;
font-size: 14px;
color: white;
padding: 4px;
padding-left: 10px;
vertical-align: middle;
line-height: 24px;
}
.link a{
color: white;
text-decoration: none;
}
.link a:link{
color: white;
}
.link a:visited{
color: white;
}
.link a:hover{
color: #00ABA1;
}
.link a:after{
content: '/';
color: white;
font-weight: 400;
margin-right: 2px;
}
/*取销最后一个标签的“/”*/
.link a:last-child::after{
content: '';
}
.mai{
background: #f3f3f3;
height: auto;
}
.box {
/*因为box是inline-block排列的，因此它们的居中按文字的方式来*/
text-align: center;
padding: 22px;
}
.box1,.box2,.box3,.box4{
width: 200px;
height: 200px;
display: inline-block;
margin: 50px;
border: 1px solid #00ABA1;
}