web前端设计图书清单

最新推荐文章于 2023-03-23 22:52:03 发布
最新推荐文章于 2023-03-23 22:52:03 发布
阅读量1.3k 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1255468/article/details/123933369
版权 
<!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"  alt="" ></header>
<div class="items">
<div class="item">
    <div class="p">热销教材</div></div>
    <div class="item">
    <div class="pic">
        <img src="../图片/1.png" alt="未找到图片">
    </div>


    <div class="desc">
        <div class="price">
            <i>¥36.00</i>[已售555件]
   <a href=""><img border="0" src="../图片/qq.gif" title="请联系卖家"></a>
    </div>
</div>
</div>
    <div class="item">
        <div class="pic">
            <img src="../图片/3.png" alt="未找到图片">
        </div>


        <div class="desc">
            <div class="price">
                <i>¥35.00</i>[已售456件]
                <a href=""><img border="0" src="../图片/qq.gif" title="请联系卖家"></a>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="pic">
            <img src="../图片/6.png" alt="未找到图片">
        </div>


        <div class="desc">
            <div class="price">
                <i>¥39.00</i>[已售999件]
                <a href=""><img border="0" src="../图片/qq.gif" title="请联系卖家"></a>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="pic">
            <img src="../图片/1.png" alt="未找到图片">
        </div>


        <div class="desc">
            <div class="price">
                <i>¥36.00</i>[已售555件]
                <a href=""><img border="0" src="../图片/qq.gif" title="请联系卖家"></a>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="p">商品销售</div></div>
    <div class="item">
        <div class="pic">
            <img src="../图片/7.png" alt="未找到图片">
        </div>
        <div class="desc">
            <div class="price">
                <i>¥38.00</i>[已售666件]
                <a href=""><img border="0" src="../图片/qq.gif" title="请联系卖家"></a>
            </div>
        </div>
    </div>
</div>

<div class="item">
    <div class="pic">
        <img src="../图片/8.png" alt="未找到图片">
    </div>
    <div class="desc">
        <div class="price">
            <i>¥38.00</i>[已售777件]
            <a href=""><img border="0" src="../图片/qq.gif" title="请联系卖家"></a>
        </div>
    </div>
</div>
</div>

<div class="item">
    <div class="pic">
        <img src="../图片/9.png" alt="未找到图片">
    </div>
    <div class="desc">
        <div class="price">
            <i>¥38.00</i>[已售333件]
            <a href=""><img border="0" src="../图片/qq.gif" title="请联系卖家"></a>
        </div>
    </div>
</div>
</div>

<div class="item">
    <div class="pic">
        <img src="../图片/7.png" alt="未找到图片">
    </div>
    <div class="desc">
        <div class="price">
            <i>¥38.00</i>[已售666件]
            <a href=""><img border="0" src="../图片/qq.gif" title="请联系卖家"></a>
        </div>
    </div>
</div>
</div>

</div>


</body>
</html>

CSS:

body{margin:0;
padding:0;
background-color:#f7f7f7;}
.p{background-color:#2a809d;
height:320px;
background-image:linear-gradient(
to bottom,
#4b6db9 20%,
#b2d3ff 80%
);/*设置该元素的背景自上而下的线性渐变*/
font-family:'Microsoft JhengHei';
    font-size:30px;
    font-weight:bold;
    color:#ffffff;
    padding-top:30px;
    line-height:30px;/*文本的行高为30px*/
}
.items{height:320px;}
.item{width:230px;
height:300px;
text-align:center;
margin-right:20px;
overflow:hidden;
    float:left;
    position:relative;
    top:0;
    transition:all  .5s;/*css3新增动画属性；过度画面，all指所有的元素都会发生改变*/
    box-shadow:#41a8ff 0px 5px 5px;
}
.price{
  font-weight:bold;
   font-size:10px;
    margin-top:50px;
   float:top;

height:0px;
transform:rotate(180deg);

    transition:all  3s;
}/*gaidong*/
.desc{
    position:absolute;
    /*bottom:-100px;*/
    left:50px;
    width:100%;
    weight:100px;
    transition:all  1.5s;
    height:-1000px;
    background-color:#2bad79;
    overflow:hidden;
}
.price i{color:red;}
.pic{
    margin-weight:bold;
    margin-top:-15px;
    margin-left:-10px;
}/*当鼠标停在该位置上时，该元素处于绝对位置*/
.item:hover{
    top:-15px;
    box-shadow:0 0 15px #aaa;

}
.item:hover .desc{
    bottom:0;
    transform:rotate(180deg);
}
a1255468
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图书清单
02-20
图书清单
图书列表清单
Talk is cheap，show me the code.
02-25 1679
阅读清单 2018-12-08 第一批次 Java编程思想 第4版 Head First 设计模式 深入理解Java虚拟机 JVM高级特性与最佳实践 Effective Java英文版 第三版 重构 改善既有代码的设计 Docker技术入门与实战 Hadoop权威指南第四版 Hive编程指南 Spark快速大数据分析   2019-01-24 第二批次 Effect...
图书详细清单
05-20
各种图书的收集 分类 可以直接用数据库的软件打开
项目3-1图书清单
m0_46444569的博客
04-03 540
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书城</title> <link href="css/bookstore.css" type="text/css" rel="stylesheet">...
记开发个人图书收藏清单小程序开发（九）Web开发——新增图书信息
weixin_30718391的博客
06-25 101
书房信息初始化已完成，现在开始处理图书信息新增功能。 主要是实现之前New Razor Pages的后台部分。 新增需要保存的Model：Book.InitSpec.cs /Models/Book.InitSpec.cs 1 using System.Collections.Generic; 2 3 namespace PTager.BL 4 { 5 pub...
图书馆管理系统功能清单
最新发布
10-24
图书馆管理系统是基于Web的应用系统，它提供了一个综合的功能清单，涵盖了客户端技术、服务器端技术和数据库技术三个方面。本文将对图书馆管理系统的功能清单进行详细的解释和分析。 一、客户端技术 客户端技术是...
前端书籍：有关前端开发的免费书籍清单
02-04
这份名为"前端书籍：有关前端开发的免费书籍清单"的资源集合，旨在为开发者提供一个全面的学习路径，帮助他们深入理解前端技术，提升技能水平。这份清单可能包括HTML、CSS、JavaScript、响应式设计、Web性能优化等多...
web网上书店商城系统
10-11
4. 订单处理：用户提交订单后，系统需生成订单详情，包括书籍清单、总价、收货地址、支付方式等。同时，系统应发送订单确认邮件或短信给用户，进行交易确认。 5. 支付接口集成：商城系统需集成第三方支付平台（如...
js-dev-reads：精明的Web开发人员阅读的书籍和文章清单
02-04
【标题】"js-dev-reads" 是一个专为精明的Web开发人员设计的资源集合，它包含了丰富的书籍和文章推荐，旨在提升开发者在JavaScript、React以及软件架构等领域的专业知识和技能。 【描述】该资源库是Web开发者的宝藏...
开源项目源代码阅读清单
08-12 1522
1. C 语言在哪里可以找到C语言标准库的实现源代码？ glibc（gnu lib of C）
【web前端期末大作业】html在线网上书店 基于html制作我的书屋(23页面)
qq_38514921的博客
03-23 255
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
JQuery制作图书简介页面
weixin_46528860的博客
10-14 2857
第二章 JQuery选择器 练习1：制作图书简介页面 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图书简介</title> <link rel="stylesheet" href="css/bookStyle.css"> </head> <body> <section..
vue综合案例一--图书管理
cheng_09的博客
11-29 451
vue综合案例1-图书管理 补充知识（数组相关API） 变异方法（修改原有数据） push（） pop（） shift（） unshift（） splice（） sort（） reverse（） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
使用jQuery制作图书简介
liuyan11223的博客
07-06 1111
jQury里添加样式和鼠标点击事件
Java Web图书管理系统(MVC框架)-包含源码
weixin_45597497的博客
05-15 1万+
图书管理系统 前言：这是大二写的系统，因此这个系统并没有用到很多框架，只是使用了MVC框架，前端使用的是JSP技术，操作数据库使用的是druid连接池，将前端信息转发到后端将信息封装用到了beanutils工具包，前端与后端进行异步交互时还使用到了json语句。这种框架的好处是方便管理，逻辑清晰，缺点是并没有做到真正的前后端分离，随着学习web的深入，会继续进行优化，改进。本系统功能主要分为两个模块，有读者登陆系统和管理员登陆系统。这两种不同的登陆身份信息会有不同的操作权限，读者登录，读者可以进行图书的借
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
图书展示案例html版
weixin_33910460的博客
04-17 3249
图书展示案例html版 效果如下： 示例代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图书商城示例</title> 6 </head> ...
html5制作当当图书榜页面,当当图书.html
weixin_42509236的博客
06-03 5900
无标题文档* {padding:0px; margin:0px;}body {font-size:12px; font-family:Verdana,"宋体"; line-height:25px;}ul, li {list-style:none;}img {border:0px;}a {text-decoration:none; color:#7B7B7B;}a:hover {text-decor...
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
热门推荐
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
Web前端设计深度探索：性能优化与最佳实践
"《大巧不工:Web前端设计修炼之道》是一本深入探讨Web前端设计的书籍，涵盖了从设计流程到性能优化的全方位知识。它强调以用户为中心的设计原则，探讨了原型设计、模型设计、可用性设计、一致性设计等关键技术，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值