<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {box-sizing: border-box;}
/* 样式一 */
.title-line {position: relative;z-index: 2;font-size: 32px;line-height: 62px;text-align: center;overflow: hidden; 1200px;margin: 30px auto 0px auto;}
.title-line .caption {position: relative;display: inline-block;}
.title-line .caption .line {position: absolute;top: 31px; 600px;height: 1px;background-color: #A1A1A1;}
.title-line .caption .line-l {right: 100%;}
.title-line .caption .line-r {left: 100%;}
.title-line .yuan{ 18px;height: 18px;border-radius: 50%;border: 3px #626262 solid;display: block;margin-top: 23px;}
.title-line .text{padding:10px 20px 10px 20px;}
.fl{float: left;}
.fr{float: right;}
/* 样式二 */
.box_tit{ 1200px;margin: 0 auto;text-align: center;position: relative;}
.box_tit .box_tit_line1 { 640px;height: 3px;text-align: center;border-bottom: 1px solid rgb(193, 193, 193);margin: 8px auto;}
.box_tit .box_tit_line1 .box_tit_linecl { 70px;display: block;float: left;margin-left: 250px;border- 2px;border-style: solid;border-color: rgb(0, 113, 191);border-image: initial;}
.box_tit .box_tit_line1 .box_tit_linecg { 70px;display: block;float: right;margin-right: 250px;border- 2px;border-style: solid;border-color: rgb(2, 178, 157);border-image: initial;}
.box_tit .strong {font-size: 38px;color: rgb(51, 51, 51);display: block;font-weight: bold;text-align: center;}
.box_tit span {font-size: 18px;color: #b3b3b3;display: block;text-align: center;}
</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>
<!-- 样式二 -->
<div class="box_tit">
<p class="strong">新闻资讯</p>
<p class="box_tit_line1">
<i class="box_tit_linecl"></i>
<i class="box_tit_linecg"></i>
</p>
<span>连线行业前沿资讯</span>
</div>
</body>
</html>
最终样式一
最终样式二
圆内圆
<style type="text/css">
ul li {
margin: 0 8px;
display: inline-block;
10px;
height: 10px;
border: #fff solid 1px;
cursor: pointer;
border-radius: 50%;
padding: 4px;
}
li i {
display: block;
transition: background .7s;
10px;
height: 10px;
border-radius: 100%;
}
ul li.on i {
background: #fff;
}
</style>
<ul>
<li class="">
<i></i>
</li>
<li class="on">
<i></i>
</li>
</ul>