Luanhaixin (Talk | contribs) |
Luanhaixin (Talk | contribs) |
||
Line 201: | Line 201: | ||
padding:00; | padding:00; | ||
} | } | ||
+ | |||
+ | @charset "UTF-8"; | ||
/** | /** | ||
* | * | ||
− | * @authors | + | * @authors Your Name (you@example.org) |
− | * @date 2019- | + | * @date 2019-09-28 21:29:20 |
* @version $Id$ | * @version $Id$ | ||
*/ | */ | ||
− | + | ||
− | + | @font-face { | |
+ | font-family: 'JLUCN'; | ||
+ | src: url('../DIN Alternate Bold.ttf') format('truetype'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
} | } | ||
+ | |||
+ | html{ | ||
+ | height: 100%; | ||
+ | } | ||
+ | body{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | font-family: 'JLUCN'; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
/** | /** | ||
− | + | *第一部分 | |
− | + | */ | |
+ | #first_s{ | ||
+ | padding-left: 0; | ||
+ | padding-right: 0; | ||
+ | background-color: #485; | ||
+ | margin: 0; | ||
+ | height: 0px; | ||
+ | width: 100%; | ||
+ | z-index: 999; | ||
+ | position: absolute; | ||
+ | color: rgba(255,255,255,1.00); | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #first_s #nav_bg{ | ||
+ | height: 80px; | ||
+ | color: rgba(255,255,255,1.00); | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | #first_s { | ||
+ | height: 80px; | ||
+ | color: rgba(255,255,255,1.00); | ||
+ | left: 0px; | ||
+ | padding: 0 0; | ||
+ | } | ||
+ | |||
+ | #first_s .navbar-header { | ||
+ | width: 20%; | ||
+ | height: 80px; | ||
+ | left: 0px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | #first_s .navbar-brand { | ||
+ | font-size: 24px; | ||
+ | line-height: 72px; | ||
+ | left: 10%; | ||
+ | position: absolute; | ||
+ | color: rgba(65,4,3,1.00); | ||
+ | } | ||
+ | |||
+ | |||
+ | #navProgBar1{ | ||
+ | width: 100%; | ||
+ | height: 5px; | ||
+ | background-color: #facd89; | ||
+ | position: absolute; | ||
+ | opacity: 0; | ||
+ | top: 80px; | ||
+ | z-index:50; | ||
+ | } | ||
+ | #navProgBar2{ | ||
+ | top: 80px; | ||
+ | width: 0%; | ||
+ | height: 5px; | ||
+ | background-color: #fff; | ||
+ | position: absolute; | ||
+ | z-index: 120; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | .jindutiao{ | ||
+ | width: 0%; | ||
+ | height: 5px; | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | background-color: #facd89; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #first_s ul { | ||
+ | padding: 0 0; | ||
+ | margin: 0 0; | ||
+ | height: 80px; | ||
+ | float: right; | ||
+ | color: #FFFFFF; | ||
+ | z-index: 500; | ||
+ | position: absolute; | ||
+ | list-style-type: none; | ||
+ | right: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #first_s ul > li { | ||
+ | z-index: 500; | ||
+ | width: 150px; | ||
+ | |||
+ | float: left; | ||
+ | text-align: center; | ||
+ | |||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | background-color: #485; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | |||
+ | |||
+ | #first_s a { | ||
+ | padding: 0 0; | ||
+ | margin: 0 0; | ||
+ | height:100%; | ||
+ | font-size: 20px; | ||
+ | line-height: 380%; | ||
+ | color: #fff; | ||
+ | font-weight: bold; | ||
+ | display: block; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #first_s li ul | ||
+ | { width: 100%; | ||
+ | list-style: none; | ||
+ | padding-left: 0; | ||
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | display: none; | ||
+ | height: auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #first_s li ul li | ||
+ | { width: 100%; | ||
+ | height: 60px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | line-height: 53px; | ||
+ | position: absolute; | ||
+ | background-color:#485; | ||
+ | border-top:1px solid #c0c0c0; | ||
+ | top: -1px; | ||
+ | opacity: 0; | ||
+ | font-size: 17px; | ||
+ | } | ||
+ | |||
+ | #first_s li ul li ul | ||
+ | { width: 100%; | ||
+ | position: absolute; | ||
+ | left:100%; | ||
+ | top:0; | ||
+ | display: none; | ||
+ | margin-top: -6px; | ||
+ | margin-left: 1px; | ||
+ | } | ||
+ | #first_s li ul li li | ||
+ | { | ||
+ | height: 45px; | ||
+ | line-height: 53px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | position: absolute; | ||
+ | background-color: #fff; | ||
+ | opacity: 0; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #logo{ | ||
+ | width: auto; | ||
+ | height:100%; | ||
+ | transform: scale(.7,.7); | ||
+ | position: relative; | ||
+ | |||
+ | left: 10px; | ||
+ | transition: 0.5s; | ||
+ | |||
+ | } | ||
+ | |||
+ | .navbtn{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .mobilenav{ | ||
+ | |||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .mbnav5011{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | @media (min-width: 1300px) { | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | @media (max-width: 1300px) { | ||
+ | |||
+ | |||
+ | #first_s ul > li { | ||
+ | |||
+ | width: 110px; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #first_s li ul li | ||
+ | { | ||
+ | |||
+ | font-size: 15px; | ||
+ | } | ||
+ | |||
+ | #logo{ | ||
+ | |||
+ | left: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | @media (max-width: 997px) { | ||
+ | #first_s{ | ||
+ | height: 50px; | ||
+ | } | ||
+ | |||
+ | #first_s .navbar-header { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #first_s ul { | ||
+ | width: 100%; | ||
+ | height: 50px; | ||
+ | line-height: 32px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #first_s a { | ||
+ | |||
+ | line-height: 260%; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #first_s ul > li { | ||
+ | width: 14.2857%; | ||
+ | height: 50px; | ||
+ | |||
+ | } | ||
+ | #first_s #nav_bg{ | ||
+ | height: 50px; | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | @media (max-width: 768px) { | ||
+ | #first_s .navbar-header { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | width: 50%; | ||
+ | left: 50%; | ||
+ | height: 50px; | ||
+ | } | ||
+ | #first_s .navbar-brand{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | #first_s ul { | ||
+ | display: none; | ||
+ | |||
+ | } | ||
+ | #logo{ | ||
+ | position: relative; | ||
+ | right: 10%; | ||
+ | display: block; | ||
+ | width: auto; | ||
+ | height: 100%; | ||
+ | float: right; | ||
+ | transform: scale(0.8,0.8) translate(-30px,0%); | ||
+ | } | ||
+ | .navbtn{ | ||
+ | width: 10%; | ||
+ | height: 100%; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | font-size: 20px; | ||
+ | line-height: 40px; | ||
+ | font-weight: bold; | ||
+ | left: 7%; | ||
+ | cursor: pointer; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .mobilenav{ | ||
+ | width: 100%; | ||
+ | height: calc(100% - 50px); | ||
+ | top: 50px; | ||
+ | |||
+ | display: block; | ||
+ | position: fixed; | ||
+ | z-index: 99999; | ||
+ | } | ||
+ | |||
+ | .div501{ | ||
+ | width: 50%; | ||
+ | height: 100%; | ||
+ | background-color: rgba(255,0,60,.7); | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | z-index: 999999; | ||
+ | } | ||
+ | |||
+ | .div503{ | ||
+ | width: 50%; | ||
+ | height: 100%; | ||
+ | |||
+ | display: block; | ||
+ | position: absolute; | ||
+ | z-index: 99; | ||
+ | right: 0px; | ||
+ | } | ||
+ | .div502{ | ||
+ | width: 50%; | ||
+ | height: 100%; | ||
+ | background-color: rgba(255,0,60,.6); | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | z-index: 999; | ||
+ | } | ||
+ | |||
+ | .div5011{ | ||
+ | width: 100%; | ||
+ | height: 80px; | ||
+ | |||
+ | display: block; | ||
+ | position: relative; | ||
+ | border-bottom: 1px solid #fff; | ||
+ | font-size: 30px; | ||
+ | line-height: 70px; | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | } | ||
+ | .able{ | ||
+ | color:rgb(255,0,60); | ||
+ | background-color:#fff; | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | @media (max-width:500px) { | ||
+ | .div5011{ | ||
+ | width: 100%; | ||
+ | height: 50px; | ||
+ | |||
+ | display: block; | ||
+ | position: relative; | ||
+ | border-bottom: 1px solid #fff; | ||
+ | font-size: 20px; | ||
+ | line-height: 50px; | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .able{ | ||
+ | color:rgb(255,0,60); | ||
+ | background-color:#fff; | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | </style> | ||
<!--屏幕内容第一条 导航栏 --> | <!--屏幕内容第一条 导航栏 --> | ||
<nav id="first_s"> | <nav id="first_s"> |
Revision as of 04:01, 5 October 2019
Team
Project
Lab
Model
Parts
HP
Judging