• 前端实战——带有时间轴的博客首页布局


    一、布局参照模板

    http://www.yangqq.com/web/24/

    二、布局的html页面

    <!doctype html>
    <html lang="zh-hans">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="css/animation.css">
        <link rel="stylesheet" href="css/timelineBlog.css">
        <title>个人博客模板</title>
    </head>
    <body>
        <header>
            <nav id="nav">
                <ul class="nav-bar">
                    <li class="nav-menu"><a href="#">网站首页</a></li>
                    <li class="nav-menu"><a href="#">个人博客模板</a></li>
                    <li class="nav-menu"><a href="#">图书推荐</a></li>
                    <li class="nav-menu active"><a href="#">网站建设</a></li>
                    <li class="nav-menu "><a href="#">html5/css</a></li>
                    <li class="nav-menu"><a href="#">技术探讨</a></li>
                    <li class="nav-menu"><a href="#">慢生活</a></li>
                    <li class="nav-menu"><a href="#">闲言碎语</a></li>
                    <li class="nav-menu"><a href="#">JS实践</a></li>
                </ul>
            </nav>
        </header>
        <div class="main-body">
            <div class="banner">
                <figure>
                    <img src="images/art.jpg" alt="banner-img"/>
                    <figcaption>
                        <h4>
                            渡人如渡己,渡已,亦是渡
                        </h4>
                        <p>
                            当我们被误解时,会花很多时间去辩白。 但没有用,没人愿意听,大家习惯按自己的所闻、理解做出判别,每个人其实都很固执。与其努力且痛苦的试图扭转别人的评判,不如默默承受,给大家多一点时间和空间去了解。而我们省下辩解的功夫,去实现自身更久远的人生价值。其实,渡人如渡己,渡已,亦是渡人。
                        </p>
                    </figcaption>
                </figure>
                <div class="mingpian">
                    <h2>我的名片</h2>
                    <p>网名:DanceSmile | 即步非烟</p>
                    <p>职业:Web前端设计师、网页设计</p>
                    <p>电话:13662012345</p>
                    <p>Email:dancesmiling@qq.com</p>
                    <ul class="social-link">
                        <li><a href="/" class="talk" title="给我留言"></a></li>
                        <li><a href="/" class="address" title="联系地址"></a></li>
                        <li><a href="/" class="email" title="给我写信"></a></li>
                        <li><a href="/" class="photos" title="生活照片"></a></li>
                        <li><a href="/" class="heart" title="关注我"></a></li>                
                    </ul>
                </div>
            </div>
            <div class="bland"></div>
            <div class="main-content">
                <ul class="ul-blogs">
                    <li class="blog-item">
                        <div class="blog-wrapper">
                            <div class="trigle"></div><!--三角形-->
                            <div class="circle"></div><!--圆形-->
                            <h4><a href="#">我希望我的爱情是这样的</a></h4>
                            <div class="item-main">
                                <div class="img-wrapper">
                                    <a href="#"><img src="images/s1.jpg" alt="article1"/></a>
                                </div>
                                <p>
                                    我希望我的爱情是这样的,相濡以沫,举案齐眉,平淡如水。我在岁月中找到他,依靠他,将一生交付给他。做他的妻子,他孩子的母亲,为他做饭,洗衣服,缝一颗掉了的纽扣。然后,我们一起在时光中变老。
                                </p>
                            </div>
                            <ul class="blog-footer">
                                 <li class="likes"><a href="#">10</a></li>
                                <li class="comments"><a href="#">34</a></li>
                                <li class="icon-time"><a href="#">2013-8-7</a></li>
                            </ul>
                        </div>
                    </li>
                    
                    <li class="blog-item">
                        <div class="blog-wrapper">
                            <div class="trigle"></div><!--三角形-->
                            <div class="circle"></div><!--圆形-->
                            <h4><a href="#">我希望我的爱情是这样的</a></h4>
                            <div class="item-main">
                                <div class="img-wrapper">
                                    <a href="#"><img src="images/s1.jpg" alt="article1"/></a>
                                </div>
                                <p>
                                    我希望我的爱情是这样的,相濡以沫,举案齐眉,平淡如水。我在岁月中找到他,依靠他,将一生交付给他。做他的妻子,他孩子的母亲,为他做饭,洗衣服,缝一颗掉了的纽扣。然后,我们一起在时光中变老。
                                </p>
                            </div>
                            <ul class="blog-footer">
                                 <li class="likes"><a href="#">10</a></li>
                                <li class="comments"><a href="#">34</a></li>
                                <li class="icon-time"><a href="#">2013-8-7</a></li>
                            </ul>
                        </div>
                    </li>    
                    
                    <li class="blog-item">
                        <div class="blog-wrapper">
                            <div class="trigle"></div><!--三角形-->
                            <div class="circle"></div><!--圆形-->
                            <h4><a href="#">我希望我的爱情是这样的</a></h4>
                            <div class="item-main">
                                <div class="img-wrapper">
                                    <a href="#"><img src="images/s1.jpg" alt="article1"/></a>
                                </div>
                                <p>
                                    我希望我的爱情是这样的,相濡以沫,举案齐眉,平淡如水。我在岁月中找到他,依靠他,将一生交付给他。做他的妻子,他孩子的母亲,为他做饭,洗衣服,缝一颗掉了的纽扣。然后,我们一起在时光中变老。
                                </p>
                            </div>
                            <ul class="blog-footer">
                                 <li class="likes"><a href="#">10</a></li>
                                <li class="comments"><a href="#">34</a></li>
                                <li class="icon-time"><a href="#">2013-8-7</a></li>
                            </ul>
                        </div>
                    </li>
                    
                    <li class="blog-item">
                        <div class="blog-wrapper">
                            <div class="trigle"></div><!--三角形-->
                            <div class="circle"></div><!--圆形-->
                            <h4><a href="#">我希望我的爱情是这样的</a></h4>
                            <div class="item-main">
                                <div class="img-wrapper">
                                    <a href="#"><img src="images/s1.jpg" alt="article1"/></a>
                                </div>
                                <p>
                                    我希望我的爱情是这样的,相濡以沫,举案齐眉,平淡如水。我在岁月中找到他,依靠他,将一生交付给他。做他的妻子,他孩子的母亲,为他做饭,洗衣服,缝一颗掉了的纽扣。然后,我们一起在时光中变老。
                                </p>
                            </div>
                            <ul class="blog-footer">
                                 <li class="likes"><a href="#">10</a></li>
                                <li class="comments"><a href="#">34</a></li>
                                <li class="icon-time"><a href="#">2013-8-7</a></li>
                            </ul>
                        </div>
                    </li>
                    
                    <li class="blog-item">
                        <div class="blog-wrapper">
                            <div class="trigle"></div><!--三角形-->
                            <div class="circle"></div><!--圆形-->
                            <h4><a href="#">我希望我的爱情是这样的</a></h4>
                            <div class="item-main">
                                <div class="img-wrapper">
                                    <a href="#"><img src="images/s1.jpg" alt="article1"/></a>
                                </div>
                                <p>
                                    我希望我的爱情是这样的,相濡以沫,举案齐眉,平淡如水。我在岁月中找到他,依靠他,将一生交付给他。做他的妻子,他孩子的母亲,为他做饭,洗衣服,缝一颗掉了的纽扣。然后,我们一起在时光中变老。
                                </p>
                            </div>
                            <ul class="blog-footer">
                                 <li class="likes"><a href="#">10</a></li>
                                <li class="comments"><a href="#">34</a></li>
                                <li class="icon-time"><a href="#">2013-8-7</a></li>
                            </ul>
                        </div>
                    </li>        
                    
                    
                </ul>
            
                <aside>
                    <div class="tuijian">
                     <h2>推荐文章</h2>
                    <ol>
                      <li><span><strong>1</strong></span><a href="/">有一种思念,是淡淡的幸福,一个心情一行文字</a></li>
                      <li><span><strong>2</strong></span><a href="/">励志人生-要做一个潇洒的女人</a></li>
                      <li><span><strong>3</strong></span><a href="/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li>
                      <li><span><strong>4</strong></span><a href="/">Green绿色小清新的夏天-个人博客模板</a></li>
                      <li><span><strong>5</strong></span><a href="/">女生清新个人博客网站模板</a></li>
                      <li><span><strong>6</strong></span><a href="/">Wedding-婚礼主题、情人节网站模板</a></li>
                      <li><span><strong>7</strong></span><a href="/">Column 三栏布局 个人网站模板</a></li>
                      <li><span><strong>8</strong></span><a href="/">时间煮雨-个人网站模板</a></li>
                      <li><span><strong>9</strong></span><a href="/">花气袭人是酒香—个人网站模板</a></li>
                    </ol>
                </div>
                
                    <div class="topic">
                        <h2>图文并茂</h2>
                        <ul class="ul-topic">
                            <li>
                                <a href="#">            
                                    <img src="images/k01.jpg"/>
                                    <p>腐女不可怕,就害怕腐女会画画!</p>
                                    <p class="added">伤不起</p>
                                </a>
                            </li>
                            <li>
                                <a href="/">
                                    <img src="images/k01.jpg">
                                    <p>问前任,你还爱我吗?无限戳中泪点~</p>
                                    <p class="added">感兴趣</p>
                                    </a>
                                </li>
                            <li>
                                <a href="/">
                                    <img src="images/k01.jpg">
                                    <p>世上所谓幸福,就是一个笨蛋遇到一个傻瓜。</p>
                                    <p class="added">喜欢</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="clicks">
                        <h2>热门点击</h2>
                        <ol>
                          <li><span><a href="/">慢生活</336666></span><a href="/">有一种思念,是淡淡的幸福,一个心情一行文字</a></li>
                          <li><span><a href="/">爱情美文</a></span><a href="/">励志人生-要做一个潇洒的女人</a></li>
                          <li><span><a href="/">慢生活</a></span><a href="/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li>
                          <li><span><a href="/">博客模板</a></span><a href="/">Green绿色小清新的夏天-个人博客模板</a></li>
                          <li><span><a href="/">女生个人博客</a></span><a href="/">女生清新个人博客网站模板</a></li>
                          <li><span><a href="/">Wedding</a></span><a href="/">Wedding-婚礼主题、情人节网站模板</a></li>
                          <li><span><a href="/">三栏布局</a></span><a href="/">Column 三栏布局 个人网站模板</a></li>
                          <li><span><a href="/">个人网站模板</a></span><a href="/">时间煮雨-个人网站模板</a></li>
                          <li><span><a href="/">古典风格</a></span><a href="/">花气袭人是酒香—个人网站模板</a></li>
                        </ol>
                    </div>
                    
                    <div class="search">
                        <form class="search-form" method="post" action="#">
                            <input type="text" value="Search" onfocus="this.value=''" onblur="this.value='Search'"/>
                        </form>
                    </div>
                    
                    <div class="video">
                        <img src="images/artwork.png"/>
                        <p>南方姑娘</p>
                        <p>歌手:赵磊</p>
                        <p>所属专辑《赵小磊》</p>
                        <p><a href="#">喜欢</a></p>
                        <p class="video-player">
                            <audio src="#" controls></audio>
                        </p>
                        </div>
                        
                    </div>
                
                </aside>
            
            </div>
            
        </div>    
        <footer>
            <div class="footer-content">
                <div class="links"> 
                    <h2>友情链接</h2>
                      <ul>
                        <li><a href="/">杨青个人博客</a></li>
                        <li><a href="http://www.3dst.com">3DST技术服务中心</a></li>
                      </ul>                
                </div>
                
                <div class="comments">
                     <h2>最新评论</h2>
                      <dl>
                        <dt><img src="images/s8.jpg">
                        </dt>
                        <dd>DanceSmile
                          <time>49分钟前</time>
                        </dd>
                        <dd>在 <a href="http://www.yangqq.com/jstt/bj/2013-07-28/530.html" class="title">如果要学习web前端开发,需要学习什么? </a>中评论:</dd>
                        <dd>文章非常详细,我很喜欢.前端的工程师很少,我记得几年前yahoo花高薪招聘前端也招不到</dd>
                      </dl>
                      <dl>
                        <dt><img src="images/s8.jpg">
                        </dt>
                        <dd>yisa
                          <time>2小时前</time>
                        </dd>
                        <dd>在 <a href="http://www.yangqq.com/news/s/2013-07-31/533.html" class="title">芭蕾女孩的心事儿</a>中评论:</dd>
                        <dd>我手机里面也有这样一个号码存在</dd>
                      </dl>
                      <dl>
                        <dt><img src="images/s8.jpg">
                        </dt>
                        <dd>小林博客
                          <time>8月7日</time>
                        </dd>
                        <dd>在 <a href="http://www.yangqq.com/jstt/bj/2013-06-18/285.html" class="title">如果个人博客网站再没有价值,你还会坚持吗? </a>中评论:</dd>
                        <dd>博客色彩丰富,很是好看</dd>
                      </dl>
                </div>
                <div class="photos">
                 <h2>摄影作品</h2>
                  <ul>
                    <li><a href="/"><img src="images/01.jpg"></a></li>
                    <li><a href="/"><img src="images/01.jpg"></a></li>
                    <li><a href="/"><img src="images/01.jpg"></a></li>
                    <li><a href="/"><img src="images/01.jpg"></a></li>
                    <li><a href="/"><img src="images/01.jpg"></a></li>
                    <li><a href="/"><img src="images/01.jpg"></a></li>
                    <li><a href="/"><img src="images/01.jpg"></a></li>
                    <li><a href="/"><img src="images/01.jpg"></a></li>
                    <li><a href="/"><img src="images/01.jpg"></a></li>
                  </ul>
                </div>
                
            </div>
            
            <div class="footer-bottom">
            <p>Copyright 2013 Design by <a href="#">DanceSmile</a></p>
            </div>
        </footer>
        <script src="js/jquery-2.1.4.min.js"></script>
    </body>
    博客布局html代码

    三、布局的css代码

    /*Css Document*/
    
    * {
    margin:0;
    padding:0;
    }
    
    *,*:before,*:after{
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; /* Safari */
    } 
    body{
        font:12px "宋体";
        background-color:#333;
        color:#3F3E3C;
        line-height:1.5;    
    }
    img{
        border:0;
        vertical-align:middle;
    }
    h1,h2,h3,h4,h5,h6{
        font-weight:normal;
    }
    h1{
        font:24px "微软雅黑";    
    }
    p{
        word-wrap:break-word;
    }
    ul,ol{
        list-style:none;
        margin:0;
        padding:0;
    }
    dl,dt,dd{
        margin:0;
        padding:0;
    }
    a{
        color:#a6a6a6;
        text-decoration:none;
        transition:all 1s ease;
    }
    a:hover{
        color:#fff;
    }
    .clear:after{
       content:"";
      display:table;
      clear:both;       
    }
    
    .clear{
       zoom:1;  
    }
    /*用来清除浮动*/
    .blank {
         height: 5px; 
         overflow: hidden; 
          100%; 
         margin: auto;
         clear: both 
     }
     /*nav导航*/
     header{
        margin-top:30px;
        100%;
        background-color:#222;
        height:70px;
        line-height:70px;
        border-bottom:1px solid #464647;
     }
     
     nav>ul{
        1000px;
        margin:0 auto; 
        /*保证各个菜单处于居中状态*/
        text-align:center;
     }
     nav>ul li{
        display:inline-block;
        
     }
     nav>ul li>a{
        color:#e7e7e7;
        display:block;
        padding:0 20px;
        /*使用这个来控制高度,就可以不用使用padding-top*/
        line-height:40px;
        font-size:12px;     
     } 
     nav>ul li>a:hover,
     nav>ul li.active>a{
        color:#fff;
        border-radius:6px;
        background-color:rgba(20,20,20,0.8); 
        box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
     }
     .main-body{
        100%;
        overflow:hidden;
        border-top:1px solid #000;
     }
     /*第一部分的图片和名片*/
     
     .banner{
        1000px;
        margin:30px auto;
        overflow:hidden;
        margin-top:30px;
        position:relative;     
     }
     /*图片部分*/
     .banner figure{    
        630px; 
        height:250px; 
        position:relative;  
        float:left; 
        margin:0; 
        position:relative;
        -webkit-animation:pageTop 6s ease backwards;
     }
     .banner figure>figcaption{
        position:absolute;
        top:20%;
        left:0;
        right:0;
        bottom:20%; 
        color:white;
        background-color:rgba(153,153,153,.8);     
        padding:20px;
        opacity:0;
        transition:all 1s ease;
     }
      .banner figure>figcaption>h4{
        font-weight:bold;
      }
      .banner figure:hover>figcaption{
        opacity:1;
      }
     /*名片部分*/
     .mingpian{
        background-color:#222;
        box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
        border-radius:6px;
        350px;
        float:right;
        height:248px;
        overflow:hidden;
     }
     
     .mingpian h2{
        margin-left:10px;
        margin-top:15px;
        margin-bottom:15px;
        font-size:2.1em;
        font-weight:bold;    
     }
     .mingpian p{
        color:#89919a;
        line-height:2.1;
        margin-left:45px;
        -webkit-animation:blink 3s ease backwards;     
     }
     .mingpian ul.social-link{
     
        text-align:center;
        margin:15px 0 0 15px;
     }
      .mingpian ul.social-link li{
        display:inline-block;
        margin-right:5px;
      }
     .mingpian ul.social-link li a{
        display:block;
        border-radius:59%;
        background-color:pink;
        50px; 
        height:50px;
        box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
     }
     /*博客区域*/
     .main-content{
        1000px;
        margin:40px auto;
     }
     .ul-blogs{
        666px;
        float:left;
        position:relative;
         
     }
     
     .ul-blogs:before{
        2px;
        content:"";
        position:absolute;
        top:0;
        bottom:0;
        right:0;
        background-color:#000;
        
     }
    .blog-wrapper{    
        margin-bottom:40px;
        position:relative;
        630px;     
        background-color:#222;
        border-radius:6px;
        box-shadow:0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7);
     }
     /*三角形*/
     .trigle{     
        position:absolute;
        right:0;
        margin-right:-20px;
        top:20px;
        border-style:solid;
        border-0 0 20px 22px;
        border-color:transparent transparent transparent #111;
     }
     /*圆形*/
    .circle{
        position:absolute;
        top:15px;
        right:0;
        margin-right:-40px;
        12px;
        height:12px;
        border:2px solid #333;
        border-radius:50%;
        background-color:#111;
    }
    .circle:hover{
        border:2px solid #B9B9B9;
    }
    li.blog-item h4{
        padding:0 0 0 20px;
        font-size:16px;
        font-family:"微软雅黑";     
        line-height:40px;
        height:40px;
    }
    li.blog-item h4>a:hover{
        padding-left:20px;
    }
     
    .blog-item .item-main{
        padding:10px 20px 60px 20px;
    }
    .item-main img{  
        150px;
        height:120px;
        transition:all 1s ease;
    }
    .item-main img:hover{
        opacity:0.6;
    }
    .item-main .img-wrapper{
        float:left;
    }
    .item-main p{
        padding-left:170px;
        color:#a6a6a6;
        font-size:12px;
        line-height:28px;
    }
    ul.blog-footer{
        clear:both;
        background-color:#000;
        overflow:hidden; 
        border-bottom-left-radius:6px;
        border-bottom-right-radius:6px;
    }
    ul.blog-footer li{
        display:inline-block;
        
     
    }
    ul.blog-footer li>a{
        display:block;
        height:20px;
        line-height:20px;
        padding:0 10px;     
    
        
    }
    ul.blog-footer li:first-child{
        float:right;
    }
    ul.blog-footer li:second-child{
        float:right;
    }
    /*侧边栏部分*/
    aside{
        310px;
        float:right;
    }
    aside h2, footer h2 { 
        font-size: 16px; 
        margin-bottom: 10px; 
        text-shadow: #000 1px 1px 1px; 
        color: #ccc
    }
    aside>div{
        box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); 
        border-radius: 6px; 
        padding: 15px; 
        background: #222; 
        margin-bottom: 20px; 
        overflow: hidden;
    }
    .tuijian li{
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;    
    }
    .tuijian li span:before{
        content:"0";
    }
    .tuijian li span{
        margin-right:10px;
        font-size:14px;
        font-family:"微软雅黑";
    }
     
    .tuijian li:nth-child(-n+3) span{
        39px;
        color:#999;
    
    }
    .tuijian li:nth-child(-n+3) strong{
        font-size:24px;
        font-weight:normal;
    }
    .tuijian li:first-child span{
        color:#f8490b;
    }
    .tuijian li:nth-child(n+3){
        line-height:24px;
    }
    .tuijian li:nth-child(4){
        margin-top:5px;
    }
    .tuijian li a:hover{
        padding-left:20px;
    }
    /*图文并茂*/
    .ul-topic>li>a{
        display:block;
    }
    .ul-topic>li{
        overflow:hidden;
        margin-bottom:15px;
    }
    .ul-topic>li:last-child{
        margin-bottom:0;
    }
    .ul-topic{
        overflow:hidden;
    }
    .topic img{
        float:left;
    }
    .topic p{
        padding-left:93px;
        
    }
    
    .topic p.added{
        color:#B5783E;
        margin-top:10px;
    }
    /*热门点击*/
    .clicks span:before{
        content:"";
        margin-right:5px;
    }
    .clicks span:after{
        content:"";
        margin-left:5px;
    }
    .clicks span{
        color:#3F3E3C;
    }
    .clicks span a{
        color:#336666;
    }
    .clicks  a:hover{
        text-decoration:underline;
    }
     
    .clicks li{
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
        line-height:24px;
    }
    
    /*搜索框*/
    .search {
        text-align:center;
        padding:25px 30px;
    }
    .search input{
        display:block;
        background-color:#191919;
        line-height:26px;
        color:#a6a6a6;
        border:1px solid #111;
        100%;
    }
    /*音频播放*/
    .video img{
        95px;
        height:90px;
        float:left;
    }
    .video p:not(:last-child){
        padding-left:115px;
        line-height:24px;
        color:#B9B9B9;
    }
    .video .video-player{
        overflow:hidden;
        100%;
    }
    .video audio{
        margin-top:20px;
        100%;
    }
    .video a{
        color:B5783E;
    }
    .video a:hover{
        text-decoration:underline;
    }
    
    /*页脚部分*/
    footer{
        margin-top:10px;
        background-color:#1D1D1D;
        overflow:hidden;
     
    }
    footer .footer-content{
        1000px;
        margin:0 auto;
        overflow:hidden;
        padding:15px;
    }
    footer .links{
        200px;
        overflow:hidden;
         
        float:left;
        line-height:25px;
        
    }
    footer .comments{
        410px;
        float:left;
    }
    footer .comments dl>dt{     
        float:left;
    }
    footer .comments dl{
        overflow:hidden;
        clear:left;
        margin-bottom:15px;
    }
    footer .comments dl>dt>img{
        70px;
        height:70px; 
    }
    
    footer .comments dl>dd{
        padding-left:10px;
        line-height:2;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
        
    }
    footer .comments time{
        color:#006666;
    } 
    footer .comments dl>dd:last-child{
        color:#6A9150;
    }
    
    footer .photos{
        250px;
        text-align:center;     
        float:right;
    }
    footer .photos>ul>li{
        display:inline-block;
        margin-right:3px;
        margin-bottom:10px;
     
    }
     
    footer .photos img{
        70px;
        height:70px;
    }
    .footer-bottom{
        clear:both;
        background-color:#000;
    }
    footer .footer-bottom p{
        1000px;
        margin:0 auto;
        padding:10px 5px;
    }
    
    
    
     
     
    博客布局css代码

    四、相关动画的css定义

    /*图片向上翻转的动画效果*/
     @-webkit-keyframes pageTop { 0% {
    opacity: 0;
    -webkit-transform: perspective(400px) rotateX(90deg);
    }
     100% {
    opacity: 1;
    -webkit-transform: perspective(400px) rotateX(0deg);
    }
    }
    
    /*文字的闪烁效果*/
    @-webkit-keyframes blink{
        0%{
            opacity:0;
        }40%{
            opacity:.3;
        }50%{
            opacity:.8;
        }55%{
            opacity:.3;
        }60%{
            opacity:.8;
        }100%{
            opacity:0;
        }
    }
    博客布局动画定义

    五、该案例知识点总结

     1,导航条的实现(line-height取代padding-top,padding-bottom)

     2,图像的翻转动画

     3,文字的闪烁动画

     4,带箭头和圆点的div的实现(箭头可以是完整的三角,半三角;利用和背景相同的border实现圆角周围的间隙效果);

     5,ul:before实现一条竖线

    6,hover时候改变padding,opacity等实现动画效果

    7,长文本的单行文字效果

    8,特殊选择器的使用,nth-child(-n+3)

    9,audio组件的使用

    10,dl,dt,dd组件的使用

  • 相关阅读:
    【LeetCode】147. Insertion Sort List
    【LeetCode】64. Minimum Path Sum
    【LeetCode】7. Reverse Integer
    【LeetCode】107. Binary Tree Level Order Traversal II (2 solutions)
    【LeetCode】114. Distinct Subsequences
    【LeetCode】35. Search Insert Position (2 solutions)
    为什么easyui的datagrid里getSelections还有getChecked只能获取一行值呢?
    IE兼容模式下 SCRIPT1028: 缺少标识符、字符串或数字
    修改easyui的easyloader的默认css目录路径
    如何在Visual Studio的查找功能中使用正则表达式?
  • 原文地址:https://www.cnblogs.com/bobodeboke/p/4597243.html
Copyright © 2020-2023  润新知