.main{ margin-top:80px; } .news-banner{ width:100%; height: 460px; background: url('../images/newsBanner.jpg') no-repeat left top/cover; } .stepsWords{ text-align: center; position: relative; margin:80px auto 40px; width:210px; font-size:32px; } .stepsWords .steps-left{ position:absolute; top:10px; left:0; width:25px; height:25px; background: url("../images/sprite.png") no-repeat 0 0; } .stepsWords .steps-right{ position:absolute; top:10px; right:0; width:25px; height:25px; background: url("../images/sprite.png") no-repeat -25px 0; } .line{ width:100%; height:1px; background-color: #ccc; } .news-thumbnail{ margin-top:64px; } .caption{ background-color: #f5f5f5; } .pagination>.active>a{ background-color: coral; } .news-title{ display: inline-block; } .news-time{ margin-top:30px; } @media screen and (min-width: 1367px) and (max-width: 1440px) { .news-banner{ height:330px; } } @media screen and (min-width: 1281px) and (max-width: 1366px) { .news-banner{ height:310px; } .news-title{ font-size: 22px; } .news-time{ margin-top: 26px; } } @media screen and (min-width: 1025px) and (max-width: 1280px) { .news-banner{ height:270px; } .news-title{ font-size: 22px; } .news-time{ margin-top: 26px; } .stepsWords{ margin-top:60px; } } @media screen and (min-width: 0) and (max-width: 1024px) { .news-banner{ height:260px; } .news-title{ font-size: 20px; } .news-time{ margin-top: 26px; font-size: 13px; } .stepsWords{ margin-top:50px; } .news-thumbnail{ margin-top:35px; } }