讨论题

定宽+自适应宽

/*方法一：弹性布局*/

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

}

   

       

• 课程



       

• 学习计划



       

• 技能图谱



   

   

       

课程内容

       

学习计划内容

       

技能图谱内容

   

弹性布局

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

   

       

标题栏

       

       

内容区段落

        确定

   

/*整个弹出窗口设置，弹性布局*/

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

}