简单书籍类网页代码制作

闲来无事利用所学知识做了个书籍类代码

话不多说！上效果图

鼠标放到书籍图片上还可以产生放大书籍内容的效果

效果：

搜索框还带浏览记录

效果：

话不多说！上代码！

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

简单书籍类网页代码制作相关推荐

JavaSE基础知识(五)--面向对象代码实现初步(实现一个简单的类类型代码)
Java SE 是什么,包括哪些内容(五)? 本文内容参考自Java8标准一.面向对象(代码实现): 首先,在这里我需要说明一个根本性的问题:实际上,面向对象编程包括了两部分,一个是你的编程思想,一 ...
html css制作五子棋,js实现带简单Ai的网页五子棋制作（UI篇）
前言: 最近学了html,css,js,想找个项目来练习一下,就做了一个简单的网页五子棋,主要用到了canvas画图,逻辑部分都是js来写的,很简单,在这里简单的记录一下开发流程. 创建棋盘: 用ca ...
网页注册页面html代码,网页代码
所谓的网页代码,就是指在网页制作过程中需要用到的一些特殊的"语言",设计人员通过对这些"语言"进行组织编排制作出网页,然后由浏览器对代码进行"翻译&q ...
HTML+CSS一个简单的电影网页制作作业，学生个人html静态网页制作成品代码, html电影速递网
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码...
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
美食主题网页设计学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板 dreamweaver简单个人网页制作
HTML5期末大作业--美食主题6页面带导航下拉菜单 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页设计源码HTML ...
HTML5+CSS期末大作业：运动体育网站设计主题——体育铅球(5页)带注册期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
HTML+CSS静态页面游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作
HTML5期末大作业:游戏网站设计--腾讯游戏(页)学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. ...
HTML网页设计期末课程大作业~旅游住宿酒店的HTML网页设计(14页) ~学生网页设计作业源码旅游网页代码学生网页设计与制作期末作业下载 DW旅游网页作业代码下载
旅游住宿酒店的HTML网页设计14页 ~ 学生网页设计与制作期末作业下载~ 大学生网页设计与制作成品下载 ~DW旅游网页作业代码下载临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...

简单书籍类网页代码制作

简单书籍类网页代码制作相关推荐

最新文章

热门文章