带横线圆圈标题
Posted qing1304197382
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带横线圆圈标题相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .title-line position: relative;z-index: 2;font-size: 32px;line-height: 62px;text-align: center;overflow: hidden;width: 1200px;margin: 30px auto 0px auto; .title-line .caption position: relative;display: inline-block; .title-line .caption .line position: absolute;top: 31px;width: 600px;height: 1px;background-color: #A1A1A1; .title-line .caption .line-l right: 100%; .title-line .caption .line-r left: 100%; .title-line .yuanwidth: 10px;height: 10px;border-radius: 50%;border: 3px #626262 solid;display: block;margin-top: 23px; .title-line .textpadding:10px 20px 10px 20px; .flfloat: left; .frfloat: right; </style> </head> <body> <div class="title-line"> <span class="caption"> <span class="line line-l"></span> <i class="yuan fl"></i> <span class="text">Headling</span> <i class="yuan fr"></i> <span class="line line-r"></span> </span> </div> </body> </html>
以上是关于带横线圆圈标题的主要内容，如果未能解决你的问题，请参考以下文章