Tutorial for (www.bkjia.com) This is a beautiful slider beautifying with CSS. Note that it is static and cannot be dragged in due time because it is not added to JS, the focus of this example is to express a method of complex CSS layout graphics. Take a good look at the code and I believe it will help you a lot.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = gb2312 "/> <title> CSS layout: a beautiful slider </title> <style type =" text/css "> dl {margin: 0; padding: 0 ;} dt {position: relative; clear: both; display: block; float: left; width: pixel; height: 20px; line-height: 20px; margin-right: 17px; font-size :. 75em; text-align: right;} dd {position: relative; display: block; float: left; width: 197px; height: 20px; margin: 0 0 15px; background: url (" http://www.bkjia.com/ Uploads/userup/1/0910/colorbar.jpg ");} * html dd {float: none;} dd div {position: relative; background: url (" http://www.bkjia.com/ Uploads/userup/1/0910/colorbar2.jpg "); height: 20px; width: 75%; text-align: right;} dd div strong {position: absolute; right:-5px; top: -2px; display: block; background: url (" http://www.bkjia.com/ Uploads/userup/1/0910/marker.gif "); height: 24px; width: 9px; text-align: left; text-indent:-9999px; overflow: hidden ;} </style>
Tip: the code can be modified before running!
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
