<!DOCTYPE html><html><head> <title>Preview Slideshow</title> <meta charset="utf-8"> <style> *{padding: 0; margin: 0;} body{ padding:50px 0; background-color: #FFF; font-size:? font-family: 'Avenir14px; color:#555; Next'; -webkit-font-smoothing:antialiased;/*字體抗鋸齒*/ } .slider .main .main-i, .slider .mian, .slider{ width: 100%; height: 400px; position: relative; } /*幻燈片區域*/ .slider.main{ overflow: hidden; } /*每一個幻燈片的樣式*/ .slider .main .main-i{} .slider .main .main-i img{ width: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .slider .main .main-i .caption{ position: absolute; right: 50%; top: 30%; z-index: 9; } } .slider .main .main-i .caption h2{ font-size: 40px; line-height: 5px; color: #B5B5B5; text-align: right; } .slider .main .main-i .caption h3{ font-size: 70px; line-height: 7px; color: #000000; text-align: right; font-family: 'Open Sans Condensed'; } /*控制按鈕區域*/ .slider.ctrl{ width: 100%; height: 13px; line-height: 13px; text-align: center; position: absolute; left: 0; bottom: -13px; background-color: #f00;? } .slider .ctrl .ctrl-i{ display: inline-block; width: 150px; height: 13px; background-color: #666; box-shadow: 0 1px 1px rgba(0,0,0,.3); } .slider .ctrl .ctrl-i img{ width: 100%; position: absolute; left: 0; bottom: 50px; } </style></head><body> <div class=""slider> <div class="main"> <div class="main-i"> <div class="caption"> <h2>h2 caption</h2> <h3>h3 caption</h3> </div> <img src="imgs/index.jpg" /> </div> </div> <div class="ctrl"> <a? class="ctrl-i" href="javascript:;"><img src="imgs/index.jpg" /></a> </div> </div></body></html>
為什么我的效果出不來？
胡思亂想的XuJiYo
2018-03-11 14:01:23
