前端三大组成
html构建内容,css美化,js控制交互,jquery是一个常用js库。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="static/css/demo2.css"/>
</head>
<body>
<div class="pic">
<ul>
<li class="pic1">
<a href="javascript:;">
<div class="txt">
<p class="p1">作者:eric</p>
<p class="p2">我的个人拉萨之旅 | 故事之城</p>
</div>
</a>
</li>
<li class="pic2">
<a href="javascript:;">
<div class="txt">
<p class="p1">作者:eric</p>
<p class="p2">我的个人丽江之旅 | 艳遇之城</p>
</div>
</a>
</li>
<li class="pic3">
<a href="javascript:;">
<div class="txt">
<p class="p1">作者:eric</p>
<p class="p2">我的个人成都之旅 | 美食之城</p>
</div>
</a>
</li>
</ul>
</div>
<script src="static/lib/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="static/js/demo2.js"></script>
</body>
</html>
css:
*{
padding: 0px;
margin: 0px;
font-family: cursive;
list-style-type: none;
}
a
{
text-decoration: none;
}
.pic
{
width: 1100px;
height: 600px;
margin-top: 70px;
}
.pic ul li{
float: left;
width: 100px;
height: 429px;
}
.pic1
{
background-image: url("../imgs/01.jpg");
}
.pic2
{
background-image: url("../imgs/02.jpg");
}
.pic ul .pic3
{
background-image: url("../imgs/03.jpg");
width: 789px;
}
.txt
{
background-color: aliceblue;
background: rgba(0,0,0,0.5);
height: 429px;
width: 100px;
}
.txt p{
float: left;
color: white;
}
.txt .p1{
font-size: 12px;
width: 12px;
padding: 25px 25px 0px 20px;
}
.txt .p2{
font-size: 14px;
width: 14px;
padding: 25px 25px 0px 20px;
}
js:
$(function(){
$(".pic ul li").mouseover(function(){
$(this).stop(true).animate({width:"789px"},1000).siblings().stop(true).animate({width:"100px"},1000);
});
});
以上即可。