模仿主流网站

码云链接：https://gitee.com/yushunqiang/experiment_two.git

原网站：http://www.shuqi.com/

原网站截图：

 

模仿网站截图

代码;

<html>

<head>
<meta charset="UTF-8" />
<title>书旗网--（假）</title>
<style>
.div0 {
text-align: center;
height: 50px;
transition: all 0.5s;
}

.div0:hover {
transform: scale(1.4);
}

.div2 {
position: relative;
width: 100%;
height: 480px;
background: url('背景.jpg');
}
.div2 img:hover{
animation: aaa 1s linear ;
}
.div1 {
width: 65%;
margin: 10px auto;
overflow: hidden;
}
@keyframes aaa{
60% {transform: rotate(360deg) ;height: 96px;width: 72px}
80%{transform: skew(30deg,30deg)}
85%{transform: translateX(20px)}
90%{transform: translateY(20px)}
95%{transform: translateY(-20px)}
100%{transform: translateY(-20px)}
}
.div1 p {
font-weight: bolder;
font-size: 16px;
margin-right: 50px;
float: left;
}
 
a {
text-decoration: none;
color: black;
}

a:hover {
color: orangered;
}

.div2 img {
width: 48px;
height: 64px;
margin: 10px;
}
</style>
</head>

<body>
<div class="div0"><img src="logo.png" width="180" height="30"></div>
<div class="div1">
<p><a href="书库.html">首页</a></p>
<p><a href="书库.html">书库</a></p>
<p><a href="书库.html">排行榜</a></p>
<p><a href="书库.html">封神榜</a></p>
<p><a href="书库.html">版权推荐</a></p>
<p><a href="书库.html">二次元</a></p>
<p><a href="书库.html">作者福利</a></p>
<p><a href="书库.html">书架</a></p>
<p><a href="书库.html">作者专区</a></p>
</div>

<div class="div2">
<div style="position:absolute; bottom: 30px; left: 537px">
<img src="代号传奇.jpg">
<img src="龙渊.jpg">
<img src="圣祖.jpg">
<img src="唐朝好声音.jpg">
<img src="流光之城.jpg">
<img src="兽夫宠妻日常.jpg">
</div>

</div>
</body>

</html>
 
响应式布局：
.div1 {
width: 65%;
margin: 10px auto;
overflow: hidden;
 
动画：
.div0 {
text-align: center;
height: 50px;
transition: all 0.5s;
}

.div0:hover {
transform: scale(1.4);
}
 
.div2 img:hover{
animation: aaa 1s linear ;
}
 
@keyframes aaa{
60% {transform: rotate(360deg) ;height: 96px;width: 72px}
80%{transform: skew(30deg,30deg)}
85%{transform: translateX(20px)}
90%{transform: translateY(20px)}
95%{transform: translateY(-20px)}
100%{transform: translateY(-20px)}

 

posted @ 2019-03-28 21:02  余顺强  阅读(101)  评论(0)    收藏  举报