Difference between revisions of "Template:UESTC Software/divide dou css"
Line 25: | Line 25: | ||
bottom:10px; | bottom:10px; | ||
font-size:0.8rem; | font-size:0.8rem; | ||
+ | opacity:0.8; | ||
} | } | ||
#c_h_s_meet{/*meetup图片*/ | #c_h_s_meet{/*meetup图片*/ |
Revision as of 18:14, 18 September 2015
/*金牌*/ .cd_half_section{/*通用*/
position: relative;
} .cd_half_section h1{
position: absolute; width: 80%; height: 90px; line-height: 90px; text-align: center; margin: auto; top: 0; bottom: 0; left: 0; right: 0; color: #f7f7f7; font-family: "faricy-new-web",helvetica,sans-serif; font-size: 70px;
} .cd_half_section p{
font-family: "faricy-new-web", helvetica, sans-serif; color:#f7f7f7; position:absolute; right:10px; bottom:10px; font-size:0.8rem; opacity:0.8;
}
- c_h_s_meet{/*meetup图片*/
background: url(/wiki/images/8/87/Uestc_software_h_p_bg.jpg)center center no-repeat; background-size:cover; -webkit-background-size:cover;
}
- c_h_s_medals{/*金牌图片*/
background: url(/wiki/images/1/1f/Uestc_software_sunrise.jpg) center center no-repeat; background-size:cover;
-webkit-background-size:cover; }
- c_h_s_attr{/*attri*/
background: url(/wiki/images/thumb/5/53/Uestc_software_ff.jpg/800px-Uestc_software_ff.jpg) center center no-repeat; background-size:cover; -webkit-background-size:cover;
}
- c_h_s_api{
background: url(/wiki/images/3/3c/Uestc_software_api_bg.jpg) center center no-repeat; background-size:cover; -webkit-background-size:cover;
}
- c_h_s_guide{
background: url(/wiki/images/f/f5/Uestc_software_guide_bg.jpg) center center no-repeat; background-size:cover; -webkit-background-size:cover;
}
- c_h_s_coll{
background: url(/wiki/images/f/f5/Uestc_software_forest.jpeg) center center no-repeat; background-size:cover; -webkit-background-size:cover;
} .dou_medal_content{
color: #666;
}
- gold{
} h3.medal_kind{
text-align:center; font-weight: 600; margin-top:100px; margin-bottom:20px !important; font-family: "faricy-new-web",helvetica,sans-serif;
} .medal_kind .m_medal{
display: block; /*float: left;*/ font-size: 30px; margin:25px 0; /*padding: 85px 0 0;*/
}
- gold{
color:#c48727;
}
- silver{
color:#a2aaaa;
}
- bronze{
color:#986936;
} .medal_kind img{
/* float: left;*/ width: 100px;
} .dou_medal_content>ul>li{
list-style-image: url(/wiki/images/a/a4/Uestc_software_Accept.png); font-size: 18px; line-height: 25px; text-align:justify; font-family: "faricy-new-web",helvetica,sans-serif; color:#222;
} .dou_medal_content ul li p{
font-weight:bold; /*text-indent:2rem;*/
} .dou_medal_content ul li a{
text-decoration:underline; color:#7b9977;
} .dou_medal_content>ul>li>ul>li{
padding-left:20px; margin-top:20px;
} .medal_answer{
padding-left:20px;
} /* --------------------------------
Main content
*/
/*总设计*/ .wrap_content{
width: 100%; position: relative;
}
.half_content{
float: left; width:50%; overflow: hidden;
} /*下滑箭头*/ .wrap_content .swiper-button-next{
position: absolute; width: 80px !important; height: 100px !important; bottom: 5px ; margin: auto !important; left: 0 !important; right: 0 !important; background-image: url(../assets/down_btn.png) !important; background-size:contain; top: 80% !important;
} @keyframes btn_change{
0%{bottom: 5px; } 100%{bottom: 15px;}
} @-webkit-keyframes btn_change{
0%{bottom: 5px; } 100%{bottom: 15px;}
} @-moz-keyframes btn_change{
0%{bottom: 5px; } 100%{bottom: 15px;}
} @-o-keyframes btn_change{
0%{bottom: 5px; } 100%{bottom: 15px;}
} .up_down{
animation:btn_change 0.2s infinite; -webkit-animation:btn_change 0.2s infinite; -moz-animation:btn_change 0.2s infinite; -o-animation:btn_change 0.2s infinite; animation-direction:alternate; -webkit-animation-direction:alternate;
} /*********************
- 左边文字屏幕********
- /
- 左边文字屏幕********
.define_content{
height: 100%;
} .dou_define_wrap{
width: 100%; height: 100%;
} .dou_define_container{
width: 100%; height: 100%;
} /*********************
- 左边文字屏幕end********
- /
- 左边文字屏幕end********
/*********************
- 右边图片屏幕********
- /
- 右边图片屏幕********
.images_content{
float: left; width: 50%; min-width: 480px; height: 100%; overflow: hidden; right:0; background: #7b9977;
}
.dou_slide_wrap_single{
position: relative; background: url(/wiki/images/c/c3/Uestc_software_bamboo.png); background-size:cover; width: 100%; height: 100%;
}
.dou_slide_single_pc{/*max-width:1920*/
position: absolute; margin:auto; height:605px; width: 400px; right: 0; top: 0; left: 0; bottom: 0; text-align: center; background: url(/wiki/images/b/b2/UESTC_Software_Phone_frame.png) center no-repeat; background-size: contain; padding: 80px 20px;
} .dou_slide_single_pc_container{
overflow: hidden; position: relative; width: 100%; height: 100%; z-index: 1;
} /*.dou_slide_single_pc img{
height: 100%;
}
- /
.dou_slide_single_define{
position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 200px; height: 300px;
} .dou_slide_single_define ul{
position: relative;
} @keyframes touming_change{
0%{visibility:hidden; opacity: 0;} 100%{visibility:visible; opacity: 1;}
} .dou_slide_single_define ul li{
position: absolute; visibility: hidden; opacity: 0; transition:all 0.3s linear; -webkit-transition:all 300ms linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear;
} .dou_slide_single_define ul li.define_show{
animation:touming_change 1s; animation-delay:1s; visibility: visible; opacity: 1;
} .dou_slide_single_define p{
text-align: center; font-size: 40px; line-height: 40px; color: #f7f7f7; font-family: "faricy-new-web",helvetica,sans-serif; font-weight: 600;
}
.swiper-slide{
text-align: center; font-size: 18px; background: #fff; display: relative; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
} .swiper-slide img{
width: 100%; height: 100%;
} .swiper-pagination{
top: 100px;
} .slide_p{
width:80%;
} .slide_p h2{
color: #7B9977; font-family: "faricy-new-web",helvetica,sans-serif; font-size: 3rem; line-height:3.5rem; text-align:left; margin-bottom: 50px !important;
} .manually{
font-size: 4.5rem; font-weight: 600;
} .slide_p p{
color:#666; font-family: "faricy-new-web",helvetica,sans-serif; font-size:1.6rem;
line-height:1.8rem;
text-align: justify;
} /*右边屏幕end*/
/************************
- 文字放置*********
- /
- 文字放置*********
.cd-section{/*单屏设置*/
width: 100%;
} .cd-half-section{/*分页半屏高图片*/
width: 100%; text-align: center; display: table; color: #f7f7f7; padding: 10rem 16rem;
} .cd-half-section h1{
font-size: 2.4rem;
} .cd-half-section p{
padding: 4rem 0; font-size: 1.8rem;
}
.cd-main-content {
position: relative; width: 80%; max-width: 980px; margin: 0 auto; padding: 50px 0 0; transition:all 0.3s linear; -webkit-transition:all 300ms linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear;
} .cd-main-content p {
font-family: "faricy-new-web",helvetica,sans-serif; font-size: 1rem; line-height: 1.4rem; color: #222; /*margin: 2em 0; text-align:justify;*/
} .back_to_top{
display: none; position: fixed; cursor: pointer; bottom: 10px; right:15% ; width: 50px; text-align: center; height: 50px; line-height: 50px; color: #aaa;
} .back_to_top i{
font-size:40px;
}
.dou_m_c_p{/*纯文章*/
margin-top: 30px; width: 100%;
} .dou_m_c_pic{
margin:30px 0; width: 100%;
}
.dou_m_c_pic_wrap{
text-align:center; width:100%;
} .dou_m_c_pic_wrap img{
width:100%;
} .dou_m_c_pic_wrap p{
text-align: center;
} .dou_m_c_p>p{
text-align: justify;
} .real_pic_wrap{
position: relative;
} .real_pic_wrap img{
box-shadow: 0 2px 10px #555; position: absolute; width: 60% !important;
}
- real_pic1{
z-index: 20; transform:rotate(0deg); transform-origin:50% 90%; top:0px; left: 0;
}
- real_pic2{
z-index: 19; transform:rotate(0deg); top:80px; left: 20%;
}
- real_pic3{
z-index: 18; transform:rotate(0deg); top: 120px; left:40%;
}
- real_pic4{
z-index: 17; box-shadow: 0 10px 10px #ccc; transform:rotate(15deg);
}
.dou_title{
font-family: "faricy-new-web",helvetica,sans-serif; /*margin-top: 100px;*/ color: #666666; text-align: center;
} .dou_title h2{
font-weight: 600; margin-top: 2rem; font-size: 1.8rem; line-height:2rem; color:#7b9977; margin-bottom:60px !important;
} .dou_title h3{
font-weight:bold; font-size:1.6rem; line-height:1.8rem; margin-bottom:40px !important; color:#7b9977;
} /*左侧导航*/ .dou_navbar{
position: fixed; left: 0; width: 200px; border: 1px solid #7b9977; border-top-right-radius:5px; border-bottom-right-radius:5px; z-index:999999; background:#fff; transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear;
} .dou_navbar_wrap{
display:table; width:100%;
} .dou_navbar ul{
width:90%;
} .dou_navbar ul li{
position: relative; font-size: 1.2rem; cursor: pointer; padding: 12px 10px; color: #555; transition:all 0.3s linear; -webkit-transition:all 300ms linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear;
} .dou_navbar ul li a{
font-family: "faricy-new-web",helvetica,sans-serif; color: #555; text-decoration:none;
} .dou_navbar>ul>li>a{
font-family: "faricy-new-web",helvetica,sans-serif; font-weight:bold; color: #555; text-decoration:none;
} .dou_navbar ul li a:hover{
color:#7b9977; text-decoration:none;
} .dou_navbar ul li.current a{
color: #7b9977;
} .dou_navbar ul li.navbar_hover{
color: #7b9977;
} .dou_navbar ul li.dou_one{
/*border:1px solid #7b9977;*/
} .dou_navbar ul li.second_nav{
padding: 0 20px; font-size: 1rem;
} .navb_show{
left:-160px;
} .dou_navButton{
cursor:pointer; position:relative; border-top-right-radius:5px; border-bottom-right-radius:5px; right:0; background:#7b9977; color:#fff; border-top:1px solid #7b9977; border-right:1px solid #7b9977; border-bottom:1px solid #7b9977; height:80px; width:50px; display:table-cell; vertical-align:middle; text-align:center;
} /*响应式*/ @media screen and (max-width:1600px){
.back_to_top{ right:5% !important ; } /*.dou_navbar{ width:15%;
} .navb_show{
left:-11%;
}*/ } @media screen and (max-width:1024px){
/* .dou_navbar{ width:20%;
} .navb_show{
left:-11%;
}*/ } /*documentation 2015.09.12*/ .dou_table{
width:85%; margin:0 auto;
} .dou_table_title{
font-size:2.4rem !important; margin-bottom:50px !important;
}
.dou_table table{
width:100%;
} .dou_table table tr{
height:2rem; line-height:2rem;
} .dou_table table tr td{
font-family: "faricy-new-web",helvetica,sans-serif; font-size:1.2rem; border:1px solid #aaa;
text-align:center; } .dou_t_des{
font-family: "faricy-new-web",helvetica,sans-serif; width:85%;
margin:0 auto 20px;
font-size:1.4rem;
} .even_bg{
background:#f2f2f2;
} /*user_guide*/ .dou_table_ug{
width:100%;
} .dou_table_ug table{
width:100%;
} .dou_table_ug table tr{
height:2rem; line-height:2rem;
} .dou_table_ug table tr td{
font-family: "faricy-new-web",helvetica,sans-serif; font-size:1.4rem; font-weight:bold; text-align:center;
} .dou_table_ug table tr td a{
color:#31bb7c;
} /*user_guide end*/ /*documentation end*/