1、新建html文档。
4、书写css代码。#online_service_bar { font-size: 12px; color: #555; font-family: "Microsoft YaHei", Verdana, "BitStream vera Sans", Tahoma, Helvetica, Sans-serif; }#online_service_bar a { color: #555; text-decoration: none; }#online_service_bar a:hover { color: #E21F2B; text-decoration: none; }#online_service_bar img { border: none; vertical-align: middle; }#online_service_bar dl, #online_service_bar dd, #online_service_bar ul, #online_service_bar li { margin: 0; padding: 0; list-style: none; }/*在线客服边栏*/#online_service_bar { position: absolute; top: -150px; right: 0; overflow: hidden; z-index: 1001; }#online_service_fullbar { display: none; width: 138px; padding-bottom: 10px; background: url(../images/footer.gif) no-repeat left bottom; }.service_bar_head { text-indent: -9999px; width: 138px; height: 58px; position: relative; background: url(../images/header.gif) no-repeat left top; }.service_bar_main { width: 106px; padding: 5px 12px; background: url(../images/main.gif) repeat-y left top; }#service_bar_close { position: absolute; width: 35px; height: 35px; top: 0; right: 0; cursor: pointer; display: block; text-indent: -9999px; }/*在线客服边栏收缩状态*/#online_service_minibar { margin-top: 150px; width: 23px; height: 80px; background: url(../images/mini.gif) no-repeat right top; display: none; cursor: pointer; }/*客服菜单列表*/.service_menu { font-size: 12px; width: 106px; overflow: hidden; }.service_menu li { width: 106px; display: inline; overflow: hidden; }.service_menu li dt { text-align: left; margin-bottom: 5px; padding: 8px 10px 6px 10px; *padding:9px 10px 5px 10px;background: url(../images/menu.gif) no-repeat top center; cursor: pointer; }.service_menu li dd { display: none; text-align: center; }.service_menu li dd a img { margin-bottom: 5px; }.service_menu li.hover dt { color: #E21F2B; }.service_menu li.hover dd { padding: 5px 0; line-height: 20px; }.qq_btn { display: block; padding: 4px; }.service_tel { font-size: 12px; font-family: "Microsoft YaHei", Verdana, "BitStream vera Sans", Tahoma, Helvetica, Sans-serif; padding-left: 22px; height: 28px; line-height: 28px; background: url(../images/tel.png) no-repeat 5px center; }
6、代码整体结构。
