简单书籍类网页代码制作

最新推荐文章于 2023-12-19 12:51:35 发布

浪浪小公子

最新推荐文章于 2023-12-19 12:51:35 发布

阅读量3.7k

点赞数 8

文章标签： html css

本文链接：https://blog.csdn.net/qq_54243299/article/details/122347514

版权

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

话不多说！上效果图

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

效果：

搜索框还带浏览记录

效果：

话不多说！上代码！

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