123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body {
- height: 2800px;
- hr{
- margin: 20px;
- }
- }
- #banner {
- width: 100vw;
- height: 500px;
- }
- .marquee {
- margin: 100px auto;
- height: 100px;
- width: 1000px;
- overflow: hidden;
- position: relative;
- font-size: 48px;
- #marquee-box {
- display: block;
- width: 200%;
- height: 75px;
- position: absolute;
- overflow: hidden;
- animation: marquee 5s linear infinite;
- .span {
- float: left;
- width: 50%;
- }
- @keyframes marquee {
- 0% {
- left: 0;
- }
- 100% {
- left: -100%;
- }
- }
- }
- }
- #tag{
- width: 100vw;
- text-align: center;
- .btn{
- padding: 15px;
- width: 150px;
- margin: 10px;
- background-color:#CE0000;
- border-radius: 10px;;
- font-size: 24px;
- color:#fff;
- border: none;
- }
- }
- #Search-result{
- .result-box{
- margin: 50px auto;
- width: 700px;
- display: grid;
- grid-template-columns: repeat(2,1fr );
- grid-gap:10px;
- h1{
- margin: 10px;
-
- }
- p{
- padding: 15px 0;
- margin: 10px;
- }
- span{
- padding: 0px 10px;
-
- }
- }
- }
- #logo{
- width: 100vw;
- text-align: center;
- .logo{
- padding: 15px;
- width: 150px;
- margin: 10px;
- background-color:#CE0000;
- border-radius: 10px;;
- font-size: 24px;
- color:#fff;
- border: none;
- }
- }
- #news{
- display: grid;
- grid-template-columns: repeat(3,1fr );
- margin: 50px;
- grid-gap:30px;
- h1{
- margin-bottom: 10px;
- }
- a{
- margin-top: 20px;
- line-height: 1.5;
- display: inline-block;
- }
- }
- #footer{
- text-align: center;
- line-height: 2;
- }
|