*{ margin: 0; padding: 0; font-family: "微软雅黑"; } html,body{ width: 100%; height: 100%; overflow: hidden; } body{ /* background: -webkit-linear-gradient(top, #2d4d6b , #16263c ); background: -o-linear-gradient(top, #2d4d6b , #16263c ); background: -moz-linear-gradient(top, #2d4d6b , #16263c ); background: -ms-linear-gradient(top, #2d4d6b , #16263c ); background: linear-gradient(top, #2d4d6b , #16263c ); */ } .size_20{ font-size: 20px; } .size_12{ font-size: 12px; } .size_14{ font-size: 14px; } .size_30{ font-size: 30px; } .size_40{ font-size: 40px; } .size_8{ font-size: 8px; } .clear{ clear: both; } .top { width: 100%; height: 9%; } .top .time{ width: 20%; float: left; text-align: center; height: 100%; font-size: 20px; color: #fff; line-height: 6em; font-weight: bold; } .top .title{ width: 60%; float: left; text-align: center; height: 100%; } .top .weather{ width: 20%; float: right; text-align: center; height: 100%; } .top .title .top_title{ width: 100%; display: block; height: 100%; line-height: 2em; color: #ffffff; font-family: "黑体"; font-weight: bold; text-shadow:2px 2px 10px #15d6ff; background: url(images_0/img/title_bg.png) no-repeat bottom; background-size: 80% auto; } .main{ margin-top: 1%; width: 100%; height: 89%; } .main .main_left,.main .main_right{ width: 23%; height: 100%; float: left; margin-left: 1%; } .main .main_center { width: 50%; height: 100%; float: left; margin-left: 1%; } .main_left .main_left_top,.main_left .main_left_center,.main_left .main_left_bottom{ width: 100%; height: 32%; margin-bottom: 2%; } .main_left .main_left_top .main_left_top_title .main_left_top_title_text,.main_left .main_left_center .main_left_center_title .main_left_center_title_text,.main_left .main_left_bottom .main_left_bottom_title .main_left_bottom_title_text,.main_right .main_right_bottom .main_right_bottom_title .main_right_bottom_title_text,.main_right .main_right_top .main_right_top_title .main_right_top_title_text{ font-weight: bold; color: #ffffff; display: block; width: 95%; background: url(images_0/img/Header_heading.png) no-repeat bottom; background-size: 100% auto; line-height: 2em; text-shadow: #0f9ded 2px 2px 2px ; } .main_left .main_left_top button{ width: 20px; height: 20px; background: none; border: 2px solid #07a6ff; border-radius: 50%; outline: none; text-align: center; } .main_left .main_left_top button .botton_spot{ width: 8px; height: 8px; border-radius: 50%; background: #07a6ff; margin: 4px; } .main_left_Choice{ width: 80%; margin: 5% auto 0; color: #ffffff; font-weight: bold; text-align: center; } .main_left_Choice span{ margin-right: 15px; } .main_left_Choice .month .botton_spot,.main_left_Choice .year .botton_spot{ display: none; } .main_left_top_Analysis{ width: 100%; height: 65%; overflow: hidden; } .main_left_top_Analysis .click_today,.main_left_top_Analysis .click_month,.main_left_top_Analysis .click_year{ width: 100%; margin: 3% auto; height: 100%; float: left; } .click_today .today_left,.click_month .month_left,.click_year .year_left{ width: 48%; float: left; height: 70%; } .click_today .today_right,.click_month .month_right,.click_year .year_right{ width: 48%; float: right; height: 70%; } .today_Label, .today_Labe2, .month_Label, .month_Labe2, .year_Label, .year_Labe2{ width: 48%; display: block; float: left; text-align: center; color: #fff; margin-top: 20px; } .today_Label .number_1, .month_Label .number_1, .year_Label .number_1{ font-size: 20px; color: #d06031; } .today_Labe2 .number_2, .month_Labe2 .number_2, .year_Labe2 .number_2{ font-size: 20px; color: #3ec1fe; } .main_left .main_left_center .main_left_center_E{ width: 90%; margin: 5% auto 0; height: 78%; } .main_left .main_left_bottom .main_left_center_E{ width: 90%; margin: 5% auto 0; height: 78%; } .top_left_1{ width: 90%; height: 80%; margin: 3% auto 0; } .top_left_1 .left_B{ width: 50%; height: 28%; float: left; margin-bottom: 10px; } .top_left_1 .left_H{ width: 50%; height: 28%; float: left; margin-bottom: 10px; } .top_left_1 .T_1{ width: 30%; height: 100%; background: url(images_0/img/T_1_1.png) no-repeat left; background-size: 100%; float: left; } .top_left_1 .T_2{ width: 30%; height: 100%; background: url(images_0/img/T_2.png) no-repeat left; background-size: 100%; float: left; } .top_left_1 .T_3{ width: 30%; height: 100%; background: url(images_0/img/T_3_1.png) no-repeat left; background-size: 100%; float: left; } .top_left_1 .T_4{ width: 30%; height: 100%; background: url(images_0/img/T_4_1.png) no-repeat left; background-size: 100%; float: left; } .top_left_1 .T_5{ width: 30%; height: 100%; background: url(images_0/img/T_5_1.png) no-repeat left; background-size: 100%; float: left; } .top_left_1 .T_6{ width: 30%; height: 100%; background: url(images_0/img/T_6.png) no-repeat left; background-size: 100%; float: left; } .top_left_1 .left_B .B_L{ width: 49%; float: left; height:62%; color: #ffffff; padding: 3% 0; text-align: center; box-shadow: inset 0 0 30px #07a7ff; border-radius: 5px; } .top_left_1 .left_B .B_L span{ display: block; font-size: 24px; text-align: center; color: #ffbd2f; } .top_left_1 .left_B .B_R{ width: 49%; float: right; height:62%; color: #ffffff; padding: 3% 0; box-shadow: inset 0 0 30px #07a7ff; border-radius: 5px; text-align: center; margin-bottom: 2%; } .top_left_1 .left_B .B_R span { display: block; font-size: 24px; text-align: center; color: #07a6ff; } .top_left_1 .T_text{ width: 70%; height: 100%; float: left; } .top_left_1 .T_text span{ color: #ffffff; display: block; width: 100%; margin-top: 8px; margin-left: 5px; font-size: 14px; } .top_left_1 .T_text .number_T{ color: #0f9ded; font-size: 24px; margin-top: 5px; } .top_left_1 .T_text .number_T b{ color: #ffa72f; } /* 导航 */ .main_center .menu{ width: 100%; height: 62px; padding: 8px 0 18px; overflow: hidden; } .main_center .menu ul{ margin-right: -20px; } .main_center .menu li{ width: 176px; height: 62px; float: left; margin-right: 20px; background: url(images_0/img/menuli.png) no-repeat; list-style: none; } .main_center .menu li a{ line-height: 62px; color: #FFFFFF; padding-left: 20px; font-size: 16px; text-decoration: none; display: block; } .main_center .menu li a img{ vertical-align: middle; display: inline-block; margin-right: 14px; } .main_center .menu li a:hover, .main_center .menu li a.current{ background: url(images_0/img/menulih.png) no-repeat; color: #0cc6f8; font-weight: bold; } /*中部样式*/ .main_center .Map{ width: 99.5%; height: 58%; background: url(images_0/img/Map_B.png) no-repeat center; border: 2px solid #0f9ded; background-size: 100% 100%; position: relative; } .main_center .Map .Map_T1{ position: absolute; left: -2px; top:-2px; width: 11px; height: 11px; background: url(images_0/img/Map_T1.png) no-repeat; background-size: 100% 100%; } .main_center .Map .Map_T2{ position: absolute; left: -2px; bottom:-2px; width: 11px; height: 11px; background: url(images_0/img/Map_T2.png) no-repeat; background-size: 100% 100%; } .main_center .Map .Map_T3{ position: absolute; right: -2px; top:-2px; width: 11px; height: 11px; background: url(images_0/img/Map_T3.png) no-repeat; background-size: 100% 100%; } .main_center .Map .Map_T4{ position: absolute; right: -2px; bottom:-2px; width: 11px; height: 11px; background: url(images_0/img/Map_T4.png) no-repeat; background-size: 100% 100%; } .main_center .Map .Map_title{ width: 85%; margin: 10px auto 0; height: 90px; z-index: 999; } .main_center .Map .Map_title span{ float: left; display: block; height: 100%; width: 23.75%; background: url(images_0/img/Map_title.png) no-repeat; background-size: 100% 100%; margin-left: 1%; } .main_center .Map .Map_title span .size_14{ color: #ffffff; font-weight: bold; display: block; margin-left: 20px; margin-top: 15px; } .main_center .Map .Map_title .titleO_number{ width: 78%; margin: 10px auto 0; } .main_center .Map .Map_title .titleO_number .numberL{ width: 40%; color: #1dcef3; font-size: 30px; float: left; } .main_center .Map .Map_title .titleO_number .numberR{ color: #ffffff; width: 60%; float: left; margin-top: 3px; } .main_center .Map .Map_title .titleO_number .numberR .B_1{ color: #11ee7d; } .main_center .Map .Map_title .titleO_number .numberR .B_2{ color:#f4e925; } .main_center .main_center_B{ width: 100%; height: 30%; margin-top: 1%; } .main_center .main_center_B .main_center_BL,.main_center .main_center_B .main_center_BR{ width: 49%; height: 97%; border: 1px solid #0b73b8; } .main_center .main_center_B .main_center_BR{ float: right; } .main_center .main_center_B .main_center_BL{ float: left; } .main_center .main_center_B .main_center_title{ font-weight: bold; color: #ffffff; line-height: 2em; padding-left: 8%; width: 92%; border-bottom: 1px solid #0b73b8; /*background-color: rgba(31,103,163,0.2);*/ /*background-image: url(images_0/img/D.png);*/ /*background-repeat: no-repeat;*/ /*background-position: 20px 15px;*/ background: url(images_0/img/D.png) no-repeat 15px 14px rgba(31,103,163,0.2); } .main_center .main_center_B .main_center_BE{ width: 100%; height: 85%; } /*右侧样式*/ .main_right_top{ width: 100%; height: 35%; } .main_right_top .main_right_top_E{ width: 90%; margin: 5% auto 0; height: 80%; } .main_right_bottom{ width: 100%; height: 63.5%; } .main_right_bottom .main_right_bottom_E{ width: 90%; margin: 5% auto 0; height: 89.5%; }