zoukankan      html  css  js  c++  java
  • 带横线圆圈标题

    <!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>
    

      

      

  • 相关阅读:
    Linux网络检测手段汇总
    Hadoop单机搭建
    Nginx之Location模块
    关于STM32驱动DS1302实时时钟的一点思考
    灵感手环第一步——0.96寸OLED显示实验
    把简单做到极致
    KEIL MDK 查看代码量、RAM使用情况--RO-data、RW-data、ZI-data
    关于SPI通信原理与程序实现
    【转载】keil5中加入STM32F10X_HD,USE_STDPERIPH_DRIVER的原因
    关于keil5使用注意事项(预定义、路径包含)
  • 原文地址:https://www.cnblogs.com/qing1304197382/p/11018905.html
Copyright © 2011-2022 走看看