adobe dreamweaver
新建html文档。
准备好需要用到的图标。
书写css代码。body { font: 12px Arial, Helvetica, sans-serif, Verdana; color: #666; margin: 0; }table, td { font: 12px/180% Arial, Helvetica, sans-serif, Verdana; color: #666; }table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }th, td { border-collapse: collapse; }A:link { text-decoration: none; color: #666; }A:visited { text-decoration: none; color: #666; }A:hover { text-decoration: none; color: #db2d0c; }img { border: 0; }div, p, img, ul, li, form, input, label, span, dl, dt, dd, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }ol, ul, li { list-style-type: none; }.overh { overflow: auto; zoom: 1; overflow-x: hidden; overflow-y: hidden; }html { -webkit-text-size-adjust: none; }input[type="submit"]::-moz-focus-inner {border:none;padding:0;}a { blr:expression(this.onFocus=this.blur())}a { outline: none; }h2 { font-family: 'Microsoft yahei'; font-weight: normal; }.overz { overflow: auto; zoom: 1; overflow-x: hidden; overflow-y: hidden; }.mn_12 { margin-bottom: 12px; }.online_icon { width: 36px; height: 156px; overflow: hidden; font-family: '宋体'; }.online_icon a { display: block; width: 36px; height: 156px; background: url(../images/online_bg.png) no-repeat; _background: url(../images/online_bg_ie6.png) no-repeat; }.online_windows { width: 144px; }.online_w_top { background: url(../images/online_bg.png) no-repeat -36px 0; height: 10px; _background: url(../images/online_bg_ie6.png) no-repeat -36px 0; _margin-bottom: -7px; }.online_w_c { background: url(../images/online_bg.png) repeat-y 0 -185px; padding: 0 5px; _background: url(../images/online_bg_ie6.png) repeat-y 0 -185px }.online_w_bottom { background: url(../images/online_bg.png) repeat-y -36px -35px; height: 29px; _background: url(../images/online_bg_ie6.png) repeat-y -36px -35px; }.online_content { background: url(../images/online_bg.png) no-repeat -147px -185px; padding-top: 11px; _background: url(../images/online_bg_ie6.png) no-repeat -147px -185px; }.online_content a.qq_icon { background: url(../images/online_bg.png) no-repeat -37px -130px; width: 121px; height: 25px; display: block; margin: 0 auto; text-indent: 30px; line-height: 23px; cursor: pointer; _background: url(../images/online_bg_ie6.png) no-repeat -37px -130px; }.online_content a.qq_icon:hover { background-position: -159px -130px; color: #FFF; }.online_bar h2 { background: url(../images/online_bg.png) repeat-x 0 -156px; height: 29px; line-height: 27px; font-size: 12px; color: #666; text-align: left; _background: url(../images/online_bg_ie6.png) repeat-x 0 -156px; }.online_bar h2 a { display: block; padding-left: 14px; margin-left: 6px; cursor: pointer; }.expand h2 a { background: url(../images/online_bg.png) no-repeat -36px -69px; _background: url(../images/online_bg_ie6.png) no-repeat -36px -69px; }.collapse h2 a { background: url(../images/online_bg.png) no-repeat -36px -96px; _background: url(../images/online_bg_ie6.png) no-repeat -36px -96px; }.expand h2 a:hover, .collapse h2 a:hover { text-decoration: none; color: #c81d04; }.online_content { text-align: center; border-bottom: 1px solid #d0d0d0; margin-bottom: 1px; }.online_content ul li { height: 24px; line-height: 24px; margin-bottom: 4px; font-family: '宋体'; }.online_content ul li a:hover { color: #c81d04; }#online_qq_layer { position: fixed; right: 0px; top: 150px; _position: absolute; }* html, * html body { _background-attachment: fixed; }* html #online_qq_layer { _bottom: auto; _top:expression(eval(document.documentElement.scrollTop + 150));}#online_qq_tab { float: left; margin-top: 50px; }#onlineService { float: left; margin-left: -3px; display: none; }#onlineType1, #onlineType2, #onlineType3, #onlineType4, #onlineType5, #onlineType6 { display: none; }#onlineType1 { display: block; }
书写并添加js代码。
代码整体结构。
查看效果。