55-002-1 HTML5图片列表页面的制作 鼠标移动图片动态显示,文字动态阴影效果,渐变效果 列表前增加样式序列号
来源:互联网 发布:npm node sass 淘宝 编辑:程序博客网 时间:2024/05/17 23:26
定义<article>和<aside>两个节点元素
在文字下面画一条灰白底线,并调好底边距,通过样式设置依然是在h3元素下
建立一个图片的列表展示<ol>元素下面放入img元素
给图片的li元素里面加入一个标题链接
对此文字标题设置样式:
然后对鼠标移动到图片上时设置一个动画效果:
在图片列表的下方设置分页链接
然后设置样式
效果图:
<article>
</article>
<aside>
</aside>
在article元素中加入<header>节点并放入描述信息
<header><h3>您现在所在的位置:图片列表</h3></header>
专门建立一个关联此列表页的样式页面list.css
article header h3{
color: #444;
font-size: 18px ;
}
border-bottom: solid 1px #fff;
padding-bottom: 10px ;
<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><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 首先显示上半部分的点击排行展示;
3.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>
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
0 0
- 55-002-1 HTML5图片列表页面的制作 鼠标移动图片动态显示,文字动态阴影效果,渐变效果 列表前增加样式序列号
- 55-003-1 HTML5实现文字标题列表显示--鼠标经过时文字动态阴影展示
- 随鼠标移动的图片动态效果
- 动态图片渐变轮换效果
- 响应式图片列表鼠标经过放大效果样式代码
- 鼠标放上列表后显示图片和描述效果
- HTML5----图片或文字指定位子隐藏到显示动态效果
- CSS鼠标经过文字显示图片效果
- 动态显示网页图片效果
- 动态显示图片,并为hyperlink 做鼠标悬停效果
- SWT(JFace)体验之图片的动态渐变效果
- 鼠标移动到图片上显示阴影和图片上的文字
- 动态列表效果
- jQuery新闻列表动态显示效果
- HTML 图片鼠标悬停动态效果
- jQuery实现鼠标滑过图片时会缩小并动态显示信息的幻灯效果
- 鼠标经过图片变成文字的效果
- 鼠标放到图片上实现动态的效果
- TestNG – Timeout Test
- Connection 对象与Statement 对象
- MFC/Active X插件之视频,音乐
- WebSocket不同版本的三种握手方式以及一个Netty实现JAVA类
- android 开发ndk相关总结
- 55-002-1 HTML5图片列表页面的制作 鼠标移动图片动态显示,文字动态阴影效果,渐变效果 列表前增加样式序列号
- 【JavaScript】正则表达式删除代码注释
- 23 ThreadLocal
- LintCode: 三数之和
- L2-1. 紧急救援(dijkstra单源最短路径拓展应用)
- 佛祖保佑 永无bug
- Java 值传递和对象传递详解
- POJ 2184 Cow Exhibition
- GEEK编程练习— —最长连续序列