zoukankan      html  css  js  c++  java
  • css中before和after的应用实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>before和after</title>
    <style>
    *{margin:0;padding:0;}
    ul{100%;overflow: hidden;margin-top:50px;}
    ul li {float:left;list-style:none;height:auto;200px;border:1px solid #f00;position:relative;height:50px;}
    ul li h3{font-size:20px;text-align:center;}
    ul li h3:before{
    content: '';
    display: block;
    position: absolute;
    100%;
    height: 10px;
    background: #224089;
    left: 0;
    bottom: 6px;
    margin-left: -2px;
    }
    ul li h3:after{
    content: '';
    display: block;
    position: absolute;
    22px;
    height: 22px;
    bottom: 6px;
    margin-bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #8D171F;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background-size: 10px 10px;
    }
    #content p{display: none;}
    </style>
    </head>
    <body>
    <ul id="title">
    <li style="color:red;font-size:20px;font-weight:bold;" onclick="change(0)"><h3>这是li里的h3的内容</h3></li>
    <li onclick="change(1)"><h3>这是li里的h3的内容</h3></li>
    <li onclick="change(2)"><h3>这是li里的h3的内容</h3></li>
    <li onclick="change(3)"><h3>这是li里的h3的内容</h3></li>
    </ul>
    <ul id="content">
    <p style="display:block;">第一个</p>
    <p>第二个</p>
    <p>第三个</p>
    <p>第四个</p>
    </ul>
    <script src="js/jquery.min.js"></script>
    <script>
    function change(num){
    var titles=document.getElementById('title').getElementsByTagName('li');
    var h3obj=document.getElementById('title').getElementsByTagName('h3');
    var conts=document.getElementById('content').getElementsByTagName('p');

    //判断当前点击的哪一个h3
    for(var i=0;i<titles.length;i++){
    if(i==num){
    conts[num].style.display = 'block';
    titles[num].style.color = 'red';
    titles[num].style.fontSize = '30px';
    titles[num].style.fontWeight = 'bold';

    // $('.time:after').css({'content':'aaa','color':'#fff','background':'#000'})

    }else{
    conts[i].style.display='none';
    titles[i].style.color = '#000';
    titles[i].style.fontSize = '20px';
    titles[i].style.fontWeight = 'none';
    }
    }
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    MySql创建库 Challenge
    未能启用约束。一行或多行中包含违反非空、唯一或外键约束的值的解决办法.
    小总结:用反射机制创建的分配数据分配器
    工厂模式的反思
    单机安装“完整”SharePoint 2010
    作业调度框架 Quartz.NET 2.0 StepByStep(2)
    UI线程同步
    每日见闻(一)
    作业调度框架 Quartz.NET 2.0 StepByStep
    基础算法(ACwing)
  • 原文地址:https://www.cnblogs.com/studyh5/p/7761491.html
Copyright © 2011-2022 走看看