<style>
<!--
p
{text-indent:2em;
line-height:24px;
font-size:14px}
h1, img
{margin:0.6em 0}
h1
{font-size:16px;
line-height:22px}
-->
</style>
响应式布局的相册效果,效果如下图所示,或者看看
demo,记得调整浏览器宽度哟,或者直接
下载。
开始制作吧,先来html
<ul class="pic">
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
<li title="小猫小猫"><a href="#"><img src="images/cat.jpg" /></li>
</ul>
整体设置
*{
padding: 0;
margin:0;
}
.pic{
width:98%;
margin: 0 auto;
}
.pic:after{
clear:both;
}
列表项实现
calc()设置列表项宽度,实现宽度等分。
.pic li{
list-style: none;
overflow: hidden;
float: left;
width: 16.6666667%; /* Fallback */
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
position: relative;
z-index: 2;
}
:after伪对象选择器实现激活时的提示文本和背景。
.pic li:after{
content: attr(title);
display: table-cell;
width: 90%;
height: 94%;
text-align: center;
color: #fff;
font-size:30px;
background-color: rgba(71, 163, 218, 0.2);
opacity:0;
box-shadow: 1px 1px 2px rgba(255,255,255,.3);
position: absolute;
left: 5%;
top: 3%;
cursor: pointer;
z-index: 30;
-webkit-transform: scale(.2);
-moz-transform: scale(.2);
-ms-transform: scale(.2);
-o-transform: scale(.2);
transform: scale(.2);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.pic li:hover:after{
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
图像的设置。
.pic li a,
.pic li a img {
display: block;
width: 100%;
cursor: pointer;
}
.pic li img{
position: relative;
z-index: 4;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.pic li:hover img{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
响应式布局
通过CSS3 Media Query实现响应式Web设计
@media screen and (max-width: 1190px){
.pic li{
width: 20%; /* Fallback */
width: -webkit-calc(100% / 5);
width: calc(100% / 5);
}
}
@media screen and (max-width: 945px){
.pic li{
width: 25%; /* Fallback */
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
}
}
@media screen and (max-width: 660px){
.pic li{
width: 33.333%; /* Fallback */
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}
@media screen and (max-width: 400px){
.pic li{
width: 50%; /* Fallback */
width: -webkit-calc(100% / 2);
width: calc(100% / 2);
}
}
@media screen and (max-width: 300px){
.pic li{
width: 100%;
}
}
完工!主要学习响应式布局的实现和calc的应用。
-----------------------------------------------------------------------------
前端开发whqet,关注网页前端开发,分享网页相关资源。
-----------------------------------------------------------------------------
分享到:
相关推荐
CSS3响应式网格图片悬停特效是一款网格图片布局,鼠标悬停各种图文动画效果。
css3制作网格图片布局,鼠标悬停各种图文动画效果。适用于响应式网页图文布局特效。
非常不错的jQuery相册插件ZOOM,支持一组图片的相册查看,响应式布局,自适应手机端切换图片, 支持左右按钮查看图片,支持ESC取消大图查看,带加载动画效果,还是不错的jQuery插件特效, 推荐使用。
jQuery图文标题滚动轮播代码是一款jQuery基于swiper制作的响应式图文标题响应式布局,支持鼠标拖动图文轮播滚动效果代码。
8. **响应式设计**:界面采用响应式设计,兼容多种设备,如PC、平板和手机,确保用户在不同设备上都能获得良好体验。 9. **易于维护**:后端代码遵循MVC模式,结构清晰,便于后期维护和升级。 10. **扩展性强**:...
具有专辑中的多级导航功能,缩略图上可组合的悬停效果,自适应缩略图大小,多种布局,幻灯片显示,全屏,分页,图像延迟加载,主题,深层链接,可自定义,i18n和拉入Flickr或Picasa / Google + / Google照片相册等...
win8磁贴格子图片展示html5模板,多种风格模板,全套模板,DIV CSS布局,包含主页、作品集、博客、关于我们、联系等网站模板页面。
HTML5全屏图片左右滑动轮播代码是一款全屏响应式图片轮播布局,按钮控制图片水平滑动预览查看,图片支持鼠标悬停文字动画展示特效。
11.5 排版实例:电子相册 11.5.1 搭建框架 11.5.2 幻灯片模式 11.5.3 详细信息模式 11.6 div排版与传统的表格方式排版的分析 第12章 CSS+div美化与布局实战 12.1 框架搭建 12.2 实例一:蓝色...
全屏图片视差切换Anime.js插件是一款全屏响应式的图片元素布局,通过左右按钮控制图片视差旋转切换效果。
具有相册中的多级导航、缩略图上的组合悬停效果、响应式缩略图大小、多种布局、幻灯片、全屏、分页、图像延迟加载、主题、深层链接、可自定义、i18n 以及拉入 Flickr、Picasa 和 Google+ 相册其中。使用可以很简单...
商品图片悬停切换CSS3特效是一款响应式的商品图片布局,鼠标悬停两张滑动图片切换展示特效。
特点:纯净的导航界面(去繁求简)响应式设计的前端设计聚合式搜索框(一键切换百度,搜狗,360,必应搜索平台)用户可自行申请收录,由管理员后台审核文章管理发布功能每篇文章均有评论功能首页引用热门和推荐榜单...
用JAVA编写的指针式圆形电子钟,效果图如下所示,其实代码很简单,希望对你有帮助。 Message-Driven Bean EJB实例源代码 2个目标文件 摘要:Java源码,初学实例,EJB实例 Message-Driven Bean EJB实例源代码,演示...
用JAVA编写的指针式圆形电子钟,效果图如下所示,其实代码很简单,希望对你有帮助。 Message-Driven Bean EJB实例源代码 2个目标文件 摘要:Java源码,初学实例,EJB实例 Message-Driven Bean EJB实例源代码,...
用JAVA编写的指针式圆形电子钟,效果图如下所示,其实代码很简单,希望对你有帮助。 Message-Driven Bean EJB实例源代码 2个目标文件 摘要:Java源码,初学实例,EJB实例 Message-Driven Bean EJB实例源代码,...
用JAVA编写的指针式圆形电子钟,效果图如下所示,其实代码很简单,希望对你有帮助。 Message-Driven Bean EJB实例源代码 2个目标文件 摘要:Java源码,初学实例,EJB实例 Message-Driven Bean EJB实例源代码,...
Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟,效果图如下所示,其实代码很简单,希望对你有帮助。 Message-Driven Bean EJB实例源代码 2个目标文件 摘要:...
Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 用JAVA编写的指针式圆形电子钟,效果图如下所示,其实代码很简单,希望对你有帮助。 Message-Driven Bean EJB实例源代码 2个目标文件 摘要:...
用JAVA编写的指针式圆形电子钟,效果图如下所示,其实代码很简单,希望对你有帮助。 Message-Driven Bean EJB实例源代码 2个目标文件 摘要:Java源码,初学实例,EJB实例 Message-Driven Bean EJB实例源代码,演示...