html页面
我们如何制作一个漂亮的web页面呢？其中一个办法是：抄
步骤说明
我们看到了一个页面，觉得这个页面中左侧用户头像框部分不错，使用鼠标在这个像框部分右键选择inspect，打开chrome的开发者工具。
鼠标在Element面板上面html标签上划过，当划到某个节点时，在页面中相应的部分会有暗框显示。经过简单分析，我找到了左侧面板是一个div,鼠标选中并复制它（ctrl+c或右键菜单Copy->Copy Element）,内容如下:
<div class="column left">
<div class="user-info" id="user-info" data-spm="author">
<div class="user-pic">
<!-- fromWhere为10是马甲号作者不可点击进入个人页面 -->
<a href="https://mp.sohu.com/profile?xpt=ZTUyODY4ZjAtNjNiYS00YTMzLTkzN2EtZWY0YTYxYWYwODk0&_f=index_pagemp_1&spm=smpc.content.author.1.1615363708052uWWhhBj" target="_blank" data-spm-data="1">
<img src="//5b0988e595225.cdn.sohucs.com/a_auto,c_cut,x_115,y_0,w_266,h_266/images/20190409/6c3ad8dd7c8d4a0e94eac9becf9db1ac.jpeg" alt="">
</a>
</div>
<h4>
<a href="https://mp.sohu.com/profile?xpt=ZTUyODY4ZjAtNjNiYS00YTMzLTkzN2EtZWY0YTYxYWYwODk0&_f=index_pagemp_1&spm=smpc.content.author.2.1615363708052uWWhhBj" target="_blank" data-spm-data="2">指尖代码</a>
</h4>
<!-- 积分 -->
<div class="fox-wrap" id="fox-integration">
<div class="fox-head-wrap" data-grade="tag">
<span class="fox-logo
fox-sliver
">
</span>
<span class="fox-logo
fox-sliver
">
</span>
<span class="fox-logo
fox-sliver
">
</span>
</div>
<div class="fox-hover-wrap" data-grade="grade" style="display: none;">
<div class="fox-each-wrap
fox-each-sliver
">
<p class="fox-content">
由内容质量、互动评论、分享传播等多维度分值决定，勋章级别越高(
<span class="fox-grade"></span>
)，代表其在平台内的综合表现越好。
</p>
</div>
</div>
</div>
<dl class="user-num">
<dd><span class="value" data-value="1117" data-role="info-article-num"><em class="num">1117</em></span>文章</dd>
<dd><span class="value" data-value="" data-role="info-read-num"><em class="num">75万</em></span>总阅读</dd>
</dl>
<!-- 企业认证 -->
<ul class="company">
</ul>
<!-- 非马甲号作者 -->
<div class="user-more">
<a href="https://mp.sohu.com/profile?xpt=ZTUyODY4ZjAtNjNiYS00YTMzLTkzN2EtZWY0YTYxYWYwODk0&_f=index_pagemp_2&spm=smpc.content.author.3.1615363708052uWWhhBj" target="_blank" data-spm-data="3">查看TA的文章></a>
</div>
</div> <div class="article-do" id="article-do" data-spm="share" style="left: 0px; margin-left: 0px;">
<div class="article-done">
<div class="title">评论</div>
<dl>
<dd class="comment-do"><a href="https://www.sohu.com/a/325698492_120133651?spm=smpc.content.share.1.1615363708052uWWhhBj#comment_area" data-spm-acode="8089" data-spm-data="1"><em class="comment-icon icon"></em><span class="num" data-role="comment-count">0</span></a></dd>
<!--<dd class="zan-do" data-role="like-btn"><a href="javascript:void(0)"><span class="num" data-role="like">0</span><em class="icon zan-icon"></em></a>
<span class="add-one">+1</span>
</dd>-->
</dl>
</div>
<div class="share" id="share"><div class="title">分享</div>
<ul>
<li class="weixin"><a href="javascript:void(0)" data-spm-data="2"><em class="icon weixin-icon"></em><span class="label">微信分享</span></a>
<div class="wx-code">
<div class="cort"></div>
<div class="code-pic">
<div id="qrcode" class="qrcode"></div>
</div>
<!--
<p class="wx-tip">微信“扫一扫”<br/>分享到朋友圈</p>
-->
</div>
</li>
<li class="sinat"><a data-clev="10220259" target="_blank" href="http://service.weibo.com/share/share.php?url=https%3A%2F%2Fwww.sohu.com%2Fa%2F325698492_120133651&title=%E5%AD%A6%E5%AE%8CHTML%E5%92%8CCSS%E6%80%8E%E4%B9%88%E5%81%9A%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5_%E9%A1%B5%E9%9D%A2&searchPic=true&pic=http://5b0988e595225.cdn.sohucs.com/images/20190709/9a82551cb0d8465682d069317564d46d.jpeg&appkey=2890110694" data-spm-acode="8090" data-spm-data="3"><em class="icon sinat-icon"></em><span class="label">新浪微博</span></a></li>
<li class="qzone"><a data-clev="10220260" target="_blank" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https%3A%2F%2Fwww.sohu.com%2Fa%2F325698492_120133651" data-spm-acode="8092" data-spm-data="4"><em class="icon qzone-icon"></em><span class="label"></span>QQ空间</a></li>
<li class="copy-link"><a href="javascript:void(0)" data-spm-data="5"><em class="icon link-icon"></em><span class="label">复制链接</span></a></li>
</ul>
<div class="toast"><div class="toast-text">链接复制成功</div></div></div>
</div>
</div>
把这一部分代码复制进一个组件中，这时会有很多错误，我们进行一些处理：
转换为react的jsx代码
在vscode工具中，选中这些html，按下快捷键
alt+j。修复一些错误
这时可能会有一些react的错误，我们有针对性的修改它就可以了，比如某些属性值没有，删除这些没用的属性就可以了
样式补充
现在内容就出来了，但是会缺少一些样式，显得跟原页面稍有不同，这时我们仍然可以通过chrome的开发者工具，找到对应的样式定义，抄到我们的项目中即可。复制的方法是在chrome开发者工具中的
Elements面板中选中某个结点，可以在Styles面板中看到其所有样式，只需要将其定义的样式复制出来即可，Inherited from ...部分的样式只需要在其对应继承的节点上有定义即可，是不需要重复定义的。这些会有一些小问题，这里提示一下：
全局样式
在原始页面中，会有一些对html，body这些元素的一些样式定义，我们可以将其定义移至该组件最外层结点上。
多余的样式
复制的样式可能会有一些多余，没必要用的样式可以舍去，以减少组件代码量。
使用id定义的样式
这种样式建议修改为新建类名，使用类名定义。
引用图片
分为两种，一种是样式中引用的图片，另一种是
img组件引用的图片，都可能会存在引用原始网站中相对路径下的某一个图片的情况，这种情况下，建议将原始网站中对应的图片下载下来，通过一些在线的转换工具，将其图片转换为base64格式，替换到修改后的组件上。
用户交互
如果是纯展示的样式，这一步就没有必要了，如果有用户交互，则需要补充完整脚本。比如我们现在这个示例来讲，原页面有一个用户交互，就是当鼠标放置在头像下面的图标上的时候会有一个提示框显示出来，当鼠标移走这个提示框就消失。这个逻辑不复杂，我们添加两个事件
onMouseOver和onMouseOut，设置提示框的显示与否。数据替换
使用自己项目中的数据替换掉原始页面中的数据。
完整的组件
function C001() {
const [visible, setvisible] = useState(false);
/**
* 显示提示内容
*/
function showdescription() {
console.log('ininin');
setvisible(true);
}
/**
* 隐藏提示内容
*/
function hidedescription() {
console.log('outoutout');
setvisible(false);
}
return <>
<div className="column left">
<div id="user-info" data-spm="author" className="user-info">
<div className="user-pic">
<a href="https://mp.sohu.com/profile?xpt=ZTUyODY4ZjAtNjNiYS00YTMzLTkzN2EtZWY0YTYxYWYwODk0&_f=index_pagemp_1&spm=smpc.content.author.1.1615363708052uWWhhBj" target="_blank" data-spm-data="1" rel="noreferrer">
<img src="//5b0988e595225.cdn.sohucs.com/a_auto,c_cut,x_115,y_0,w_266,h_266/images/20190409/6c3ad8dd7c8d4a0e94eac9becf9db1ac.jpeg" />
</a>
</div>
<h4>
<a href="https://mp.sohu.com/profile?xpt=ZTUyODY4ZjAtNjNiYS00YTMzLTkzN2EtZWY0YTYxYWYwODk0&_f=index_pagemp_1&spm=smpc.content.author.2.1615363708052uWWhhBj" target="_blank" data-spm-data="2" rel="noreferrer">指尖代码</a>
</h4>
<div id="fox-integration" className="fox-wrap">
<div data-grade="tag" className="fox-head-wrap" onMouseOver={showdescription} onMouseOut={hidedescription}>
<span className="fox-logo fox-sliver ">
</span>
<span className="fox-logo fox-sliver ">
</span>
<span className="fox-logo fox-sliver ">
</span>
</div>
<div data-grade="grade" className={`fox-hover-wrap ${visible ? 's003' : 's001'}`}>
<div className="fox-each-wrap fox-each-sliver ">
<p className="fox-content">
由内容质量、互动评论、分享传播等多维度分值决定，勋章级别越高(
<span className="fox-grade"></span>
)，代表其在平台内的综合表现越好。
</p>
</div>
</div>
</div>
<dl className="user-num">
<dd><span data-value="1117" data-role="info-article-num" className="value"><em className="num">1117</em></span>文章</dd>
<dd><span data-value data-role="info-read-num" className="value"><em className="num">75万</em></span>总阅读</dd>
</dl>
<ul className="company">
</ul>
<div className="user-more">
<a href="https://mp.sohu.com/profile?xpt=ZTUyODY4ZjAtNjNiYS00YTMzLTkzN2EtZWY0YTYxYWYwODk0&_f=index_pagemp_2&spm=smpc.content.author.3.1615363708052uWWhhBj" target="_blank" data-spm-data="3" rel="noreferrer">查看TA的文章></a>
</div>
</div> <div id="article-do" data-spm="share" className="article-do s002">
<div className="article-done">
<div className="title">评论</div>
<dl>
<dd className="comment-do"><a href="https://www.sohu.com/a/325698492_120133651?spm=smpc.content.share.1.1615363708052uWWhhBj#comment_area" data-spm-acode="8089" data-spm-data="1"><em className="comment-icon icon"></em><span data-role="comment-count" className="num">0</span></a></dd>
</dl>
</div>
<div id="share" className="share"><div className="title">分享</div>
<ul>
<li className="weixin"><a href="#" data-spm-data="2"><em className="icon weixin-icon"></em><span className="label">微信分享</span></a>
<div className="wx-code">
<div className="cort"></div>
<div className="code-pic">
<div id="qrcode" className="qrcode"></div>
</div>
</div>
</li>
<li className="sinat"><a data-clev="10220259" target="_blank" href="http://service.weibo.com/share/share.php?url=https%3A%2F%2Fwww.sohu.com%2Fa%2F325698492_120133651&title=%E5%AD%A6%E5%AE%8CHTML%E5%92%8CCSS%E6%80%8E%E4%B9%88%E5%81%9A%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5_%E9%A1%B5%E9%9D%A2&searchPic=true&pic=http://5b0988e595225.cdn.sohucs.com/images/20190709/9a82551cb0d8465682d069317564d46d.jpeg&appkey=2890110694" data-spm-acode="8090" data-spm-data="3" rel="noreferrer"><em className="icon sinat-icon"></em><span className="label">新浪微博</span></a></li>
<li className="qzone"><a data-clev="10220260" target="_blank" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https%3A%2F%2Fwww.sohu.com%2Fa%2F325698492_120133651" data-spm-acode="8092" data-spm-data="4" rel="noreferrer"><em className="icon qzone-icon"></em><span className="label"></span>QQ空间</a></li>
<li className="copy-link"><a href="#" data-spm-data="5"><em className="icon link-icon"></em><span className="label">复制链接</span></a></li>
</ul>
<div className="toast"><div className="toast-text">链接复制成功</div></div></div>
</div>
</div>
<style jsx>{`
.s001 { display: none; }
.s002 { left: 0px; margin-left: 0px; }
.s003 { display: block; }
.column{
width: 140px;
-webkit-font-smoothing: antialiased;
margin: 0 auto;
background: #fff;
color: #666;
font-size: 12px;
line-height: 1.667;
position: relative;
padding-top: 50px;
}
.left{
float: left;
display: inline;
}
.user-info {
background: #fff;
position: relative;
padding-top: 56px;
width: 138px;
border: 1px #ddd solid;
}
a,div,img,h4,dl,dd,em,span,ul,li {
margin: 0;
padding: 0;
font-size: 100%;
}
.user-pic {
height: 70px;
width: 70px;
position: absolute;
top: -22px;
left: 35px;
}
a {
color: #191919;
text-decoration: none;
}
h4 {
text-align: center;
font-size: 16px;
line-height: 20px;
padding-top: 3px;
font-weight: 400;
}
.fox-wrap {
width: 100%;
height: 16px;
padding-top: 9px;
position: relative;
}
.fox-wrap .fox-head-wrap {
position: absolute;
width: 100%;
height: 16px;
text-align: center;
z-index: 43;
}
.fox-wrap .fox-hover-wrap {
position: relative;
height: 0;
width: 0;
top: -11px;
left: -11px;
z-index: 30;
}
.fox-wrap .fox-head-wrap .fox-sliver {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAACf0lEQVQoz5WRPUhbYRSGz/nyYxJidUgClZKhgZB0qB10jGBSWyj1B7p36uDQtUM7OLab4FCU1oKtsZQ6pg51aB0iVoPBKIoo8TaKURK53ptrPu9Ncr/Tob2SIlT6wIFzDud9h/cANJFdzQw0z+vruSfLyz8GrXl2drYjlUrFm2/QatbWVr263tAcdnzR2tr6jtkcb6rV6uDx8TF3Op0fGMORer2RbGlp6Y3FYk5Lx6zm4OCgj0iAUauPnCrqWwIYNE0TGo2Gp1Yzhk/l0092u+OeoiiOsbGxG5cMSqXy/bMzDbxer6tWqw8UfkoCEcnv9xPnvHG9oyMeCPihUCiAoiiPLhnYbPbezs47EI3eEoFAAGRZZsFgEEOhEOq6YY9EIhCNRimRSAAAJJpzgInx1+G9vT2yODk5obm5OeKck6ZpND8/T7quExEJIqJMJlMZHR29yAF2d3efERGpqnphksvlRKVSIVVVaXNz01qbsiwTEdHR0dHDiy9IkpR3u903PR6PMAyD+Xw+AgAslUqAiODz+QARRblcBsYY6LrOOOfpcDgcw2w2+9w0zZeMMWhvbxcrKyuws7PDurq6IB6PAyLCwsICZDIZ6O7uplAoRLIss9+52Z7aFUXpY4wBIgLnnLW1XRPn51xIkoQulwsBADY2NsgwDHA6nVgsFpGI4E89xmQy6QaAu4g4TEQPiAiCwSD19PQIALABAFWrVXNxcdFeLBaBMQaMsW8AMEFEX//6xvT0dCSdTn85PDykJkwhBO3v79PS0lJ6ZmbmNlxFPp//rGmaZSAURaHt7e3vVwqb2draejU5OUlTU1NUKBTe/5fYYmho6GN/f3/qXze/AOHWfVw0t51KAAAAAElFTkSuQmCC) no-repeat;
background-size: cover;
}
.fox-wrap .fox-hover-wrap .fox-each-sliver {
background: url(data:image/png;base64,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) no-repeat;
background-size: cover;
}
.fox-wrap .fox-hover-wrap .fox-each-wrap {
width: 293px;
height: 211px;
padding: 102px 58px 0 35px;
box-sizing: border-box;
z-index: 201;
}
.fox-wrap .fox-hover-wrap .fox-each-wrap .fox-content {
line-height: 22px;
font-size: 14px;
color: #191919;
font-weight: 400;
}
.fox-wrap .fox-hover-wrap .fox-each-wrap .fox-content .fox-grade {
display: inline-block;
position: relative;
top: -1px;
width: 71px;
height: 15px;
line-height: 22px;
vertical-align: middle;
background: url(data:image/png;base64,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) no-repeat;
background-size: cover;
}
.fox-wrap .fox-head-wrap .fox-logo {
display: inline-block;
height: 15px;
width: 16px;
vertical-align: top;
margin-right: 3px;
cursor: pointer;
}
.user-num {
padding: 14px 2px 15px;
height: 42px;
}
.user-info .user-num dd:first-child {
border-right: 1px #eee solid;
}
.user-info .user-num dd {
height: 42px;
width: 66px;
float: left;
text-align: center;
color: #666;
line-height: 1;
}
.user-info .user-num .value {
color: #191919;
font-size: 14px;
display: block;
height: 26px;
line-height: 26px;
vertical-align: middle;
}
.company {
margin-left: 13px;
margin-bottom: 9px;
}
.user-info .user-more {
height: 31px;
background: #f9f9f9;
text-align: center;
line-height: 31px;
}
.user-info .user-more a {
color: #666;
}
.article-do {
left: 0px;
margin-left: 0px;
margin: 30px auto 0;
text-align: center;
}
.article-done {
border-top: 1px #efefef solid;
position: relative;
}
.article-do .title {
position: absolute;
width: 44px;
background: #fff;
color: #303030;
top: -10px;
right: 48px;
text-align: center;
font-size: 14px;
}
.article-done dd {
padding-top: 20px;
font-size: 24px;
position: relative;
}
.article-done dd a {
display: block;
}
.article-done dd .comment-icon {
width: 30px;
height: 30px;
margin: 0 auto;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAHqADAAQAAAABAAAAHgAAAADKQTcFAAABDklEQVRIDe1XMQ6DMAx0UGZWVj7AP9j5AEgMvAkh8ScG/oEY2EjrVEYuogSVUHfAUmTjJL5cfBlQeZ4bELBAANNCagJu25bCS31RFLa+GOMb+NL+8uKLuHiSxyQGnjsSu8Qq1mMnY9fJj7DfWiPGWAzYedW3uLaE8k1OrMdiwKfEdeaN/y/jM6z2RCfG+Abea4vXubfnNAwD1HUNfd+DUsoORAuCV0cwh0Zz5Nc5/s1j2o+5BbjrOmiaBsZxxDwYY+zAeJ5ndF5Nrf8kkiSBsiwhDMMFHA+BRp4Owg9HMa359I11cP/CWGsNWZZBmqY4Z41fJeV8eQscRRFUVQVxHPuq667zFJOZpul5M7+1BwS92TnQOtLBAAAAAElFTkSuQmCC) no-repeat 100% 100%;
}
.article-done dd a em, .article-done dd a span {
display: block;
}
.share li .icon {
margin-right: 8px;
width: 20px;
height: 20px;
opacity: .8;
}
.icon {
display: inline-block;
vertical-align: top;
}
em {
font-style: normal;
}
.article-done dd .num {
font-family: Georgia,Arial;
color: #da2128;
line-height: 32px;
}
.article-done dd a em, .article-done dd a span {
display: block;
}
.share {
position: relative;
margin-top: 30px;
padding-top: 20px;
border-top: 1px #efefef solid;
}
.article-do .title {
position: absolute;
width: 44px;
background: #fff;
color: #303030;
top: -10px;
right: 48px;
text-align: center;
font-size: 14px;
}
ul {
list-style: none;
}
.share .weixin {
position: relative;
}
.share li {
margin-bottom: 20px;
}
li {
display: list-item;
}
.share li a {
box-sizing: border-box;
display: block;
line-height: 20px;
text-align: left;
padding-left: 22px;
}
.share li a {
color: #606060;
}
.share .toast {
display: none;
position: fixed;
width: 1180px;
margin: 0 auto;
z-index: 999;
top: 80px;
}
.share .toast .toast-text {
margin-left: 190px;
width: 600px;
height: 40px;
line-height: 40px;
text-align: center;
background: #fff;
color: #303030;
box-shadow: 3px 3px 10px rgb(0 0 0 / 12%);
}
.share li .weixin-icon {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAAFAAAAACy3fD9AAACQ0lEQVQ4Ea1V3WvTUBT/3TRttrb7qJ1UbSUONidDRQsTREFEhA1BEEF8EPekMHzzbYL4sj9CVPBJUFBfROeLMJyiFpXJ/GCuimhXu62uW5stMV0T702bLGnyIFsP3Nzz9fvlnHsPCbnyaWBA13AD0BPYkJAM4XCRawwZq0RPMC5u45XZ29ITlLCxwnvRccSHHcHd6GnpQ5MvhLT0nq4JyJWSV7rD5yKMCSJObruEztAeK7Ev0o+COovR3E18LL60/F6Ko+UwH8E58SoSzTsxnr9vVZRaeIK/moyz24fRHU568Vg+B+GRzWcQDcQhayXklB9Y1ctGYl7NolieR2l1Ab2tBy2wl0KGJ/t1M3C5+xY6hLhpWvtieRZZ+TvCfCsELkgrX8aUlMLrP49p5StWHlMcFU4Wn9eC7B3V9xTUHH6tTEEM9lLCKGJNnXSJOBw9jfPiNePSaiBjcxCO5x8gq6RpgNQWMKNMY1fLASyW5/Ai/9AAfSm9wcTSM3pxe3FiywXDZz4chApt5c7PESxRsCk+woPnAog3d9HbH6JuHcn2YzgUPWWk7Ke6XVxjI1ckfC6+wrflD/ATgcI1dIWS8HOCQbYGZl0AqcLomotqLkJVU/Do93VH0qbAVhyPDdKDqJKYwa/SWzzN3TZNY3cRanrFkcCMsfl7mJHT2Nd+FJFADOxo2vwdGJu7C5XOp11chPagXZ+W3oEtU9j4+OnZ1st/E9YD2fzVzyDLcdxyPWg9NiUkmfUAvTEkw7HPdmNIq7+Af9ONvQ4B+raWAAAAAElFTkSuQmCC) no-repeat 0 0;
}
.share .wx-code {
display: none;
position: absolute;
width: 140px;
height: 120px;
text-align: center;
bottom: 17px;
transition: opacity ease-in-out .5s;
}
.share .wx-code .cort {
display: none;
}
.share .wx-code .qrcode {
box-sizing: border-box;
margin: 0 auto;
width: 116px;
height: 120px;
background: url(data:image/png;base64,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) no-repeat 0 0;
padding: 15px 16px 21px;
}
.share li .sinat-icon {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAAFAAAAACy3fD9AAACJElEQVQ4Ea2UT0hUURSHv/MmSqE0DZrE0horMyUri0oKFxZitAkNAiXNwFy2a5nL3ERtRFpE7VwFEUQRSBBESFSURqv+6YxFWjCVjum8071vGPMxr2hyDjzu5dzz+9555553RFu7mlWTVxXWswQTGBcJdYvb0jG2VFg6Dwt1cgWzUMty0vRcrdkBQyFk727Yvg3MPsiWBTn/6LOQulqcSDkkErgD1yH20Rf+9wwLC5CaKlhTnBIlkzD1BX38BP0QxTnXA/l5/wAUQY4ewem7gPSeR852pkSq6PMR2BzxwGDi9uzyATM/2dap+xTS2LAQKBvLoKsN2VqBjsfg/gPYWYOabCnzt28GUNpPpGAmG8aiRvQVWbEcOXQAVq1EDMAdvAkjr5CqSnRyauHFduMDSm01cqwJHX2NWpE4SFEh7pt3EP+OHNyHnDyOnGlHbwyiL0Z9sEzg6TbT6zH04mWk3oh7OmF2Fpmewe3tQ+8NmU8sRZoazS3/RK8MZAD9tzw3h0YnYCYB++vQS/3os5dQXISUlqTEefmpNR7PgFmHD+j2X/NqJDuqYfgpbIkg5RvQoYdeGaT5MNJQD2/fo7fvBgIl2dJhqr/IKjZ5LYPNwDVHtvfm583fUYmE16KPhtFbd0xNvy0S/d5mAtNnJWFkXRhWFxiPmSOfJ1GTGT+m0xGBq++WfRETn1DzZGu+GmYrDop37FAMOvgfnzdgvbGdA6iFWdYv8dGtGYhMhQwAAAAASUVORK5CYII=) no-repeat 0 0;
}
.share li .qzone-icon {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAAFAAAAACy3fD9AAAB2klEQVQ4EbWSTUtUURjHf8+5ZyZfxklL0RSVEZKygqJFGxetdefCVha0aVHr+gIRgWCLKCjoY+iqlfUFWuQi6G0YKCQVGWHU8czpuZdm4E73MjMwHrjce8/z/H/Pqxxtzq4DC/p042yIAn03SHWGqX90690e0PRA0NtWzLaAwYVlgqmHXQLaAcz4XYKxO8iZ8ZbQlhkGo0tIzyTYvIJXWgJtzEMyKuxH7BBkR5DeAmbyQcMlmLgH1V38wWf88Ta+ugOuArXDhk9sbSQ3h519pqAZMBn80W84LKn4jwrLeKdCf4wZWUQyw2r/hfv6lNreZgMYK9kfbOG+PceflNXBINlRJHcNyd+I7lzxJWgQsYMKruJ+rMVgITWWYT2M5K5gL73QTKfxlZ+40luoFDFTjzCDt6KM3ZcnCvtYlzTe8R7+uw575IqvMfnrnHxf1YzyBIXHmvH5qIe10ptEWChPBIYGyQ5ruVexc6+0XzqkcGAIXktFW5F20oG5y8iA9k+VvvxJB7IflRuCjPbUpRCTgWKRvosRyJXeUdt5r1SHGZrHTNxXWwHCrKt7/2ETh4I9q1nc1D59iKbZrDLnbusubkW72GxLBjZ7dfAf28MOdKmupwLcSA3XuWH9L+g5mptgsJfjAAAAAElFTkSuQmCC) no-repeat 0 0;
}
.share li .link-icon {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAAFAAAAACy3fD9AAABV0lEQVQ4EbWSy8qCUBSFl6I1SA0EC7ORoA/T+9ZTNG5gNIvCgkDJgRfsb50IvBTd/Dcox4PnO2utvaXlcjkHMLs+XdRCvlK6glHQjMBOq3Og8qk8TdMwHA5RFAWOxyPKsqwhPgJOJhOMx2PEcQyCDcPAer3+Dug4DkzTxGq1Qpqm0HUdvu9DluWayrcypDLCgiAQMEpSFEXYblp+CRwMBsImrTE7SZLQ7/cxnU6x3+9rdsVFrZ3KhqqqAnI+n4UyKqWi0WiE0+mEw+FQ+fu2fNoUZkZFPEQAK0kS9Ho90Yg8z2+ExvshkIB7ZlmWieBpk53d7XZ4BiP7YYa2bWO73Qqbl8sFURTB8zyEYShUNkTVPltAjsG9g/yTyjgezIzqXlXLMkPn4LquCzaDw0tl78B4WQvIzc1mA8uyhFLCCH63HgKpkqBvqpXhN5DqmX8BLqo3/Lie/wFOh4/a236dmAAAAABJRU5ErkJggg==) no-repeat 0 0;
}
li::before{
content: none;
}
`}</style>
</>;
}