Difference between revisions of "Team:TJUSLS China/home/index style"
| Line 258: | Line 258: | ||
right: 0; | right: 0; | ||
top: 48px; | top: 48px; | ||
| − | z-index: | + | z-index: 9999; |
width: 244px; | width: 244px; | ||
} | } | ||
Revision as of 16:23, 17 October 2016
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, lengend, button, input, textarea, th, td {
margin: 0; padding: 0;
} em,var,i{
font-style: normal;
} strong,h1,h2,h3,h4,h5,h6,var{
font-weight: normal;
} a{
text-decoration: none;
} input,textarea,select{
outline: 0; -webkit-user-select: text;
} li{
list-style: none;
} table{
border-collapse: collapse; border-spacing: 0;
} body{
font-family: "Microsoft YaHei" ; background-color: #ededed;
}
- {
box-sizing: border-box;
} .clear {
clear: both;
}
.loading1{
width: 100%; height: 100%; background: url() center no-repeat;
position: fixed;
left: 0; top:0;
} .loading1{
z-index: 999; text-align: center;
} .loading1 img { } .loading{
width: 150px; height: 15px; margin: 20px auto 0; text-align: center; font-size: 12px;
} .loading span{
display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: #ffffff; font-size: 12px; -webkit-animation: load 1.04s ease infinite;
} .loading span:last-child{
margin-right: 0px;
} @-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
} .loading span:nth-child(1){
-webkit-animation-delay:0.26s;
} .loading span:nth-child(2){
-webkit-animation-delay:0.39s;
} .loading span:nth-child(3){
-webkit-animation-delay:0.52s;
} .loading span:nth-child(4){
-webkit-animation-delay:0.65s;
} .loading span:nth-child(5){
-webkit-animation-delay:0.78s;
}
/*menu*/ .h_menu4 {
margin-left: 60px;
} .header {
text-transform:uppercase;
width: 100%; max-width: 1458px; margin: 0 auto; padding: 50px 0; } .toggleMenu {
display: none; background: #ff530d; width: 100%; color: #FFF; font-size: 1.5em;
} .nav li {
position: relative;
} .nav > li {
float: left;
} .nav li a.active { color: #fff; } .nav li a:hover { color: #fff; } .nav li a {
display: block; padding: 10px 15px; color: #C4C4C4; font-size: 1em; text-transform: uppercase; font-weight: 400; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-decoration: none;
} .nav > li > ul {
position: absolute; left: -9999px; padding: 0; z-index: 9999; background: #fff;
} .nav > li.hover > ul {
left: 20px; top: 40px;
} .nav ul { list-style: none; width: 13em; z-index: 888; } .nav li li { border-top: none; margin-bottom: 2px; } .nav li li a { border-bottom: 1px solid rgb(34, 33, 33); text-transform: uppercase; font-family: 'Source Sans Pro', sans-serif; color: #ffffff; font-size: 14px; background: #000000; padding: 20px 12px; display: block; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .nav li li a:hover { background: #ffffff; color: #000000; } .header-box {
height: 137px; background: #000000;
position: relative; }
.sec-list {
padding-bottom: 30px;
border-bottom: 2px dashed #dadfdb;
}
.sec-list h3 {
color: #333333;
font-size: 40px;
padding: 30px 0 15px;
}
.sec-list img {
width: 360px;
height: 241px;
float: left;
padding-right: 30px;
}
.sec-list .sec-list-info {
float: left;
width: calc(100% - 390px);
color: #333333;
font-size: 20px;
text-align: justify;
}
.page-box {
text-align: center;
padding: 70px 0;
}
.page {
display: inline-block;
}
.page a {
color: #333333;
font-size: 14px;
display: block;
float: left;
background: #f4f6f8;
border: 1px solid #c3c9cd;
border-radius: 2px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
margin: 0 2px;
}
.page a.active {
color: #ffffff;
background: #c3c9cd;
}
.page button {
width: 68px;
height: 34px;
color: #333333;
font-size: 14px;
display: block;
float: left;
background: #f4f6f8;
border: 1px solid #c3c9cd;
border-radius: 2px;
line-height: 34px;
text-align: center;
margin: 0 2px;
font-family: "Microsoft YaHei", "微软雅黑";
}
.up {
right: 3px;
cursor: pointer;
position: fixed;
bottom: 20px;
display: none;
}
.sec-menu {
position: absolute;
right: 0;
top: 48px;
z-index: 9999;
width: 244px;
}
.sec-menu ul {
width: 244px;
background: #222222;
padding: 0 10px 40px;
margin-top: 89px;
display: none;
}
.sec-menu li {
border-bottom: 1px dashed #c8c8c8;
text-align: center;
}
.sec-menu li a {
display: block;
font-family: Arial;
font-size: 20px;
color: #ffffff;
line-height: 64px;
}
.sec-menu li a:hover {
background: #393939;
}
.sec-menu img {
position: absolute;
left: 100px;
top: 0;
cursor: pointer;
}
.sec-menu img.sec-menu-close {
display: none;
}
/*foot*/ .footer_bg { background: #000000; } .footer_wrap { width: 95%; margin: 0 auto; } .footer { padding: 6% 2%; } .span1_of_4 { float: left; width: 20.3333333%; margin-right: 4%; }
- bodyContent h2 {
font-size: 2em; } .span1_of_4 h2 { font-size: 1.2em; color: #ffffff; text-transform: uppercase; margin-bottom: 8%; }
- bodyContent h1, #bodyContent h2 {
margin-bottom: .6em; } .footer_bg ul { margin: 0.3em 0 0 1.6em; padding: 0; } .f_nav1 li { display: inline-block; } .f_nav1 li a { display: block; color: #ABABAB; line-height: 1.8em; font-size: 1em; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .f_nav1 li a:hover { color: #ffffff; text-decoration: underline; } .f_nav2 li:hover { background: #333333; } .f_nav2 li { margin: 10px 5px 0 0; display: inline-block; background: #222222; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; } .f_nav2 li a { display: block; color: #ABABAB; font-size: 1em; padding: 10px; }
- HQ_page p {
font-family: "Arial",Helvetica,sans-serif; font-size: 13px; text-align: justify; } p.f_para { color: #ABABAB; line-height: 1.8em; font-size: 13px; } .search { margin-top: 8%; position: relative; background: #ffffff; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; } .search input[type="text"] { font-family: 'Source Sans Pro', sans-serif; padding: 10px 16px; outline: none; color: #5a5a5a; background: none; border: none; width: 68.33333%; line-height: 1.5em; position: relative; font-size: 1em; text-transform: capitalize; } .search input[type="submit"] { background: url(../images/search1.png) no-repeat 8px 12px; padding: 10px 0px; border: none; cursor: pointer; width: 14.33%; line-height: 1.5em; outline: none; position: absolute; } .footer_btm { margin-top: 4%; border-top: 6px solid #222222; padding-top: 4%; } .copy { float: left; } .copy p { font-size: 1em; text-transform: uppercase; color: #B9B9B9; } .copy p span { color: #ffffff; } .copy p a { color: #ffffff; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } @media screen and (max-width: 1366px) {
.loading1 img {
padding-top: 210px;
}
/*banner*/
.banner-bg {
height: 760px;
background: url("
") center top no-repeat;
background-size: 130%;
}
.banner {
position: relative;
padding-top: 44px;
width: 1224px;
margin: 0 auto;
}
.banner .prev {
position: absolute;
top: 270px;
left: -56px;
}
.banner .next {
position: absolute;
top: 270px;
right: -56px;
}
.bannerimg {
position: relative;
width: 1224px;
height: 534px;
margin: 0 auto;
border: 6px solid #FFFFFF;
overflow: hidden;
}
.bannerimg li {
opacity: 0;
position: absolute;
left: 0;
top: 0;
}
.bannerimg li img {
width: 1212px;
height: 522px;
}
.bannerimg li.active {
opacity: 1;
}
.banner .dot {
position: absolute;
top: 541px;
right: 50px;
z-index: 99;
cursor: pointer;
}
.dot li {
display: inline-block;
width: 10px;
height: 10px;
background-color: #ffffff;
border-radius: 10px;
box-sizing: content-box;
vertical-align: middle;
margin: 0 4px;
color: transparent;
cursor: pointer;
}
.dot li.active {
border: 2px solid #FFFFFF;
background-color: transparent;
vertical-align: middle;
}
/*中间部分*/
.zz-content {
background-color: #ededed;
padding: 50px 60px;
border-radius: 2px 2px 0 0;
margin-top: -104px;
min-width: 1349px;
}
.zz-content h1 {
font-size: 40px;
color: #413b4b;
padding-bottom: 20px;
}
.zz-form {
background: #FFFFFF;
padding: 30px 0 20px 0;
}
div[class^="form"] {
float: left;
width: 33.3%;
height: 300px;
text-align: center;
}
div[class^="form"] img {
width: 355px;
height: 272px;
margin-top: 10px;
}
.zz-form .more {
margin: 0 auto;
}
.more {
font-size: 20px;
width: 164px;
}
.more a {
color: #3366cc;
vertical-align: middle;
}
.more img {
vertical-align: middle;
}
.form-1, .form-2, .form-4, .form-5 {
border-right: 1px dashed #dadfdb;
}
.form-1, .form-2,.form-3 {
border-bottom: 1px dashed #dadfdb;
}
.software {
padding-top: 50px;
}
.software-left {
float: left;
width: 555px;
}
.software h2 {
color: #413b4b;
font-size: 40px;
text-align: right;
line-height: 114px;
padding-top: 68px;
}
.software p {
color: #222222;
font-size: 24px;
text-align: justify;
}
.software-right {
float: right;
}
.software-right img {
width: 630px;
}
.software .more {
margin-top: 70px;
}
.human {
background: url("
") no-repeat #FFFFFF;
background-size: 100%;
margin-top: 60px;
}
.human h2 {
color: #413b4b;
font-size: 40px;
text-align: center;
padding: 110px 0 90px 0;
}
.human-info {
border: 15px solid #FFFFFF;
border-radius: 2px;
width: 300px;
float: left;
margin: 0 14px;
}
.humanBox {
width: 984px;
margin: 0 auto;
}
.human-info img {
width: 100%
}
.human-info .number {
color: #79729c;
font-size: 64px;
float: left;
font-weight: bold;
}
.human-info .name {
font-size: 20px;
float: left;
padding: 18px 0 0 0;
}
.human-info .introduce {
font-size: 18px;
color: #333333;
float: left;
width: 172px;
padding: 4px 0 0 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.human .more {
margin: 0 auto;
padding: 40px 0;
}
.team {
margin-top: 60px;
}
.team h2 {
color: #413b4b;
font-size: 40px;
padding-bottom: 40px;
}
.team img {
width: 100%;
}
/*second page*/
.second-title {
height: 280px;
background: url("
") center no-repeat;
line-height: 280px;
text-align: center;
color: #ffffff;
font-size: 58px;
font-family: Arial;
position: relative;
}
.second-title-img {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.second-title-img img {
position: absolute;
top: 30px;
left: 20px;
}
.second-content {
border: 1px solid #dfdfdf;
background: #ffffff;
margin: 60px 60px 100px 60px;
padding: 14px 20px 0 20px;
position: relative;
max-width: 1458px;
}
}
@media screen and /*(max-width: 1920px ) and*/ (min-width: 1367px) {
.loading1 img {
padding-top: 334px;
}
/*banner*/
.banner-bg {
height: 839px;
background: url("") center top no-repeat;
background-size: 100% 100%;
}
.banner {
position: relative;
padding-top: 32px;
width: 1458px;
margin: 0 auto;
}
.banner .prev {
position: absolute;
top: 308px;
left: -90px;
}
.banner .next {
position: absolute;
top: 308px;
right: -90px;
}
.bannerimg {
position: relative;
width: 1458px;
height: 633px;
margin: 0 auto;
border: 6px solid #FFFFFF;
overflow: hidden;
}
.bannerimg li {
opacity: 0;
position: absolute;
left: 0;
top: 0;
}
.bannerimg li img {
width: 100%;
height: 100%;
}
.bannerimg li.active {
opacity: 1;
}
.banner .dot {
position: absolute;
top: 628px;
right: 50px;
z-index: 99;
cursor: pointer;
}
.dot li {
display: inline-block;
width: 10px;
height: 10px;
background-color: #ffffff;
border-radius: 10px;
box-sizing: content-box;
vertical-align: middle;
margin: 0 4px;
color: transparent;
cursor: pointer;
}
.dot li.active {
border: 2px solid #FFFFFF;
background-color: transparent;
vertical-align: middle;
}
/*中间部分*/
.zz-content {
background-color: #ededed;
padding: 50px 90px;
border-radius: 2px 2px 0 0;
width: 1637px;
margin: -104px auto 0;
}
.zz-content h1 {
font-size: 40px;
color: #413b4b;
padding-bottom: 20px;
}
.zz-form {
background: #FFFFFF;
padding: 30px 0 20px 0;
}
div[class^="form"] {
float: left;
width: 33.3%;
height: 323px;
text-align: center;
}
div[class^="form"] img {
width: 380px;
height: 291px;
margin-top: 10px;
}
.zz-form .more {
margin: 0 auto;
}
.more {
font-size: 20px;
width: 164px;
}
.more a {
color: #3366cc;
vertical-align: middle;
}
.more img {
vertical-align: middle;
}
.form-1, .form-2, .form-4, .form-5 {
border-right: 1px dashed #dadfdb;
}
.form-1, .form-2,.form-3 {
border-bottom: 1px dashed #dadfdb;
}
.software {
padding-top: 50px;
}
.software-left {
float: left;
width: 662px;
padding-left: 50px;
}
.software h2 {
color: #413b4b;
font-size: 40px;
text-align: right;
line-height: 114px;
padding-top: 143px;
}
.software p {
color: #222222;
font-size: 24px;
text-align: justify;
}
.software-right {
float: right;
}
.software-right img {
width: 734px;
}
.software .more {
margin-top: 70px;
}
.human {
background: url("") no-repeat #FFFFFF;
background-size: 100%;
margin-top: 60px;
}
.human h2 {
color: #413b4b;
font-size: 40px;
text-align: center;
padding: 110px 0 90px 0;
}
.human-info {
border: 15px solid #FFFFFF;
border-radius: 2px;
width: 390px;
float: left;
margin: 0 14px;
}
.humanBox {
width: 1286px;
margin: 0 auto;
}
.human-info img {
width: 100%
}
.human-info .number {
color: #79729c;
font-size: 64px;
float: left;
font-weight: bold;
}
.human-info .name {
font-size: 20px;
float: left;
padding: 18px 0 0 0;
}
.human-info .introduce {
font-size: 18px;
color: #333333;
float: left;
width: 262px;
padding: 4px 0 0 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.human .more {
margin: 0 auto;
padding: 40px 0;
}
.team {
margin-top: 60px;
}
.team h2 {
color: #413b4b;
font-size: 40px;
padding-bottom: 40px;
}
.team img {
width: 100%;
}
/*second page*/
.second-title {
height: 280px;
background: url("") center no-repeat;
line-height: 280px;
text-align: center;
color: #ffffff;
font-size: 58px;
font-family: Arial;
position: relative;
}
.second-title-img {
position: absolute;
width: 1458px;
top: 0;
left: calc(50% - 729px);
}
.second-title-img img {
position: absolute;
top: 30px;
left: 20px;
}
.second-content {
border: 1px solid #dfdfdf;
background: #ffffff;
padding: 14px 20px 0 20px;
position: relative;
width: 1458px;
margin: 60px auto 100px;
}
} /*wenzi*/ .sec-list-wenzi {} .sec-list-wenzi h3 {
font-size: 30px; color: #6AA788;
} .sec-list-wenzi .sec-wenzi-list {
font-size: 24px; color: #383737; padding: 10px 0; text-indent: 1em;
} .sec-list-wenzi .sec-wenzi-content {
font-size: 18px; padding: 0 3em; text-align: justify; color: #000000; margin-bottom: 10px;
} .sec-list-wenzi .sec-wenzi-ul {
font-size: 18px; padding: 0 3em; text-align: justify; color: #000000; margin-bottom: 10px;
} .sec-list-wenzi .wenzi-dt { } .sec-list-wenzi .wenzi-li {
margin: 0 1em;
font-style: italic;
font-size: 16px;
background: url("
") left center no-repeat;
background-size: 10px 10px;
padding: 0 1em;
} .wenzi-end {
padding: 20px 0;
} /*form*/ .sec-formBox table {
width: 100%; text-align: center;
} .sec-formBox table tr:nth-child(2n) {
background: #FFFFFF;
} .sec-formBox table tr:nth-child(2n + 1) {
background: #F6FFFA;
} .sec-formBox table tr.sec-formTitle {
background: #6AA788; color: #FFFFFF; font-size: 24px;
} .sec-formBox table tr.sec-formTitle th {
padding: 10px;
} .sec-formBox table td {
padding: 10px; font-size: 18px;
} .sec-formBox table td a {
color: #048242; text-decoration: underline;
} .sec-formBox table td a:hover {
color: #14F381;
}
