html+css3+jquery旅游网站左侧分类导航

书写css代码。

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, input, textarea, hr, img, label, span, select, strong, b { margin: 0px; padding: 0px; }

fieldset, img, abbr, acronym { border: 0; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

q:before, q:after { content: ''; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

caption, th, td { text-align: left; font-weight: normal; }

a, img, button { border: none; text-decoration: none; }

a, button { text-decoration: none; }

a, img { border: none; outline: none; }

a { color: #333; text-decoration: none; outline: none; }

ul, ol { list-style: none; }

table { word-break: break-all; word-wrap: break-word; }

body { font-family: 宋体, Arial, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif; font-size: 12px; font-weight: normal; color: #000; width: 100%; background: #fff; }

.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }

.clearfix { display: inline-table; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

.ma { margin-left: auto; margin-right: auto; }

.w980 { width: 980px; }

.mt10 { margin-top: 10px; }

.product_sort { margin: 20px; width: 226px; height: 644px; background: #fff url(../images/img_226x95.jpg) no-repeat left bottom; border: solid 1px #3299fd; position: relative; z-index: 90; }

.product_sort .hd { width: 226px; background: url(../images/img_226x40.jpg) no-repeat; height: 40px; line-height: 40px; text-indent: 15px; font-size: 15px; font-weight: bold; font-family: "微软雅黑"; color: #fff; }

.product_sort .bd { padding-bottom: 10px; }

.product_sort .bd .item { border-bottom: solid 1px #3299fd; height: 60px; position: relative; }

.product_sort .bd .item .title { width: 226px; text-indent: 43px; height: 30px; overflow: hidden; line-height: 42px; font-size: 14px; font-weight: bold; color: #292929; }

.product_sort .bd .item .title a { color: #3299fd; position: relative; }

.product_sort .bd .item .title a i { position: absolute; background: url(../images/icon_nav.jpg) no-repeat; }

.product_sort .bd .item .one a i { width: 19px; height: 19px; background-position: 0 0; left: -25px; top: -3px; }

.product_sort .bd .item .two a i { width: 22px; height: 20px; background-position: 0 -51px; left: -28px; top: -5px; }

.product_sort .bd .item .three a i { width: 31px; height: 23px; background-position: 0 -101px; left: -34px; top: -7px; }

书写并添加js代码。

代码整体结构。

查看效果。