为了实现qq邮箱app的邮件显示效果,就是哪个邮件左边的图案,当没有找到对应logo时,以主题头一个字作为logo
代码如下:
<html><head><title>圆圈</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">.circle {width: 25px;height: 25px;border-style: solid;border-width: 1px;border-radius: 50%;-moz-border-radius: 50%; -webkit-border-radius : 50%;border-color: #1E90FF;-webkit-border-radius: 50%;}.circle-text {font-family:"黑体",Helvetica,"Arial","Microsoft YaHei","宋体",sans-serif;;width: 25px;height: 25px;line-height: 25px;text-align: center;font-size: 15px;font-weight:normal;color: #1E90FF;}</style></head><body><div class="circle"><div class='circle-text'>京</div></div><br><div class="circle"><div class='circle-text'>Pa</div></div></body></html>
效果
新的效果-改良版
<html><head><title>圆圈</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">.jy-circle{border: 1.5px solid #1E90FF;color: #1E90FF;font-size: 16px;border-radius: 100%;position: relative;z-index: 2;display: inline-block;width: 32px;height: 32px;line-height: 28px;background-color: #FFF;text-align: center;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; font-family:font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; }</style></head><body><span class="jy-circle">京</span><span class="jy-circle">Pa</span></body></html>