li{
 list-style-type: none;
}
a{
 text-decoration: none;
 color: black;
}

.container{
 max-width: 1200px;
    margin: 30px auto;
    min-height: 500px;
}
.TitleList{
 float: left;
 width: 20%;
 margin-left: 10px;
}
.liTitle{
 background-color: #F2F2F2;
}
.TitleList li{
 line-height: 50px;
 text-align: center;
 border: 1px solid #CCCCCC;
}

.TitleList li:hover{
 background-color: #F2F2F2;
}
.articleTitle{
 float: right;
 width: 70%;
}
.articleTitle li{
 padding-left: 10px;
 line-height: 45px;
 border-bottom: 1px dashed #CCCCCC;
 letter-spacing: 1px;
 font-size: 15px;
 height: 45px;
}
.articleTitle li:hover{
 background-color: #F2F2F2;
 color: #b81724;
}
.title{
 display: inline-block;
 width: 68%;
 overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.name{
 display: inline-block;
 width: 10%;
 overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    padding-left: 2%;
}
.date{
 display: inline-block;
 overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}


.article{
 float: right;
 width: 75%;
 min-height: 500px;
 background-color: #f3f3f3;
 padding: 0 10px;
}
.Title{
 text-align: center;
 line-height: 60px;
}
.Date{
 text-align: center;
 line-height: 40px;
 border-bottom: 1px solid #CCCCCC;
}
.read{
 padding-left: 40px;
}