55-002-1 HTML5图片列表页面的制作 鼠标移动图片动态显示，文字动态阴影效果，渐变效果 列表前增加样式序列号

 定义<article>和<aside>两个节点元素

<article> </article> <aside> </aside>

    在article元素中加入<header>节点并放入描述信息 

<header><h3>您现在所在的位置：图片列表</h3></header>

    专门建立一个关联此列表页的样式页面list.css

article header h3{     color: #444;     font-size: 18px ; }

    在文字下面画一条灰白底线，并调好底边距，通过样式设置依然是在h3元素下

border-bottom: solid 1px #fff; padding-bottom: 10px ;

    建立一个图片的列表展示<ol>元素下面放入img元素

<ol>             <li><a href=""><img src="images/pic1.jpg"></a></li>                   <li><a href=""><img src="images/pic9.jpg"></a></li>  </ol>

    定义这些图片的排列样式，即设置其css文件

#body-wrapper li{     display: inline-block;    /*去掉li元素前面的前导符号*/     vertical-align: top ;     text-align: center; /*让其中的文字居中显示*/ } .picList li {     width:210px;     height: 150px ; } .picList li img{     width:210px;     height: 126px ; } .picList li:nth-child(3n+3){ /*在列表li元素中只设置满足某一条件的元素*/     margin-right: 0px ;     }

    给图片的li元素里面加入一个标题链接

<li><a href=""><img src="images/pic3.jpg"></a><a href="content">                 这是文字标题             </a></li>

    对此文字标题设置样式：

.picList li a{     text-decoration: none ; /*取消超链接下划线*/     color:#444;    /*文字颜色为灰色*/ }

    然后对鼠标移动到图片上时设置一个动画效果：

@-webkit-keyframes picList{  /*设置一个动画组效果*/     0%{         -webkit-transform:rotate(0deg)scale(1) ; /*图片开始旋转度数为0度*/         opacity: 0 ;     }     50%{    /*时间段到达百分五十*/         -webkit-transform:rotate(5deg) scale(5); /*图片旋转度数为60度*/         /*scale用来设置css样式图片放大功能*/         opacity: 1 ;  /*css样式的图片透明度的设置*/     } } .picList img:hover{     -webkit-animation-name:picList;    /*执行的动作*/     -webkit-animation-duration:3s;    /*执行的时间*/     -webkit-animation-timing-function:linear; }

    在图片列表的下方设置分页链接 

<section class="picList-nav">             <nav>                 <ul>                     <li><a href="list.htm">1</a></li>                     <li><a href="list.htm">2</a></li>                     <li><a href="list.htm">3</a></li>                     <li><a href="list.htm">下一页</a></li>                     <li><a href="list.htm">最后一页</a></li>                 </ul>             </nav>         </section>

    然后设置样式

.picList-nav li{     background-color: rgb(53,152,219);     padding: 2px 10px ; } .picList-nav{     margin: 40px ;     text-align: center ; /*居中显示*/ } .picList-nav li a{     color:white;     text-decoration:none; } .picList-nav li.active{  /*此为当前页面显示的链接样式*/     background-color:#444;  }

效果图：

    然后设置鼠标移动到分页上时改变其底部颜色：

.picList-nav li.active,li:hover{  /*此为当前页面或者鼠标移动到分页上时显示的链接样式*/     background-color:#444;  }

 当鼠标移动到分页链接<li>元素上时，实现一个渐变的效果，此时渐变的方式为背景颜色的改变

.picList-nav li{     background-color: rgb(53,152,219);     padding: 2px 10px ;     /*当鼠标移动到分页链接<li>元素上时，实现一个渐变的效果，此时渐变的方式为背景颜色*/     -o-transition:background-color 0.5s linear;       -webkit-transition:background-color 0.5s linear;     -moz-transition:background-color 0.5s linear;     -ms-transition:background-color 0.5s linear;     transition:background-color 0.5s linear; }

2. 然后实现页面有部分的展示
 2.1 首先显示上半部分的点击排行展示；

<aside style="width:325px"> <!-- 此样式使aside区域靠左上边排列 -->   <section id="topList-section">    <div class="topList">     <h3>热门文章排行榜</h3>    </div>    <ul>     <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>     <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>     <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>     <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>     <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>     <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>     <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>     <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>     <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>     <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>    </ul>   </section>   <section>   </section>  </aside>

 2.2 设置样式

/*页面侧部的样式*/ .topList h3{     color:#444; /*颜色为灰色*/     border-bottom:solid 1px gray;         padding-bottom: 10px; } #topClick{     margin-top: 25px ; } /*通过css样式设置每个li元素前面加上一个带方框的数字*/ section.topList-section li:before{     content: counter(listxh) ;       background: #3598db ;     padding:2px 5px;     color:#fff;     margin-right: 5px ; } /*鼠标移动连接文字上时，实现文字动态阴影效果显示*/ section.topList-section li{     counter-increment: listxh ;     display: inline-block;     width:100%;     vertical-align: center ;     overflow: hidden;      white-space: nowrap;     text-overflow:ellipsis;     margin-top: 8px ;     -webkit-transition:text-shadow 1s linear;     -o-transition:text-shadow 1s linear;     -ms-transition:text-shadow 1s linear;     -moz-transition:text-shadow 1s linear;     transition:text-shadow 1s linear; } section.topList-section li:hover{     text-shadow:1px 4px 4px #000; }

 2.3 效果图

3. 同理实现右下方的点击排行显示 ；

<section id="topClick" class="topList-section">             <div class="topList">                 <h3>文章点击排行榜</h3>             </div>             <ul>                 <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>                 <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>                 <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>                 <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>                 <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>                 <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>                 <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>                 <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>                 <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>                 <li><a href="content.htm">热门文章新闻标题，热门文章新闻标题</a></li>             </ul>         </section>

 3.1 样式可以直接引用上面的即可，效果图：

4. 整个页面的的效果图：

小结：
1. 在html5中如果要实现两个元素的同一水平显示，需要定义两个属性样式：display:inline-block,
    vertical-  align=top ;
2. 如果一个样式同时对应两个选择元素，则中间用逗号隔开 ；
3. 对于html5中各个浏览器兼容性版本对照：-o- 欧朋浏览器，-webkit- chrome浏览器，-ms- IE浏览器，-moz- fireFox浏览器
4. 在设置css样式的时候，其元素选择器一定要精切定位，不能写一个大概的比如li{}这样很容易混乱会和其他地方发生冲突 ；

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

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