blog_tp6/public/static/css/index.css

@charset "utf-8";
/* css */
* { margin: 0; padding: 0 }
body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; color: #555; background: #efefef; line-height: 1.5; }
img { border: 0; display: block }
ul li { list-style: none; }
a { text-decoration: none; color: #555 }
a:hover { text-decoration: none; color: #000; }
.clear { clear: both; }
.blank { height: 20px; overflow: hidden; width: 100%; margin: auto; clear: both }
.f_l { float: left }
.f_r { float: right }
.ml-20 { margin-left: 20px }
.ml-10 { margin-left: 10px }
.box { width: 80%; margin: auto; overflow: hidden; clear: both; }
@media(max-width:1400px) {
    .box {width: 1000px; }
}
.nobox { width: 100% }
.c_white { background: #fff }
article { width: 1000px; margin: auto; overflow: hidden; padding: 20px 0 }
.container { width: 1000px; margin: auto }
/*header*/
header { width: 100%; background: #fff; overflow: hidden; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.logo { text-align: center; font-size: 22px; padding: 20px 0 }
nav { width: 1000px; margin: 0 auto 20px; text-align: center; border-bottom: #000 1px solid; border-top: #000 1px solid; overflow: hidden }
nav li { display: inline; line-height: 40px; padding: 0 20px }
.newsbox { width: 50%; background: #fff; margin-top: 20px }
.newsbox ul { margin: 20px; }
.newstitle { margin: 20px; line-height: 30px; border-bottom: #000 1px solid; }
.newstitle span { float: right; font-size: 18px }
.newstitle span a { color: #000; }
.newstitle b { background: #333; width: 118px; display: block; font-size: 14px; font-weight: normal; color: #FFF; text-align: center }
.newsli li { padding-left: 10px; line-height: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.sbox { width: 32%; background: #FFF; padding-bottom: 20px; position: relative; z-index: 2; }
.sbox h2 { font-size: 16px; padding: 50px 0 20px; border-bottom: #CCC 1px solid; margin: 0 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.sbox p { overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; line-height: 24px; height: 72px; padding: 20px 20px 0 20px }
.sbox.ml { margin-left: 2%; }
.sbox span { width: 80px; height: 30px; line-height: 30px; text-align: center; margin: auto; display: block; background: #333; color: #FFF; position: absolute }
.read { display: block; text-align: center; margin: 20px auto 0; width: 100px; border: #333 1px solid; line-height: 26px; position: relative; }
.read:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 26px; background: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.5s; transition: 0.5s; z-index: -1; }
.read:hover { color: #fff; }
.read:hover:before { width: 100px; }
.blogs { width: 66%; float: left }
.bloglist { background: #FFF; overflow: hidden; padding: 20px; margin-bottom: 20px; }
.bloglist h2 { font-size: 18px; position: relative }
.bloglist h2:before { content: ""; width: 3px; height: 26px; position: absolute; left: -20px; top: 0; background: #333 }
.bloglist p { overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; line-height: 24px; height: 72px; margin: 10px 0 0 }
.blogs div.more { text-align: center; color: #666; width: 100%; clear: both; margin: 25px 0 10px 0; }
.blogs div.more a { border: 1px solid #333; padding: 5px 10px; background: #333; color: #FFF }
aside { width: 32%; float: right }
.ztbox { border: #000 1px solid; background: #fff; overflow: hidden; }
.ztbox li { border-bottom: #888 1px solid; line-height: 40px; height: 40px; padding-left: 70px; position: relative; }
.ztbox li:last-child { border-bottom: 0 }
.ztbox li:after { content: "》"; position: absolute; right: 10px; color: #000; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; transition: all .5s ease; }
.ztbox li:hover:after { right: 0px }
.ztbox li:before { background: #000; position: absolute; left: 0; width: 50px; text-align: center; color: #FFF }
.ztbox li:nth-child(1):before { content: "1"; }
.ztbox li:nth-child(2):before { content: "2"; }
.ztbox li:nth-child(3):before { content: "3"; }
.ztbox li:nth-child(4):before { content: "4"; }
.ztbox li:nth-child(5):before { content: "5"; }
.ztbox li:nth-child(6):before { content: "6"; }
.ztbox li:nth-child(7):before { content: "7"; }
.ztbox li:nth-child(8):before { content: "8"; }
.paihang { background: #FFF; overflow: hidden; margin-top: 20px }
.paihang h2 { font-size: 16px; padding: 8px 20px; position: relative }
.paihang h2:after { content: ""; background-color: #282828; left: 20px; width: 60px; height: 2px; bottom: 0; position: absolute; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.paihang ul { padding: 10px 20px }
.paihang:hover ::after { width: 90px; }
.paihang ul li { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; line-height: 26px }
footer { width: 100%; text-align: center; background: #FFF; padding: 10px 0; line-height: 26px; border-top: #333 1px solid; }
/*list*/
.place { margin: 10px 0; width: 100%; overflow: hidden; background: #fff; }
.place a { display: block; float: left; padding: 5px 0; background: #fff; margin: 0 10px; width: 100px; text-align: center }
.pagelist { text-align: center; color: #666; width: 100%; clear: both; margin: 25px 0 10px 0; padding-top: 20px }
.pagelist a { color: #666; margin: 0 2px 10px; border: 1px solid #fff; padding: 5px 10px; background: #FFF; display: inline-block; }
.pagelist a:hover { color: #333; }
.pagelist > b { border: 1px solid #333; padding: 5px 10px; background: #333; color: #FFF }
.pagelist  input{ color: #666; margin: 0 2px 10px; border: 1px solid #fff; padding: 5px 5px; height: 22px; display: inline-block;}
a.curPage { color: #333; font-weight: bold; }
/*about*/
.newsview { padding: 20px; overflow: hidden; background: rgba(255,255,255,1); margin: 20px 0 }
.newsview h2 { font-size: 16px; width: 120px; height: 30px; line-height: 30px; text-align: center; background: #333; color: #fff; margin: 10px 0; font-weight: normal; }
.news_infos { padding-bottom: 20px }
/*infosbox*/
.infosbox { float: left; width: 66%; overflow: hidden; background: #FFF; }
.newsview { padding: 0 30px }
.news_title { font-size: 24px; font-weight: normal; }
.news_author { width: 100%; color: #999; line-height: 18px; }
.news_author span { margin-right: 10px; padding-left: 20px }
.news_about { color: #888888; border: 1px solid #F3F3F3; padding: 10px; margin: 20px auto 15px auto; line-height: 23px; background: none repeat 0 0 #F6F6F6; }
.news_about strong { color: #38485A; font-weight: 400 !important; font-size: 13px; padding-right: 8px; }
.news_content { line-height: 24px; font-size: 14px; }
.news_content p { overflow: hidden; padding-bottom: 4px; padding-top: 6px; word-wrap: break-word; }
.tags a { background: #333; padding: 3px 8px; margin: 0 5px 0 0; color: #fff; }
.tags { margin: 30px 0; }
.infosbox .news_con { line-height: 1.8; font-size: 16px; text-align: justify; }
.infosbox .news_con p { margin-bottom: 25x }
.infosbox .news_con img { max-width: 650px; height: auto; }
.infosbox .news_con table { border-collapse: collapse; display: table; width: 100%; text-align: center; background-color: transparent; border-spacing: 0; }
.infosbox .news_con table tbody{ border: 0; } 
.infosbox .news_con table tr{ border: 0; border-top: 1px solid #ddd; background-color: #fff; }
.infosbox .news_con table tr td{ font-size: 14px; color: #4f4f4f; line-height: 22px; border: 1px solid #ddd; padding: 8px; word-break: normal!important; vertical-align: middle; }
.infosbox .news_con table tr th{ font-size: 14px; color: #4f4f4f; line-height: 22px; border: 1px solid #ddd; padding: 8px; word-break: normal!important; vertical-align: middle; }
.infosbox .share { padding: 20px; }
.nextinfo { line-height: 24px; width: 100%; background: #FFF; border-radius: 10px; overflow: hidden; margin: 20px 0 }
.nextinfo p { padding: 4px 10px; border-radius: 5px; }
.nextinfo a:hover { color: #000; text-decoration: underline }
.diggit { width: 140px; margin: 20px auto; background: #E2523A; color: #fff; box-shadow: 1px 2px 6px 0px rgba(0,0,0,.2); border-radius: 3px; line-height: 40px; text-align: center; }
.diggit a { color: #fff; }
#diggnum { margin: 5px; }
.otherlink, .xzsm, .ffsm { width: 100%; background: #FFF; overflow: hidden; margin: 20px 0 }
.otherlink h2 { border-bottom: #000 2px solid; line-height: 40px; font-size: 14px; padding-left: 40px; color: #000 }
.otherlink ul { margin: 10px 0 }
.otherlink li { line-height: 24px; height: 24px; display: block; width: 290px; float: left; overflow: hidden; margin-right: 30px; padding-left: 10px; }
.otherlink li a:hover { text-decoration: underline; color: #000 }
.news_pl { margin: 10px 0; width: 100%; background: #FFF; overflow: hidden; margin: 20px 0 }
.news_pl h2 { border-bottom: #000 2px solid; line-height: 40px; font-size: 14px; padding-left: 30px; color: #000 }
.xzsm ul, .ffsm ul { padding: 20px; line-height: 24px; border-top: 6px solid #a6b5c5; }
.bloginfo { overflow: hidden; margin-top: 20px }
.bloginfo ul li { float: left; font-size: 12px; margin: 0 15px 0 0; color: #748594; line-height: 1.5; display: inline-block; }
.bloginfo ul li a { color: #748594; }
.bloginfo ul li a:hover { color: #000 }
/*time*/
.timebox { background: #FFF; padding: 30px }
.timebox span { position: relative; line-height: 32px; padding-right: 40px; color: #999 }
.timebox span:after { position: absolute; content: ""; width: 2px; height: 40px; background: #e0dfdf; right: 18px }
.timebox li { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.timebox li i { position: relative; font-style: normal }
.timebox li i:before { content: " "; height: 10px; width: 10px; border: 2px solid #cccaca; background: #fff; position: absolute; top: 4px; left: -26px; border-radius: 50%; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
.timebox li:hover i:before { background: #333 }
/*phone*/
 @media screen and (min-width: 768px) and (max-width: 1023px) {
nav, article { width: 100% }
.box { width: 100% }
}
 @media only screen and (max-width: 767px) {
nav, article { width: 100% }
.box { width: 94% }
aside { display: none }
.sbox { width: 100%; margin: 0 auto 10px }
.sbox.ml { margin-left: 0; }
.blogs { width: 100% }
.newsbox { width: 100% }
nav { border: none }
#starlist { width: 90%; margin: auto; }
nav li { width: 33%; padding: 0; display: block; float: left; border-top: 1px solid #333; border-bottom: 1px solid #333; }
nav li:nth-child(n+4) { border-top: none }
nav li:nth-child(2), nav li:nth-child(5), nav li:nth-child(8) { border-left: 1px solid #333; border-right: 1px solid #333; }
.infosbox { width: 100% }
}
button.submit {
    width: 100%;
    font-family: "Roboto", "Open Sans", sans-serif;
    font-weight: 400;
    padding: 10px 12px;
    max-width: 27.75em;
    min-height: 26px;
    background: #F7F7F7;
    color: #333333;
    border: solid 1px #D4D4D4;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    cursor: pointer
} 

/*read*/
.news_con h2 { font-size: 16px; width: auto; height: 30px; line-height: 30px; text-align: center; background: #333; color: #fff; margin: 10px 0; font-weight: normal;display:inline-block !important; display:inline;padding: 0px 20px;}

a.current_category {
    background: #dbd3d3
}
code:not(.language-plaintext,.language-php,.language-c,.language-js,.language-javascript,.language-java,.language-sql,.language-html) {
    color: #c7254e;
    background-color: #f9f2f4;
}

/* 分页 */
.pagination {
    display: inline-block;
    padding-left: 0;
    border-radius: 4px;
    list-style: none;
}

.pagination li {
    float: left;
    border: 1px solid #DDD;
    border-left: none;
    min-width: 31px;
    height: 28px;
    line-height: 28px;
    text-align: center;
}

.pagination li.active,
li.disabled {
    width: 31px;
    text-align: center;
    color: #737373;
    cursor: default;
    background: #f5f5f5;
}

.pagination li a {
    color: #3399d5;
}

.pagination li:first-child {
    border-left: 1px solid #DDD;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.pagination li:last-child {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.pagination li:hover {
    background: #f5f5f5;
}