@charset "UTF-8";
/*main部分开始*/
.main {
height: 469px;
background-color: #526DA0;
}
.main-bread {
height: 49px;
line-height: 49px;
color: #fff;
font-size: 16px;
}
.main-bread a {
color: #fff; /*a标签不继承颜色，所以需要单独的设置*/
}
.main-bread a:hover {
text-decoration: underline;
}
.main-video-left {
width: 860px;
height: 400px;
background-color: #fff;
float: left;
}
.main-video-right {
width: 275px;
height: 375px;
/*background-color: blue;*/
background-color: #fff;
float: right;
padding: 25px 18px 0 16px;
color: #333;
}
.main-video-right h2 {
font-size: 22px;
color: #333;
font-family: "microsoft yahei";
height: 35px;
}
.main-video-right-desc {
line-height: 24px;
}
.main-video-right-datetime {
height: 50px;
line-height: 50px;
}
.main-video-right-course {
height: 65px;
}
.main-video-right-price {
font-size: 30px;
font-family: "microsoft yahei";
color: #ff6400;
}
.main-video-right-buy {
height: 45px;
}
.main-video-right-btn a {
width: 130px;
height: 46px;
line-height: 46px;
text-align: center;
background-color: #ff6400;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: "microsoft yahei";
border-radius: 10px;
}
/*main部分结束*/
/*course部分开始*/
.course {
height: 300px;
background-color: #F2F2F2;
padding-top: 34px;
}
.course-left {
width: 860px;
height: 300px;
/*background-color: red;*/
float: left;
}
.course-left-top {
height: 44px;
line-height: 44px;
border-bottom: 1px solid #ccc;
}
.course-left-top ul li {
float: left;
font-size: 14px;
color:#333;
font-family: "microsoft yahei";
padding: 0 20px;
}
.course-left-top ul li.current {
border-top: 3px solid #ff6400;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 2px solid #fff; /*li本身的2像素白色底部边框，压住父盒子的底部边框*/
height: 40px;
line-height: 40px;
background-color: #fff;
}
.course-left-bottom {
height: 968px;
border: 1px solid #ccc;
border-top: 0;
background-color: #fff;
padding: 32px 20px 0;
}
.course-left-bottom ul li{
height: 45px;
line-height: 45px;
border-bottom: 1px dashed #ccc;
}
.course-left-bottom ul li a {
width: 76px;
height: 23px;
line-height: 23px;
text-align: center;
border: 1px solid #ff6400;
display: inline-block; /*将行元素转换成行内块元素*/
float: right;
margin-top: 10px;
border-radius: 12px;
padding: 0 10px;
position: relative; /*相当于是限制子元素i*/
}
.course-left-bottom ul li a i {
width: 0;
height: 0;
border-width: 4px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #ff6400;
position: absolute;
top: 50%;
margin-top: -4px;
right: 10px;
}
/*#tabs-1 li {*/
/*width: 0;*/
/*height: 0;*/
/*border-width: 4px;*/
/*border-style: dashed dashed dashed solid;*/
/*border-color: transparent transparent transparent #ff6400;*/
/*/!*top: 50%;*!/*/
/*margin-top: -4px;*/
/*right: 10px;*/
/*}*/
.course-right {
width: 311px;
height: 1047px;
/*background-color: blue;*/
float: right;
}
.course-right h2 {
height: 44px;
line-height: 44px;
font-size: 18px;
color: #333;
}
.course-right ul li {
height: 230px;
border: 1px solid #ccc;
margin-bottom: 30px;
}
.course-right ul li:hover {
border: 1px solid #ff6400;
}
.course-right ul li img {
width: 100%;/*让图片的宽度和父级元素是一样宽*/
}
.course-right ul li p {
height: 60px;
line-height: 60px;
font-size: 18px;
padding: 0 11px;
color: #333;
}
.course-right ul li p a {
width: 73px;
height: 28px;
line-height: 28px;
text-align: center;
background-color: #ff6400;
display: inline-block;
float: right;
font-size: 14px;
margin-top: 16px;
border-radius: 10px;
color: #fff;
}
/*course部分结束*/
这样子让看什么的？？
那就让我们看看css的美好
在css最前面加这样一行：
body,div,span,ul,ol,li,table,tr,td{margin:0;padding:0;border:none;list-style:none;}
不同浏览器的body默认属性设置不同，上面的代码可以帮你先统一默认属性。
你这样让别人怎么给你看 问问题也是一种艺术