webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

"bx slider" を使ってスライドショーを作る

  • 使い勝手云々よりも、少しだけいじってみたくなったので…
  • div id="container"を作って画面中央に配置。"container"の幅は<img>の幅と同じで大丈夫そう。
  • pagerの大きさ、マージン、ホバーの色をいじってみました。
  • スライドさせる写真のファイル名は「0」からではなく「1」からにしたほうが調子いい。
  • http://ohtafelica.webcrow.jp/bxslider/ 

    f:id:ohta-felica:20160531230952p:plain

html

<style>
html, body, ul, li, img{
margin: 0;
padding: 0;
line-height: 1.0;
}
ul, li{
list-style-type: none;
width: 840px;
}
img{
vertical-align: bottom;
}
body{
background: #777777;
}
#container{
width: 840px;/*画像の幅と同じ*/
height: auto;
margin: 50px auto;
}
</style>

f:id:ohta-felica:20160531231342j:plain