TAILIEUCHUNG - JQuery: Novice to Ninja- P11

JQuery: Novice to Ninja- P11:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | Images and Slideshows 127 around. We ll be exploring many of the concepts employed here in more detail in the coming chapters so don t worry if you need to skip this one for now and come back to it later. Let s base our slideshow on a familiar list of images. We ll wrap the list in a div which will allow us to constrain the thumbnails and add an anchor that will serve as our trigger chapter_04 15_iphoto_style_slideshow excerpt h2 Around town last night h2 div id photos a href class trigger Image Gallery a ul id photos_inner li img alt Glendatronix src . . images li li img alt Darth Fader src . . images li ul div If a user views our page with both CSS and JavaScript turned off they ll simply see a huge stack of images. While it s far from being the great experience we hoped to provide we have given them full access to our content. If only JavaScript is disabled all but one of the images will be hidden but we ll overlay a link to the full gallery page on top of the gallery so clicking it will bring users through to a traditional HTML gallery page. Let s start our slideshow enhancements with the CSS 128 jQuery Novice to Ninja chapter_04 15_iphoto_style_slideshow excerpt photos border 1px solid BEBEBE height 400px overflow hidden position relative width 400px photos ul left 0 list-style-type none margin 0 padding 0 position absolute top 0 width 2400px photos li float left photos .trigger left 0 position absolute top 0 z-index 10 text-indent -9999px height 400px width 400px display block Starting with the container div we set up the display constraints. Our images are 400 pixels square so that s the dimensions for our container. Should the images have been of varying sizes you could simply set the container s proportions to the size of the largest image it would need to contain. The overflow hidden means that none of our thumbnails will peek through unexpectedly. For our unordered list of images we control the .

• Đồ họa - Thiết kế - Flash
• thiết kế web
• giáo trình photoshop
• css căn bản
• thủ thuật cắt html
• đồ họa máy tính
• Thiết kế trang web
• hướng dẫn Thiết kế trang web
• kinh nghiệm Thiết kế trang web
• tài liệu Thiết kế trang web
• cẩm nang Thiết kế trang web
• kỹ thuật Thiết kế trang web
• Bài giảng Thiết kế Web
• Đại cương Thiết kế Web
• Tổng quan Thiết kế Web
• Môn học Thiết kế Web
• Mục tiêu Thiết kế Web
• Giáo trình Thiết kế giao diện web
• Thiết kế và quản lý website
• Thiết kế giao diện web
• Nhận dạng các trang web
• Cấu trúc trang web
• phương pháp thiết kế trang Web
• kỹ thuật thiết kế Web
• thiết kế web nhanh
• thực hành thiết kế web
• thiết kế web đẹp
• tài liệu về thiết kế web
• thủ thuật thiết kế web
• mẹo dùng web
• học thiết kế web
• Thiết kế web động
• tài liệu Thiết kế web động
• hướng dẫn Thiết kế web động
• kinh nghiệm Thiết kế web động
• cẩm nang Thiết kế web động