闲来无事利用所学知识做了个书籍类代码
话不多说!上效果图
鼠标放到书籍图片上还可以产生放大书籍内容的效果
效果:
搜索框还带浏览记录
效果:
话不多说!上代码!
html部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../书籍类网页模板/css/1.css">
<title></title>
</head>
<body>
<div class="nav">
<a href="#" class="active">首页</a>
<a href="#">热门书籍</a>
<a href="#">言情</a>
<a href="#">玄幻</a>
<a href="#">冒险</a>
<a href="#">爽文</a>
<a href="#">科幻</a>
<a href="#">都市</a>
<a href="#">悬疑</a>
<a href="#">恐怖</a>
<div class="search-container">
<form>
<input type="text" placeholder="关键字..." name="search">
<button type="submit">
<img src="../书籍类网页模板/img/ss.png" alt="">
</button>
</form>
</div>
</div>
<div class="body1">
<div class="container">
<div class="box">
<div class="imgbx">
<img src="../书籍类网页模板/img/斗罗大陆.jpg" alt="">
</div>
<div class="content">
<h3>斗罗大陆</h3>
<p>唐门外门弟子唐三,
因偷学内门绝学为唐门所不容,
跳崖明志时却发现没有死,
反而以另外一个身份来到了另一个世界,
一个属于武魂的世界,名叫斗罗大陆。
这里没有魔法,没有斗气,没有武术,却有神奇的武魂。
这里的每个人,在自己六岁的时候,都会在武魂殿中令武魂觉醒。
武魂有动物,有植物,有器物,武魂可以辅助人们的日常生活。
而其中一些特别出色的武魂却可以用来修炼并进行战斗,这个职业,是斗罗大陆上最为强大也是最荣耀的职业“魂师”。
小小的唐三在圣魂村开始了他的魂师修炼之路,
并萌生了振兴唐门的梦想。当唐门暗器来到斗罗大陆,
当唐三武魂觉醒,他能否在这片武魂的世界再铸唐门的辉煌?
</p>
</div>
</div>
<div class="box">
<div class="imgbx">
<img src="../书籍类网页模板/img/斗破苍穹.jpg" alt="">
</div>
<div class="content">
<h3>斗破苍穹</h3>
<p>这里是属于斗气的世界,没有花俏艳丽的魔法,
有的,仅仅是繁衍到巅峰的斗气!
想要知道异界的斗气在发展到巅峰之后是何种境地吗?
等级制度:斗者,斗师,大斗师,斗灵,斗王,斗皇,斗宗,斗尊,斗圣,斗帝。
</p>
</div>
</div>
<div class="box">
<div class="imgbx">
<img src="../书籍类网页模板/img/完美世界.jpg" alt="">
</div>
<div class="content">
<h3>完美世界</h3>
<p>一粒尘可填海,一根草斩尽日月星辰,
弹指间天翻地覆。
群雄并起,万族林立,诸圣争霸,乱天动地。
问苍茫大地,谁主沉浮?!一个少年从大荒中走出,一切从这里开始……
</p>
</div>
</div>
<div class="box">
<div class="imgbx">
<img src="../书籍类网页模板/img/武动乾坤.jpg" alt="">
</div>
<div class="content">
<h3>武动乾坤</h3>
<p>修炼一途,乃窃阴阳,夺造化,转涅槃,握生死,掌轮回。
武之极,破苍穹,动乾坤!
</p>
</div>
</div>
<div class="box">
<div class="imgbx">
<img src="../书籍类网页模板/img/神印王座.jpg" alt="">
</div>
<div class="content">
<h3>神印王座</h3>
<p>魔族强势,在人类即将被灭绝之时,六大圣殿崛起,
带领着人类守住最后的领土。一名少年,
为救母加入骑士圣殿,奇迹、诡计,不断在他身上上演。
在这人类六大圣殿与魔族七十二柱魔神相互倾轧的世界,
他能否登上象征着骑士最高荣耀的神印王座?
</p>
</div>
</div>
<div class="box">
<div class="imgbx">
<img src="../书籍类网页模板/img/-一人之下.jpg" alt="">
</div>
<div class="content">
<h3>一人之下</h3>
<p>他,在爷爷的教导下成为异人,从小修习天师府的金光咒和阳五雷,
是八奇技之一炁体源流的继承人。
随着爷爷尸体被盗,神秘少女冯宝宝的造访,少年张楚岚的平静校园生活被彻底颠覆。
急于解开爷爷和自身秘密的张楚岚和没有任何记忆“不死少女”冯宝宝开启了“异人”之旅……
</p>
</div>
</div>
<div class="box">
<div class="imgbx">
<img src="../书籍类网页模板/img/斗破苍穹之大主宰.jpg" alt="">
</div>
<div class="content">
<h3>斗破苍穹之大主宰</h3>
<p>斗气之上,灵气为王。
大千世界,主宰之路,
谁主沉浮。
</p>
</div>
</div>
<div class="box">
<div class="imgbx">
<img src="../书籍类网页模板/img/x龙时代.jpg" alt="">
</div>
<div class="content">
<h3>x龙时代</h3>
<p>普通地球人辛云,在一次意外中跌下楼梯,
却穿越到了一个异世界,在这个比地球大的多的世界里,
却拥有着和地球神话相似的设定。
在龙时代,每个人八岁时都可以拥有一条属于自己的龙。
辛云在这个世界打拼,最终到达了钻石十星的境地,
却因为沉迷女色而使自己失去成为最强者的机会,
在一次九大强者的力量碰撞下,竟然发生了一件不可思议
,或者说是奇迹的事情一一辛云又一次重生回到在龙时代的小时候!
这一次,他又将如何书写自己的人生呢?
</p>
</div>
</div>
<div class="box">
<div class="imgbx">
<img src="../书籍类网页模板/img/我的微信连三界.jpg" alt="">
</div>
<div class="content">
<h3>我的微信连三界</h3>
<p>本是普通大学生的林海,在微信更新后,被拉入了天庭的交易群,从此生活变得多姿多彩起来。
王母娘娘的面膜用完了?拿十个蟠桃来换,不讲价。
太上老君想抽软中华?十颗天地造化丹,概不赊账。
红孩儿想喝哇哈哈?三昧真火拿过来,赶紧的。
嫦娥想穿情趣内衣?哎呀,这个不好办,容我亲自过去一趟,丈量下尺寸再说。
秦广王想要辆新款跑车?等等,这怎么又连上地府了?生死簿拿来,把哥的名字划了先……
</p>
</div>
</div>
</div>
</div>
</body>
</html>
css部分:
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family: Arial;
}
.nav{
background: #548ce8;
overflow: hidden;
}
.nav a{
float: left;
display: block;
color: #fff;
text-align: center;
padding: 20px 16px;
text-decoration: none;
font-size: 15px;
width: 120px;
text-transform: uppercase;
font-weight: bold;
}
.nav a:hover{
background: orange;
color: #000;
}
.nav a.active{
background: #2f3540;
}
.search-container{
float: right;
}
input{
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
}
.search-container button{
float: right;
padding:0;
margin-top: 13px;
margin-right: 30px;
margin-left: 5px;
margin-bottom: 2px;
color: #fff;
border: none;
}
button img{
width: 30px;
}
.body1{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #003e46;
font-family: 'Poppins',sans-serif;
}
.container{
padding-top: 100px;
width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box{
position: relative;
width: 300px;
height: 400px;
background: #000;
box-shadow: 0 30px 30px rgb(0, 0,0,.5);
margin-bottom: 40px;
}
.box .imgbx{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box .imgbx img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s;
}
.box:hover .imgbx img{
opacity: 0;
}
.box .content{
position: absolute;
bottom: 20px;
left: 10%;
width: 80%;
height: 60px;
background: #fff;
transition: 0.5s;
overflow: hidden;
padding: 15px;
box-sizing: border-box;
}
.box:hover .content{
height: 100%;
width: 100%;
bottom: 0;
left: 0;
}
.box .content h3{
margin: 0;
padding: 0;
font-size: 20px;
}
.box .content p{
margin: 10px 0 0;
padding: 0;
opacity: 0;
line-height: 1.2em;
transition: 0.5s;
text-align: justify;
}
.box:hover .content p{
opacity: 1;
transition-delay: 0.5s;
}
有问题可以联系我
QQ:3410279629