项目3-1图书清单

最新推荐文章于 2022-04-03 10:08:51 发布
最新推荐文章于 2022-04-03 10:08:51 发布
阅读量556 收藏 1
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46444569/article/details/105291896
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书城</title>
    <link href="css/bookstore.css" type="text/css" rel="stylesheet">
</head>
<body>
  <header><img src="images/tou.png"  alt=""></header>
    <div class="items">
        <div class="item"><div class="p">热销教材</div></div>
        <div class="item">
            <div class="pic">
                <img src="images/1.png" alt="">
            </div>
            <div class="desc">
             <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
             </div>
            </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/3.png" alt="">
            </div>
            <div class="desc">
                <div class="detail"><i>￥36.00</i>[已售7件]
                    <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
                </div>
              </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/4.png" alt="">
            </div>
            <div class="desc"> <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
            </div>
              </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/5.png" alt="">
            </div>
            <div class="desc"> <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
            </div>
            </div>
        </div>
    </div>
     <div class="items">
        <div class="item"><div class="p">精品套系</div></div>
        <div class="item">
            <div class="pic">
                <img src="images/6.png" alt="">
            </div>
            <div class="desc"> <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="" src="images/qq.gif"></a>
            </div>
               </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/7.png" alt="">
            </div>
            <div class="desc"> <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="" src="images/qq.gif"></a>
            </div>
            </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/8.png" alt="">
            </div>
            <div class="desc">
                <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/9.png" alt="">
            </div>
            <div class="desc"> <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
            </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

body {
    margin: 0;
    padding: 0;
    background-color: #F7F7F7;
}
header,.items{
    margin-bottom: 20px;
    width: 1250px;
    height: 400px;
    padding-left: 20px;
    margin: 10px auto;
}
.items {
    height: 320px;
}
.p {
    background-color: #2A809D;
    height: 320px;
    background-image: linear-gradient(
            to bottom,
            #4b6db9 20%,
            #b2d3ff 80%
    );/*设置该元素背景自上而下的线性渐变*/
    font-family: 'Microsoft Yahei';/*设置字体为微软雅黑*/
    font-size:30px;
    font-weight:bold;
    color:#fff;
    padding-top:40px;
    line-height:30px;/*文本行高为30px*/
}
.item {
    width: 230px;
    height: 300px;
    text-align: center;/*文字水平居中*/
    margin-right: 20px;
    background-color: #FFF;
    float: left;
    position: relative;
    top: 0;
    overflow: hidden;
    transition: all .5s;/*Css3新增动画属性：过渡，all(默认值)指所有属性改变，整个转换过程在0.5s内完成。*/
    box-shadow:  #41a8ff 0px 5px 5px ;/*盒阴影：向下偏移5px模糊值5px颜色为#41a8ff*/
}
.pic {
    margin-top: -15px;
    margin-left: -35px;

}
.desc {
    position: absolute;/*绝对定位*/
    bottom: -100px;
    width: 100%;/*宽度是父元素宽度的100%*/
    height: 100px;
    background-color: #58A6F0;
    transition: all .5s;
    background-color: rgba(88,166,240,0.8);

}
/*当鼠标悬停在该元素时，该元素绝对定位在父元素顶部-5px的位置，并且盒阴影为模糊度15px的#AAA色*/
.item:hover {
    top: -5px;
    box-shadow: 0 0 15px #AAA;
}
/*当鼠标悬停在类名为item的元素上时，该元素的类名为.desc的子元素绝对定位，其底部与父元素底部对齐*/
.item:hover .desc {
    bottom: 0;
}
.detail{
    font-weight: bold;
    font-size: 20px;
   margin-top: 50px;
}
.detail i{color: red;}

在这里插入图片描述

全栈的魅力
关注
图书详细清单
05-20
各种图书的收集 分类 可以直接用数据库的软件打开
互评-Team3-软件测试计划书-问题清单1
08-08
"互评-Team3-软件测试计划书-问题清单1"这个标题指出了一次团队间的评审活动，可能是在项目开发过程中进行的一次质量检查，旨在识别并解决测试计划中的问题。 描述中提到的"图书查询借阅管理系统"是一个具体的软件...
图书列表清单
Talk is cheap，show me the code.
02-25 1705
阅读清单 2018-12-08 第一批次 Java编程思想 第4版 Head First 设计模式 深入理解Java虚拟机 JVM高级特性与最佳实践 Effective Java英文版 第三版 重构 改善既有代码的设计 Docker技术入门与实战 Hadoop权威指南第四版 Hive编程指南 Spark快速大数据分析   2019-01-24 第二批次 Effect...
书籍清单
li_super的博客
11-08 505
Linux/操作系统 《Linux核心命令速查》 《Windows核心编程》 《Linux企业运维实战》 前端 《Vue.js 前端开发》 《锋利的Jquery》 面试系列 《程序员面试笔试宝典》 《Java程序员面试笔试宝典》 《Java算法宝典》 《Oracle数据库面试宝典》 《数据库管理员面试笔试宝典》 《前端程序员面试笔试宝典》 Java 《Java编程思想》 《Java8》 《J...
书籍阅读清单
折跃的博客
08-28 315
列出一些不错的书籍清单以备阅读 1.《欢乐的经济学》- 戴维·亨德森 2.《1984》- 乔治·奥威尔 3.《定位》- 艾·里斯 / 杰克·特劳特 4.《设计心理学》- 唐纳德·A·诺曼 5.《策略思维》- 阿维纳什·K·迪克西特 / 巴里·J·奈尔伯夫 6.《如何阅读一本书》- 莫提默·J· 艾德勒 / 查尔斯·范多伦...
你不得不读的书籍清单
Ezrealmore
03-01 2199
http://blog.csdn.net/qing_gee/article/details/49306323 你不得不读的书籍清单，岁月如梭，转眼间2015年将要过去，本篇博文也就将告一段落！毕竟年复一年的累加下去，本篇文章可能会导致加载失败（笑，自嘲），约吗？让我们来年再战！ 我承认，无论什么行业的书都琳琅满目，如果你要想在芸芸众书中找出一本对研发技术有所提高、对问题有所
互评-Team3-软件需求规格说明书-问题清单1
08-08
在这个名为“互评-Team3-软件需求规格说明书-问题清单1”的文件中，团队成员针对“图书查询借阅管理系统”的需求规格说明书提出了若干问题，旨在提高文档的质量和系统的可实施性。 首先，问题1指出在3.3-3.5部分应...
互评-Team3-软件开发计划-问题清单1
08-08
软件问题清单项目名称图书查询借阅管理系统文档名称图书查询借阅管理系统软件开发计划文档版本号2.1.0提交日期2016.11.7编制人修闽珂评审日期2016.12
互评-team3-软件设计说明-问题清单1
08-08
软件问题清单项目名称图书查询借阅管理系统文档名称图书查询借阅管理系统设计说明文档版本号1.0提交日期2016.11.30编制人吴宁评审日期2016.12.7评审
book-reading-list:图书阅读清单库里程碑项目。 SQLite flask应用程序
05-04
该项目面向喜欢阅读书籍并制作其希望阅读或阅读过的书籍清单或其他自定义阅读清单的用户。 该网站使用Flask后端框架和Bootstrap前端以及用于存储数据的关系数据库和用于处理数据的python构建。 用户体验 访问该页面...
图书清单
02-20
图书清单
2018年阅读书籍清单
与优秀的人在一起，会使自己变得更优秀
06-08 1411
2018年阅读书籍清单 _** 深入分布式缓存** _** Scala编程** _**Kafka技术内幕：图文详解Kafka源码设计与实现** _**HIVE编程指南** &amp;lt;&amp;lt;未完&amp;gt;&amp;gt;
经典图书清单
思维的自由
09-29 580
一、学习方法类 1、《How to Become a Straight-A Student: The Unconventional Strategies Real College Students Use to Score High While Studying Less》 目前只有英文版，Amazon上有kindle电子版。
个人所看书籍清单
weixiaotianshismile的博客
12-26 707
个人书库本书库用于显示个人已经看过的书籍Android相关 Android编程权威指南 第一行代码 Android Android疯狂讲义 java相关 java核心技术 卷I java核心技术 卷II java编程思想 java多线程核心编程技术 深入理解java虚拟机 数据结构与算法分析java语言描述 Effective Java 中文版 第2版 Python相关1.Python基础教程 第2
web前端设计图书清单
a1255468的博客
04-03 1420
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书清单</title> <link href="../css/part4.css" rel="stylesheet"> </head> <body> <header><img src="../图片/tou.png".
AI书籍清单
u014765410的博客
05-10 173
ML/DL类书籍： 统计学习方法 模式分类 机器学习实战 21个项目玩转深度学习 Feature Engineering for Machine Learning Python for Data Analysis 机器学习 数理统计类书籍： Practical Statistics for Data Scientists 生物统计方学 概率论与数理统计 编程类书籍： python基础教程 C程序...
记开发个人图书收藏清单小程序开发（九）Web开发——新增图书信息
weixin_30718391的博客
06-25 112
书房信息初始化已完成，现在开始处理图书信息新增功能。 主要是实现之前New Razor Pages的后台部分。 新增需要保存的Model：Book.InitSpec.cs /Models/Book.InitSpec.cs 1 using System.Collections.Generic; 2 3 namespace PTager.BL 4 { 5 pub...
HTML练习---当当网最新上架图书列表页面
热门推荐
gengzhi1293443962的博客
10-19 1万+
无标题文档 .a { font-size: 14px; font-weight: bolder; color: #C60; background-color: #CCC; text-indent: 2em; padding:7px; } dd{float:left;} .b h1 { font-size:14px; color:#640000; padding-left:15px
程序员必读：全球程序员推荐的经典书籍清单
1. 《代码大全》 - 作者史蒂夫·迈克康奈尔，被誉为编程实践的百科全书。这本书强调个人技术，特别是代码组织和编写规范，提倡编写出整洁易读的代码。尽管对于初学者来说，书中的许多观点可能较为高级，但它确实为有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值