vipAllDay/css/demo.css

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}
#container {
    width: 960px;
    height: 627px;
    padding-left: 23px;
    /* 已知宽高盒子 在页面居中 */
    margin: 20px auto;
    border: 1px solid #000;
}
/* 头部样式 */
#header {
    width: 100%;
    height: 58px;
    overflow: hidden;
}
/* 100 376 91 */
#header .logo {
    width: 100px;
    height: 100%;
    float: left;
    padding-top: 11px;
}
#header .logo img {
    width: 100px;
    height: 36px;
}
/* 、48 237 84 */
#header .search {
    width: 376px;
    height: 26px;
    float: left;
    overflow: hidden;
    margin-left: 178px;
    margin-top: 17px;
    border-radius: 20px;
    background: #eee;
    border: 1px solid #ccc;
}
#header .search .tit {
    width: 48px;
    height: 100%;
    float: left;
    font-size: 13px;
    color: #ccc;
    text-align: center;
    line-height: 26px;
}
#header .search input {
    width: 237px;
    height: 100%;
    float: left;
    border:none;
    outline: none;
    background-color: #eee;
}
#header .search .btn {
    width: 84px;
    height: 100%;
    float: right;
    font-size: 13px;
    background-color: #00f;
    border-radius: 20px;
    text-align: center;
    line-height: 24px;
    color: #fff;
}
#header .login {
    width: 91px;
    height: 100%;
    float: right;
    padding-top: 12px;
    overflow: hidden;
}
.icon-xin:before {
    content: "\e90f";
    font-size: 23px;
}

.icon-shoucang:before {
    content: "\e626";
    font-size: 23px;
}
#header .login .user {
    width: 32px;
    height: 27px;
    font-size: 12px;
    text-align: center;
    line-height: 27px;
    color:#00f;
    float: right;
    /* display: inline-block; */
    background-color: #eee;
}
/* 内容样式 */
#main {
    width: 100%;
    height: 499px;
}
#main .nav {
    width: 100%;
    height: 40px;
    border-radius: 2px;
    background: #00f;
}
#main .nav ul {
    overflow: hidden;
}
#main .nav ul li {
    float: left;
    padding: 6.3px 7px;
    /* margin: 7px 0 0px 38px; */
}
#main .nav ul li a {
    color: #fff;
}
#main .nav ul li:hover {
    background-color: #f00;
}
#main .nav ul li:hover a {
    color: #ff0;
}
#main .television {
    width: 100%;
    height: 217px;
    margin-top: 22px;
}
#main .television .title {
    width: 100%;
    height: 28px;
    overflow: hidden;
}
#main .television .title .left {
    width: 227px;
    height: 100%;
    float: left;
}
#main .television .title .left ul {
    overflow: hidden;
}
#main .television .title .left ul li {
    float: left;
    font-size: 16px;
}
#main .television .title .left ul li:nth-child(odd) {
    padding: 3px 9px;
}
#main .television .title .left ul li:nth-child(odd):hover {
    color: #00f;
    border-bottom: 2px solid #00f;
}
#main .television .title .left ul li:nth-child(even) {
    width: 1px;
    height: 21px;
    margin: 4px 3px 0;
    background: #eee;
} 
#main .television .title .right {
    width: 177px;
    height: 100%;
    float: right;
}
#main .television .title .right ul {
    overflow: hidden;
}
#main .television .title .right ul li{
    float: left;
    font-size: 14px;
    color: #ccc;
    margin-top: 4px;
    margin-left: 16px;
}
#main .television .works {
    width: 100%;
    height: 165px;
    margin-top: 19px;
    overflow: hidden;
}
#main .television .works .left {
    width: 293px;
    height: 100%;
    float: left;
    background: #ff0;
}

#main .television .works .left img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
}
#main .television .works .right {
    width: 613px;
    height: 100%;
    float: right;
    overflow: hidden;
}
#main .television .works .right dl {
    width: 142px;
    height: 165px;
    float: left;
    margin-left: 15px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
}
#main .television .works .right dl:first-child {
    margin-left: 0;
}
#main .television .works .right dl dt {
    width: 100%;
    height: 78px;
}
#main .television .works .right dl dt img {
    width: 100%;
    height: 100%;
}
#main .television .works .right dl dd .tit {
    font-size: 16px;
    margin-top: 2px;
    color: #000;
}
#main .television .works .right dl dd .option {
    font-size: 11px;
    margin-top: 5px;
    color: #38445a;
}
#main .television .works .right dl dd .person {
    font-size: 11px;
    margin-top: 18px;
    color: #ccc;
}
/* 页尾样式 */
#footer {
    width: 100%;
    height: 68px;
    background: #f00;
}