body{ margin:0; padding:0; overflow:hidden; } a { text-decoration: none; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color:transparent;//方法一 } a:visited { color: #0000FF; /*连接访问的颜色变化*/ } .common_bg{ height:910px; width:1920px; background-repeat: no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } #not_found .refresh{ color:#47effc; font-size:16px; cursor:pointer; } #not_found .back_index{ display: inline-block; width: 118px; height: 32px; line-height: 32px; text-align: center; border: solid 1px #568dff; color: #568dff; font-size: 18px; margin-left: 12px; border-radius: 6px; cursor:pointer; } #not_found > div{ position:absolute; top: 222px; left: 743px; } #bad_request .back_index{ width:210px; height:50px; display:inline-block; font-size:24px; background-color:#fc817e; color:#fff; border-radius:10px; text-align:center; line-height:50px; position:absolute; left: calc(50% - 105px); bottom:104px; cursor:pointer; } #upgrading .back_index{ width:180px; height:53px; display:inline-block; font-size:24px; background-color:#568dff; color:#fff; border-radius:10px; text-align:center; line-height:53px; position:absolute; left: 212px; top:319px; cursor:pointer; } #not_found{ background-image:url(../images/notfound.png); background-position-x:-1px; } #not_record{ background-image:url(../images/notrecord.png) ; } #upgrading{ background-image:url(../images/upgrading.png) ; } #bad_request{ background-image:url(../images/badrequest.png) ; } #overdue{ background-image:url(../images/overdue.png) ; } /*媒体查询,参考部分Bootstarp框架*/ /*当页面大于1200px时,大屏幕,主要显示PC端*/ @media (min-width: 1200px){ } /*在992 和1199 像素之间的屏幕里,中等屏幕,分辨率低的PC*/ @media (min-width: 992px) and (max-width: 1199px){ #not_found{ width:1600px; height: 570px; } #not_found > div { top: 189px; left: 600px; } #upgrading{ width:1200px; height: 570px; } #upgrading .back_index{ top:200px; left: 136px; width: 146px; height: 42px; font-size: 20px; line-height: 42px; } #overdue{ width: 1600px; height: 760px; } } /*在768 和991 像素之间的屏幕里,小屏幕,主要是PAD*/ @media (min-width: 768px) and (max-width: 991px){ #not_found{ width:1200px; height: 570px; } #not_found > div { top: 136px; left: 446px; } #not_found .refresh { font-size: 12px; } #not_found .back_index { width: 88px; height: 24px; line-height: 24px; color: #568dff; font-size: 14px; } #not_record{ width: 1200px; height: 570px; } #upgrading{ width: 950px; height: 448px; } #upgrading .back_index{ top: 168px; left: 108px; width: 146px; height: 42px; font-size: 20px; line-height: 42px } #overdue{ width: 1200px; height: 600px; } } /*在480 和767 像素之间的屏幕里,超小屏幕,主要是手机*/ @media (min-width: 480px) and (max-width: 767px){ #not_found{ background-image:url(../images/notfound_wap.png); width:480px; height:392px; top:44%; } #not_found > div { top: 434px; left: calc(50% - 96px); } #not_found .refresh { font-size: 16px; display: block; position: relative; top: 68px; text-align: center; color:#696a6a; } #not_found .back_index { color: #568dff; font-size: 18px; width: 204px; } #bad_request{ background-image:url(../images/badrequest_wap.png); width:480px; height:480px; top:44%; } #bad_request .back_index{ bottom: -92px; width: 180px; left: calc(50% - 90px); font-size: 20px; height: 40px; line-height: 40px; } #upgrading{ background-image:url(../images/updrading_wap.png); width:480px; height:342px; top:44%; } #upgrading .back_index{ top:402px; left: calc(50% - 73px); width: 146px; height: 42px; font-size: 20px; line-height: 42px; } #not_record{ background-image:url(../images/notrecord_wap.png); width:480px; height:480px; } #overdue{ background-image:url(../images/overdue_wap.png); width: 480px; height: 564px; } } /*在小于480px的屏幕里,微小屏幕,更低分辨率的手机*/ @media (max-width: 479px){ #not_found{ background-image:url(../images/notfound_wap.png); width:320px; height:262px; top:44%; } #not_found > div { top: 284px; left: calc(50% - 96px); } #not_found .refresh { font-size: 16px; display: block; position: relative; top: 68px; text-align: center; color:#696a6a; } #not_found .back_index { color: #568dff; font-size: 18px; width: 204px; margin-left:0; } #bad_request{ background-image:url(../images/badrequest_wap.png); width: 320px; height: 320px; top:44%; } #bad_request .back_index{ bottom: -92px; width: 180px; left: calc(50% - 90px); font-size: 20px; height: 40px; line-height: 40px; } #upgrading{ background-image:url(../images/updrading_wap.png); width: 320px; height: 228px; top:44%; } #upgrading .back_index{ top: 268px; left: calc(50% - 65px); width: 130px; height: 36px; font-size: 16px; line-height: 36px; } #not_record{ background-image:url(../images/notrecord_wap.png); width: 320px; height: 320px; } #overdue{ background-image:url(../images/overdue_wap.png); width: 320px; height: 378px; } }