(Www.bkjia.com) Tutorial CSS list rounded corner, used pictures in four corners, the advantage of using pictures is good compatibility, good performance in Firefox, IE, and little code, A friend who learns CSS may wish to use this code as an example to learn about the core of CSs layout.
<! 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 implementation list rounded corner </title> <style type =" text/css "> * {padding: 0; margin: 0 ;} body {background: # fff ;}. yuanjiao {background: # 06c url ( http://www.bkjia.com/ Uploads/userup/1/0910/topl.gif) no-repeat; width: pixel PX; margin: 0 auto; text-align: left; margin-top: 60px ;}. yuanjiao dt {background: transparent url ( http://www.bkjia.com/ Uploads/userup/1/0910/topr.gif) 100% 0 no-repeat; text-align: center; color: # fff; line-height: 30px; font-weight: bold; font-size: 14px ;}. yuanjiao dd {background: # DCEAFC url ( http://www.bkjia.com/ Uploads/userup/1/0910/botl.gif) 0 100% no-repeat; padding: 0; margin: 0 ;}. yuanjiao p {padding :. 8em ;}. yuanjiao p. last {background: transparent url ( http://www.bkjia.com/ Uploads/userup/1/0910/botr.gif) 100% 100% no-repeat; line-height: 22px; font-size: 12px;} a {color: # 06c;}: hover {color: # 00f ;} </style>
Tip: the code can be modified before running!