A simple thumbnail page displays small images, each of which is linked to the corresponding image page. For example, you can link to the previous photo browsing page to browse large images!
Html Code :
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en"> <pead> <title> thumbnail page </title> <meta http-equiv = "Content-Type" content = "text/ HTML; charset = gb2312 "/> <link type =" text/CSS "href =" css.css "mce_href =" css.css "rel =" stylesheet "/> </pead> <body> <div id = "content"> <! -- H1 includes the title and navigation --> <p> <a href = "/" mce_href = ""> image set </a>» album: <em> Firenze, italia 2006 </em> </p> <ul class = "thumbnails"> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href =" # "mce_href = "#"> </a> </LI> <li> <a href =" # "mce_href =" # "> </a> </LI> <li> <a href =" # "mce_href =" # "> </a> </LI> <li> <a href =" # "mce_href = "# "> </a> </LI> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href =" # "mce_href =" # "> </a> </LI> <li> <a href =" # "mce_href =" # "> </a> </LI> <li> <a href =" # "mce_href = "# "> </a> </LI> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href = "# "mce_href =" # "> </a> </LI> <li> <a href = "#" mce_href = "#"> </> </Li> <Li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href =" # "mce_href =" # "> </a> </LI> <li> <a href =" # "mce_href = "# "> </a> </LI> <li> <a href = "#" mce_href = "#"> </a> </LI> <li> <a href = "# "Mce_href =" # "> </a> </LI> </ ul> </div> <! -- Paging navigation --> <ul class = "navigation"> <li> <a href = "#" mce_href = "#"> «previous </a> </LI> <LI> <a href = "#" mce_href = "#"> next» </a> </LI> </ul> </body> </ptml>
Note: This may be the reason for the blog editor. Some attributes are added when HTML code is displayed. For example, the mce_href and mce_src attributes are added to the tag. Therefore, when copying and using the code, modify the code accordingly.
CSS code:
Body {margin: 0; padding: 0; Background-color: # FFF; Font: 62.5%/1.75em "Times New Roman", Serif; color: # 4d4d4d;} A: link, A {border-bottom: 1px dotted #960; text-Decoration: none; color: #960;} A: hover {border-bottom: 1px solid #960 ;} h1 {margin: 0 6px; padding: 0 0. 5em 0; font-style: italic; font-weight: normal; font-size: 1.25em; line-Height: 2.375em; color: # CCC;} H1 em {color: # 4d4d4d;} H1 A: Link, H1 a, H1 A: hover, H1 a em, H1 A: link em, H1 A: hover em {border-color: #999; color: #999;} IMG {display: block; margin: 0 auto 5px auto; Border: 1px solid # CCC; border-bottom-color: # Eee; border-left-color: # DDD; border-top-color: # BBB ;}# content {margin: 0 auto 20px 20px; padding: 1em 0 0 0 0; width: 512px; background-color: # FFF; font-size: 1.25em; line-Height: 1.75em;} ul. thumbnails A {display: block; float: Left; margin: 0; padding: 4px 4px 9px 4px; Border: 1px solid # CCC; border-top-color: # Eee; border-right-color: # DDD; border-bottom-color: # BBB; Background-color: # FFF; text-align: center;} ul. thumbnails A {width: 80px; margin-Right: 10px; margin-bottom: 10px;} ul. thumbnails A: hover {border: 1px solid # CCC; Background-color: # Eee;} ul. thumbnails A {width: 80px; margin-Right: 10px; margin-bottom: 10px;} ul. thumbnails {margin: 0 0 10px 0; padding: 0; float: Left; text-align: center; Background-color: # FFF; line-Height: 1em; List-style: none;} ul. thumbnails Li, ul. navigation Li {display: inline; margin: 0; padding: 0;} ul. navigation {margin: 0 0 10px 0; padding: 0; float: Left; text-align: center; Background-color: # FFF; line-Height: 1em; List-style: none; position: absolute; top: 58px; left: 550px;} ul. navigation Li {display: inline; margin: 0; padding: 0;} ul. navigation A {display: block; float: Left; margin: 0 10px 10px 0; padding: 4px 4px 6px 4px; Border: 0; Background-color: # FFF; text-align: center; width: 80px;} ul. navigation A: hover {background-color: # Eee; Border: 0 ;}
Browsing:
Reference: The Art & Science of CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
