Page de modification CSS du didacticiel du service client QQ de développement jQuery

Tout d'abord, en fonction des balises en HTML, nous définissons d'abord un style public

*{padding:0;margin:0;}

html,body{font-size:12px;font-family:"宋体";outline:none;color:#666;background:#fff;}

ul,ol{list-style:none;}

img{border:none;outline:none;}

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

a:hover{color:#e8431f;}

Puis en fonction de la classe ou de la valeur de l'identifiant, définit un style spécifique

body{height:3000px;}

#floatDivBoxs{ width:170px ;background:#fff;position:fixed;top:100px;right:0;z-index:999;}

#floatDivBoxs .floatDtt{width:100%; hauteur : 45px ; hauteur de ligne : 45px ; arrière-plan : #f08326 ; couleur : #fff ; taille de la police : 18px ; retrait du texte : 22px ; position : relative ;}

# floatDivBoxs .floatDqq {padding:0 14px;}

#floatDivBoxs .floatDqq li{hauteur: 45px; hauteur de ligne: 45px; taille de police: 15px; bordure-bottom: 1px solide #e3e3e3 ; remplissage-gauche : 0px ;>

#floatDivBoxs .floatDtxt{font-size : 18px;couleur :#333;rembourrage :12px 14px;}

.floatShadow{ background:#fff;box-shadow:-2px 0 3px rgba(0,0,0,0.25);}

#rightArrow{width :50px; hauteur:45px;arrière-plan:url(https://img.php.cn/upload/image/380/320/544/1478308842480674.jpg) pas de répétition;position:fixe;haut:100px;droite:170px ;z- index:999;}

#rightArrow a{display:block;height:45px;}

Le complet le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
 <meta name="format-detection" content="telephone=no" /> 
<title>QQ客服</title>
<style>
/* 公共样式定义 */
*{padding:0;margin:0;}
html,body{font-size:12px;font-family:"宋体";outline:none;color:#666;background:#fff;}
ul,ol{list-style:none;}
img{border:none;outline:none;}
a{color:#666;text-decoration:none;outline:none;}
a:hover{color:#e8431f;}
/*根据class或者id值定义样式*/
body{height:3000px;}
#floatDivBoxs{width:170px;background:#fff;position:fixed;top:100px;right:0;z-index:999;}
#floatDivBoxs .floatDtt{width:100%;height:45px;line-height:45px; background:#f08326;color:#fff;font-size:18px;text-indent:22px;position:relative;}
#floatDivBoxs .floatDqq{padding:0 14px;}
#floatDivBoxs .floatDqq li{height:45px;line-height:45px;font-size:15px;border-bottom:1px solid #e3e3e3;padding-left:0px;}
#floatDivBoxs .floatDtxt{font-size:18px;color:#333;padding:12px 14px;}
.floatShadow{ background:#fff;box-shadow:-2px 0 3px rgba(0,0,0,0.25);}
#rightArrow{width:50px;height:45px;background:url(https://img.php.cn/upload/image/380/320/544/1478308842480674.jpg) no-repeat;position:fixed;top:100px;right:170px;z-index:999;}
#rightArrow a{display:block;height:45px;}
</style>
</head>
<body>
<div id="rightArrow"><a href="#" title="在线客户"></a></div>
<div id="floatDivBoxs">
 <div class="floatDtt">在线客服</div>
 <div class="floatShadow">
 <ul class="floatDqq">
 <li ><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="https://img.php.cn/upload/image/477/494/683/1478309332960894.png" > 在线客服1</a></li>
 <li ><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="https://img.php.cn/upload/image/477/494/683/1478309332960894.png" > 在线客服2</a></li>
 <li ><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="https://img.php.cn/upload/image/477/494/683/1478309332960894.png" > 在线客服3</a></li>
 </ul>
 <div class="floatDtxt">热线电话<br/>0551-123456789</div>
 </div>
</div>
</body>
</html>

Vous pouvez essayer de modifier certains styles et voir quels changements se produiront

section suivante

nouveau fichier

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
 <meta name="format-detection" content="telephone=no" /> 
<title>QQ客服</title>
<style>
/* 公共样式定义 */
*{padding:0;margin:0;}
html,body{font-size:12px;font-family:"宋体";outline:none;color:#666;background:#fff;}
ul,ol{list-style:none;}
img{border:none;outline:none;}
a{color:#666;text-decoration:none;outline:none;}
a:hover{color:#e8431f;}
/*根据class或者id值定义样式*/
body{height:3000px;}
#floatDivBoxs{width:170px;background:#fff;position:fixed;top:100px;right:0;z-index:999;}
#floatDivBoxs .floatDtt{width:100%;height:45px;line-height:45px; background:#f08326;color:#fff;font-size:18px;text-indent:22px;position:relative;}
#floatDivBoxs .floatDqq{padding:0 14px;}
#floatDivBoxs .floatDqq li{height:45px;line-height:45px;font-size:15px;border-bottom:1px solid #e3e3e3;padding-left:0px;}
#floatDivBoxs .floatDtxt{font-size:18px;color:#333;padding:12px 14px;}
.floatShadow{ background:#fff;box-shadow:-2px 0 3px rgba(0,0,0,0.25);}
#rightArrow{width:50px;height:45px;background:url(http://img.php.cn//upload/image/380/320/544/1478308842480674.jpg) no-repeat;position:fixed;top:100px;right:170px;z-index:999;}
#rightArrow a{display:block;height:45px;}
</style>
</head>
<body>
<div id="rightArrow"><a href="#" title="在线客户"></a></div>
<div id="floatDivBoxs">
 <div class="floatDtt">在线客服</div>
 <div class="floatShadow">
 <ul class="floatDqq">
 <li ><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="http://img.php.cn//upload/image/477/494/683/1478309332960894.png" > 在线客服1</a></li>
 <li ><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="http://img.php.cn//upload/image/477/494/683/1478309332960894.png" > 在线客服2</a></li>
 <li ><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="http://img.php.cn//upload/image/477/494/683/1478309332960894.png" > 在线客服3</a></li>
 </ul>
 <div class="floatDtxt">热线电话<br/>0551-123456789</div>
 </div>
</div>
</body>
</html>

soumettre Réinitialiser le code

Opération automatique

Plein écran