博主还是一个学生如果内容上有不足还请各位大佬指正。
这是效果图
网页结构代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片列表</title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<!-- 图片列表 -->
<div class="pic">
<!--文字列表-->
<div class="text">
<ul class="picUl">
<li>
<a href="#">
<span class="textcolor">热门</span><span>影片</span>
</a>
</li>
<li class="position">
<a href="#">
<span>查看更多+</span>
</a>
</li>
</ul>
<!--文字下的线条-->
<div>
<img src="images/hovered.png" alt="" class="images_2">
<img src="images/hover.png" alt="" class="images_1">
</div>
<!--文字下的线条 end-->
</div>
<!--文字列表 end-->
<!--图片列表-->
<div class="Images_window">
<ul class="image">
<li class="image_special">
<a href="#">
<img src="images/topten.png" alt="">
<!-- ten block -->
<span>12:40</span>
<div class="ten">
<p>
十大经典电影
</p>
</div>
<!-- ten block end -->
</a>
</li>
<li class="image_up">
<a href="#">
<img src="images/wolverine.png" alt="">
<!-- Block -->
<span>12:40</span>
<div class="Block">
<p>
金刚狼
</p>
</div>
<!-- Block end -->
</a>
</li>
<li class="image_up">
<a href="#">
<img src="images/warcraft.png" alt="">
<!-- Block -->
<div class="Block">
<p>
魔兽
</p>
</div>
<!-- Block end -->
</a>
</li>
<li class="image_down">
<a href="#">
<img src="images/inception.png" alt="">
<!-- Block -->
<div class="Block">
<p>
盗梦空间
</p>
</div>
<!-- Block end -->
</a>
</li>
<li class="image_down">
<a href="#">
<img src="images/Killer47.png" alt="">
<!-- Block -->
<div class="Block">
<p>
杀手47
</p>
<span>
年代:2017
</span>
<span>
时长:1:50
</span>
</div>
<!-- Block end -->
</a>
</li>
</ul>
</div>
</div>
<!-- 图片列表 end -->
</body>
</html>
网页样式代码
公用样式public.css：
*{
margin: 0;
padding: 0;
}
body{
font-family: Arial, Verdana, "Microsoft yahei", "Pingfang SC", Simsun;
}
a{
text-decoration: none;
color: inherit;
}
ul,li,ol{
list-style: none;
}
.clears{
clear: both;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
网页具体使用样式app.css：
.pic{
width: 1016px;
height: 460px;
margin-left: auto;
margin-right: auto;
margin-top: 65px;
overflow: hidden;
}
.text{
position: relative;
width: 1016px;
height: 75px;
opacity: 0.5;
overflow: hidden;
}
.picUl li{
width: 120px;
height: 72px;
float: left;
overflow: hidden;
position: relative;
}
.picUl li a{
width: 120px;
line-height: 72px;
color:#666666;
font-size: 30px;
text-align: center;
display: block;
overflow: hidden;
transition:all 0.2s;
}
.picUl li a .textcolor{
color: #31a0fe;
}
.picUl .position{
float: right;
overflow: hidden;
position: relative;
}
.picUl .position a span{
position: absolute;
color: #afafaf;
font-size: 14px;
text-align: right;
top: 15px;
right: 0;
}
.pic .text .images_1{
width: 896px;
height: 1px;
margin-top: 1px;
margin-bottom: 1px;
overflow: hidden;
float: right;
}
.text .images_2{
position: absolute;
bottom: 0;
left: 0;
width: 120px;
height: 3px;
overflow: hidden;
margin-right: 0px;
}
.Images_window{
width: 1016px;
height: 350px;
margin-top: 30px;
overflow: hidden;
}
.Images_window .image .image_special{
width: 488px;
height: 350px;
float: left;
overflow: hidden;
z-index: 0;
}
.image .image_special a{
width: 488px;
height: 350px;
display: block;
position: relative;
}
.image .image_special .ten{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
background: rgba(12,7,11,0.6);
color: #fff;
padding-top: 24px;
font-size: 20px;
text-align: center;
transition:all 0.5s;
transform-origin: left bottom;
transform: translateY(280px);
z-index: 9999;
}
.image .image_special:hover .ten{
transform: translateY(0);
}
.image .image_up{
width: 228px;
height: 160px;
float: left;
overflow: hidden;
margin-left: 32px;
z-index: 0;
}
.image .image_up a{
width: 228px;
height: 160px;
display: block;
position: relative;
}
.image .image_up .Block{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
background: rgba(12,7,11,0.6);
color: #fff;
padding-top: 14px;
font-size: 20px;
text-align: center;
transition:all 0.5s;
transform-origin: left bottom;
transform: translateY(112px);
z-index: 9999;
}
.image .image_up:hover .Block{
transform: translateY(0);
}
.image .image_up:hover .Block p{
margin-top: 25px;
}
.image .image_up:hover .Block span{
font-size: 14px;
margin-top: 8px;
}
.image .image_up .Block span{
display: inline-block;
width: 100%;
transition: all 0.5s;
}
.image .image_up .Block p{
margin-bottom: 8px;
transition: all 0.5s;
}
.image .image_down{
width: 228px;
height: 160px;
margin-top: 32px;
float: left;
overflow: hidden;
margin-left: 32px;
z-index: 0;
}
.image .image_down a{
width: 228px;
height: 160px;
display: block;
position: relative;
}
.image .image_down .Block{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
background: rgba(12,7,11,0.6);
color: #fff;
padding-top: 14px;
font-size: 20px;
text-align: center;
transition:all 0.5s;
transform-origin: left bottom;
transform: translateY(112px);
z-index: 9999;
}
.image .image_down:hover .Block{
transform: translateY(0);
}
.image .image_down:hover .Block p{
margin-top: 25px;
}
.image .image_down:hover .Block span{
font-size: 14px;
margin-top: 8px;
}
.image .image_down .Block span{
display: inline-block;
width: 100%;
transition: all 0.5s;
}
.image .image_down .Block p{
margin-bottom: 8px;
transition: all 0.5s;
}
.image_special span{
position: absolute;
bottom: 20px;
right: 24px;
font-size: 25px;
color: #ffffff;
z-index: 1;
}
.image_up span{
position: absolute;
bottom: 24px;
right: 16px;
font-size: 25px;
color: #ffffff;
z-index: 1;
}
使用素材
我的样式代码中在效果图中最上面的那一行的内容处理不够到位，因为目前还没接触过JS加之学识有限还没有实现选中后文字和下方图形的变色(即使鼠标离开也保持变色后的状态) ，其中所涉及的内容大致为定位、列表、浮动等。
