55-003-1 HTML5实现文字标题列表显示--鼠标经过时文字动态阴影展示

通过55-002-1项目picList.htm的拷贝并只修改图片列表代码信息而生成文件list.htm；

 <article >

        <section class="titleList">

            <ul>

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                <li><a href="">内容的文章标题，内容的文章标题</a><time datetime="2014-09-01">2014-09-01</time></li>                

                </ul>

        </section>

    </article>

2. 定义一个样式文件title-list.css并且把它导入到list.htm文件中

 /*正内容的文章标题列表的样式*/

.titleList li a{    /*设置标题文字与发布日期之间的间隔*/

    display: inline-block;

    width: 510px ;

    text-decoration: none ;

    color: #444 ;

}

.titleList li time{

    color: #444;

    display: inline-block;

    vertical-align: top ;

    text-align: center ;

}    

初步效果图：

 

3. 增加文章标题列表的其他样式，并增加鼠标移动时文字动态展示的效果，修改title_list.css文件

/*让文字标题列表每隔5个显示一条横向的下划线*/

.titleList li:nth-child(5n+5){

    border-bottom: solid 1px rgba(68, 68, 68, 0.13);

    padding-bottom: 15px;

}

/*取消文字标题列表的最后一条横向下划线*/

.titleList li:last-child{

    border-bottom:0;

}

/*鼠标移动时文字动态展示的效果--背景阴影的效果*/

.titleList li{  /*文字阴影的动态变换时间*/

    -webkit-transition:text-shadow 0.5s linear;

    -o-transition:text-shadow 0.5s linear;

    -moz-transition:text-shadow 0.5s linear;

    -ms-transition:text-shadow 0.5s linear;

    transition:text-shadow 0.5s linear;

}

.titleList li:hover{    /*文字阴影显示*/

    text-shadow:1px 2px 4px #000;

}

    效果图：

 

图文版：http://note.youdao.com/yws/public/redirect/share?id=3fe9ef4b3cc32f5c4bb39930ef28c97e&type=false

资源文件下载：https://yunpan.cn/OcPaT6vYuDDfjN  访问密码 87c5