(12 intermediate revisions by the same user not shown) | |||
Line 20: | Line 20: | ||
.fourC_div { | .fourC_div { | ||
width: 100%; | width: 100%; | ||
− | + | margin: 48px auto 0 auto; | |
− | margin | + | |
} | } | ||
.fourC { | .fourC { | ||
width: 100%; | width: 100%; | ||
− | |||
height: auto; | height: auto; | ||
} | } | ||
Line 33: | Line 31: | ||
#anniu { | #anniu { | ||
position: relative; | position: relative; | ||
− | top: | + | top: 70px; |
transition: top 0.2s; | transition: top 0.2s; | ||
left: 50%; | left: 50%; | ||
margin: 0 0 0 -50px; | margin: 0 0 0 -50px; | ||
} | } | ||
− | #anniu>img{ | + | |
− | height:100px; | + | #anniu>img { |
+ | height: 100px; | ||
} | } | ||
#anniu:hover { | #anniu:hover { | ||
− | top: | + | top: 90px; |
} | } | ||
.di { | .di { | ||
width: 100%; | width: 100%; | ||
− | |||
position: relative; | position: relative; | ||
top: 600px; | top: 600px; | ||
+ | margin: -350px auto 0 auto; | ||
+ | vertical-align: middle; | ||
} | } | ||
Line 62: | Line 62: | ||
.zhanshiqu { | .zhanshiqu { | ||
position: relative; | position: relative; | ||
− | |||
} | } | ||
/*-- 轮播图主体样式-- */ | /*-- 轮播图主体样式-- */ | ||
+ | |||
+ | .bianda { | ||
+ | width: 1200px; | ||
+ | margin: 300px auto 0 auto; | ||
+ | } | ||
#rongqi { | #rongqi { | ||
width: 950px; | width: 950px; | ||
− | height: | + | height: 570px; |
− | margin: | + | margin: 0 auto; |
border-radius: 5px; | border-radius: 5px; | ||
overflow: hidden; | overflow: hidden; | ||
Line 80: | Line 84: | ||
.shiying { | .shiying { | ||
width: 950px; | width: 950px; | ||
− | height: | + | height: 570px; |
} | } | ||
Line 114: | Line 118: | ||
#rongqi span { | #rongqi span { | ||
display: inline-block; | display: inline-block; | ||
− | width: | + | width: 50px; |
− | height: | + | height: 22px; |
− | margin: 0 | + | margin: 0 10px; |
− | border-radius: | + | border-radius: 11px; |
background: white; | background: white; | ||
transition: width 0.3s; | transition: width 0.3s; | ||
Line 123: | Line 127: | ||
#rongqi span.yundong { | #rongqi span.yundong { | ||
− | width: | + | width: 78px; |
background: #A08989; | background: #A08989; | ||
} | } | ||
Line 277: | Line 281: | ||
margin: 0 50%; | margin: 0 50%; | ||
width: 1020px; | width: 1020px; | ||
− | height: | + | height: 630px; |
left: -510px; | left: -510px; | ||
z-index: 1; | z-index: 1; | ||
Line 284: | Line 288: | ||
.frame_tu { | .frame_tu { | ||
width: 1020px; | width: 1020px; | ||
− | height: | + | height: 630px; |
} | } | ||
</style> | </style> | ||
Line 291: | Line 295: | ||
<body> | <body> | ||
<div class="fourC_div"> | <div class="fourC_div"> | ||
− | <img class="fourC" src="https://static.igem.org/mediawiki/2017/8/ | + | <img class="fourC" src="https://static.igem.org/mediawiki/2017/8/8d/T--HZAU-China--4C.gif"> |
<div> | <div> | ||
− | <a id="anniu" href="#tiaozhuan"><img src="https://static.igem.org/mediawiki/2017/7/7e/T--HZAU-China--arrow.gif"></a> | + | <a id="anniu" href="#tiaozhuan"> |
+ | <img src="https://static.igem.org/mediawiki/2017/7/7e/T--HZAU-China--arrow.gif"> | ||
+ | </a> | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="bianda"> |
− | <!-- 大小齿轮们 --> | + | <div class="zhanshiqu"> |
− | + | <!-- 大小齿轮们 --> | |
− | + | <div class="hezi"> | |
− | + | <div id="tiaozhuan"></div> | |
− | + | <div class="chilun_1"></div> | |
− | + | <div class="chilun_2"></div> | |
− | + | <div class="chilun_3"></div> | |
− | + | </div> | |
− | + | <div class="frame"> | |
− | + | <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/1/17/T--HZAU-China--frame.png" /> | |
− | + | </div> | |
− | + | <div id="rongqi"> | |
− | + | <!-- 插入轮播的图片们 --> | |
− | + | <img class="yundong shiying" src="https://static.igem.org/mediawiki/2017/6/64/T--HZAU-China--confirm2.png" /> | |
− | + | <img class="shiying" src="https://static.igem.org/mediawiki/2017/4/4a/T--HZAU-China--confirm3.png" /> | |
− | + | <img class="shiying" src="https://static.igem.org/mediawiki/2017/8/88/T--HZAU-China--confirm4.png" /> | |
− | + | <!-- 插入轮播的页码们 --> | |
− | + | <div style="top: 543px;"> | |
− | + | <span class="yundong" name="0"></span> | |
− | + | <span name="1"></span> | |
+ | <span name="2"></span> | ||
+ | </div> | ||
+ | <!-- 插入图片的描述们 --> | ||
+ | <p class="yundong"></p> | ||
+ | <p></p> | ||
+ | <p></p> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 362: | Line 370: | ||
//每2s调用changeSlide函数进行图片轮播 | //每2s调用changeSlide函数进行图片轮播 | ||
− | var slideon = setInterval(changeSlide, | + | var slideon = setInterval(changeSlide, 60000); |
rongqi.onmouseover = function () { | rongqi.onmouseover = function () { | ||
Line 368: | Line 376: | ||
} | } | ||
rongqi.onmouseout = function () { | rongqi.onmouseout = function () { | ||
− | slideon = setInterval(changeSlide, | + | slideon = setInterval(changeSlide, 60000); //当鼠标移出时重新开始轮播事件 |
} | } | ||
Latest revision as of 01:31, 2 November 2017