定宽+自适应宽
/*方法一：弹性布局*/
.parent1{
display: flex;
height:300px;
}
.side1{
width:200px;
height:100%;
background-color:#c00000;
margin-right:10px;
}
.main1{
flex:1;
background-color:#4f81bd;
}
/*方法二：浮动*/
.side2{
width:200px;
height:300px;
background-color:#c00000;
float:left;
}
.main2{
height:300px;
margin-left:210px;
background-color:#4f81bd;
}
/*方法三：绝对定位*/
.parent3{
height:300px;
position:relative;
}
.side3{
width:200px;
height:100%;
background-color:#c00000;
}
.main3{
position:absolute;
height:100%;
width:100%;
left:210px;
top:0;
background-color:#4f81bd;
}
<div class="tab">
<ul class="lesson">
<li class="active">课程</li>
<li>学习计划</li>
<li>技能图谱</li>
</ul>
<div class="con">
<p class="con_1">课程内容</p>
<p class="con_2">学习计划内容</p>
<p class="con_3">技能图谱内容</p>
</div>
</div>
弹性布局
body{ margin: 0; }
li{ list-style: none; }
ul, p{ padding: 0; margin: 0; }
/* css reset */
body{ font-size: 14px; font-family: '微软雅黑'; }
.tab{ width: 572px; border: 1px solid #999; margin: 10px auto; }
.lesson{ display: flex; }
li{ flex-grow: 1; flex-basis: 0; text-align: center; border-left: 1px solid #cecece; border-bottom: 1px solid #cecece;
line-height: 30px;background: #f1f1f1; }
.con{ height: 40px; background: #fff; padding: 20px; }
.con_1, .con_2, .con_3{ display: none; }
.con_1{ display: block; }
.active{ background: #ffffff; border: none; }
一般版本--兼容IE6
body{ font-size: 14px; font-family: '微软雅黑'; }
ul, p{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* css reset */
.clear { zoom: 1 }
.clear:after { content: ''; display: block; clear: both }
.tab {
margin: 10px auto;
width: 572px;
border: 1px solid #999;
}
.lesson li {
float: left;
width: 190px;
line-height: 30px;
text-align: center;
border: 1px solid #cecece;
border-top: none;
border-right: none;
background: #f1f1f1;
}
.lesson .active { border: 0; background: #ffffff; }
.con{ height: 40px; background: #fff; padding: 20px; }
.con_1, .con_2, .con_3{ display: none; }
.con_1{ display: block; }
.active{ background: #ffffff; border: none; }
<div class="pop">
<div class="head">
<p class="title">标题栏</p>
<button class="close></button>
</div>
<div class="content">
<p class="text">内容区段落</p>
<buttonclass="button">确定</button>
</div>
</div>
/*整个弹出窗口设置，弹性布局*/
.pop{
position: fixed;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
width: 300px;
border: 1px solid #cccccc;
border-radius: 5px;
}
/*head作为关闭按钮的参考物*/
.head{
position: relative;
height: 40px;
background-color: #eeeeee;
}
/*设置行高和元素同高来使文字居中，分别设置隐藏、不换行和...*/
.title{
height: 100%;
margin: 0 20px;
font: 14px/40px "微软雅黑";
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*考虑到关闭按钮位置已确定，采用绝对定位，去除按钮默认边框，以背景图方式引入图片，失败则用红色标记*/
.close{
position: absolute;
border: 0;
padding: 0;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
background: url('../x.png') red;
cursor: pointer;
}
/*把段落和按钮都放入内容区padding内*/
.content{
padding: 20px;
background-color: white;
font: 12px/1.5 "宋体";
}
/*段落距按钮20px*/
.text{
margin: 0 0 20px 0;
}
/*左右margin为auto使按钮居中，前提是button设为块级；去除按钮默认边框*/
.button{
display: block;
margin: 0 auto;
padding: 0;
width: 80px;
height: 30px;
border: none;
border-radius: 5px;
background-color: blue;
color: white;
text-align: center;
}
网友评论