做了一个小案例,关于我们内边距的处理的,然后再加上一些过渡效果

效果:

具体实现重点加上这里:

具体代码实现:

CSS部分:

<style>
#container{
border:2px solid sandybrown;
width: 780px;
margin: 0 auto;
overflow: hidden;
margin-top: 100px;
} #conter{
margin-right: -20px;
margin-bottom: -20px;
overflow: auto; }
.multiple{
position: relative;
width: 240px;
height: 160px;
float: left;
overflow: hidden;
margin: 0 20px 20px 0;
} .yingc{
background: black;
width: 240px;
height: 80px;
position: absolute;
bottom:-45px;
z-index:;
opacity: 0.7;
transition: all .3s linear;
/*规定以相同速度开始至结束的过渡效果
* ease
* (等于 cubic-bezier(0,0,1,1))。*/
} .multiple:hover .yingc{
transform: translatey(-45px); } .mf{
width: 25px;
height: 100px;
background: orange;
position: absolute;
top:-25px;
left: 10px;
transform: rotate(45deg);
z-index:;
} .wenzi{
z-index:;
font-weight: bold;
position: absolute;
top:20px;
left: -3px;
color: white;
font-size: 12px;
transition: all .6s linear;
transform: rotate(-45deg);
} .multiple:hover .wenzi{ font-size: 23px;
/*transform: rotate(-45deg);*/
/*transform: rotateY(30deg);
left: 60px;
bottom:30px;
color: cyan;
font-weight: bold;*/ } .yan1{
color:white;
font-size: 15px;
line-height: 2px;
text-align: center;
margin: 0 auto;
} .bh{
width: 240px; } .yans{ width: 150px;
color:white;
font-size: 16px;
float: left;
height: 30px;
line-height: 30px;
margin-left: 3px;
margin-right: 7px;
margin-top: 3px;
}
.border{
display: inline-block;
background:red;
width: 80px;
height: 35px;
line-height: 40px;
color:white;
font-size: 15px;
float: left;
text-align: center;
} </style>

HTML部分:

 <div id="container">
<div id="conter"> <div class="multiple"> <img src="marginpic/j(2).jpg" width="240" height="160"/>
<div class="mf"></div>
<div class="wenzi">特价优惠</div>
<div class="yingc"> <div class="bh">
<div class="yans">铂金假日酒店</div>
<div class="border">¥258/起</div>
</div> <span class="yan1">团房休闲度假老客全网低价</span>
</div>
</div> <div class="multiple">
<img src="marginpic/j(2).png" width="240" height="160"/>
<div class="mf"></div>
<div class="wenzi" style="color:green">可预约</div>
<div class="yingc">
<div class="bh">
<span class="yans">诺曼精品酒店</span>
<span class="border">¥161/起</span>
<span class="yan1">团房休闲度假老客全网低价</span>
</div>
</div>
</div>
<div class="multiple">
<img src="marginpic/j(3).jpg" width="240" height="160"/>
<div class="mf"></div>
<div class="wenzi" style="color: red;">已爆满</div>
<div class="yingc">
<div class="bh">
<span class="yans">企鹅酒店</span>
<span class="border">¥605/起</span>
<span class="yan1">团房休闲度假老客全网低价</span>
</div>
</div>
</div> <div class="multiple">
<img src="marginpic/j(3).png" width="240" height="160"/>
<div class="mf"></div>
<div class="wenzi">特价优惠</div>
<div class="yingc">
<div class="bh">
<span class="yans">珠海海泉湾维景</span>
<span class="border">¥258/起</span>
<span class="yan1">新客全网低价含早</span>
</div>
</div>
</div> <div class="multiple">
<img src="marginpic/j(4).jpg" width="240" height="160"/>
<div class="mf"></div>
<div class="wenzi">优惠多多</div>
<div class="yingc">
<div class="bh">
<span class="yans">珠海东方印象大酒店</span>
<span class="border">¥258/起</span>
<span class="yan1">新客全网低价含早</span>
</div>
</div>
</div> <div class="multiple">
<img src="marginpic/j(4).png" width="240" height="160"/> <div class="mf"></div>
<div class="wenzi">特价优惠</div> <div class="yingc">
<div class="bh">
<span class="yans">南油大酒店</span>
<span class="border">¥818/起</span>
<span class="yan1">网低价新客全网低价亲子酒店点评含早</span>
</div>
</div> </div> </div>
</div>

最终效果:

(本人正在学习阶段,有什么不对的地方,请路过的大神指教一下)

css 布局,过渡的更多相关文章

  1. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  2. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  3. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  4. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  5. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  6. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  7. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  8. CSS 布局口诀

    body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...

  9. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  10. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

随机推荐

  1. linux 重启mysql redis等服务器

    redis重启 如果是用apt-get或者yum install安装的redis, 可以直接通过下面的命令停止/启动/重启 /etc/init.d/redis-server stop /etc/ini ...

  2. 友善之臂arm9、 smart210监控版本,烧写系统

    第一次接触嵌入式开发,就拿210练手了,第一天折腾,先烧系统. 准备:板子,8GB或者以上的SD卡,网上找下minitools以及系统小红帽,Android或者ubuntu,debian都可以.[ub ...

  3. leetcode-160周赛-5239-循环码排列

    题目描述: 参考格雷编码: class Solution: def circularPermutation(self, n: int, start: int) -> List[int]: res ...

  4. C/C++ volatile

    { volatile和const关键很相似,都是修饰变量的,只是二者功能不一样. volatile在多线程当中经常使用,因为在某一线程多次调用某一个变量,编译器会进行优化,将该变量存放在在寄存器当中, ...

  5. thinkphp 常量参考

    预定义常量 预定义常量是指系统内置定义好的常量,不会随着环境的变化而变化,包括: URL_COMMON 普通模式 URL (0) URL_PATHINFO PATHINFO URL (1) URL_R ...

  6. Shiro学习(12)与Spring集成

    Shiro的组件都是JavaBean/POJO式的组件,所以非常容易使用spring进行组件管理,可以非常方便的从ini配置迁移到Spring进行管理,且支持JavaSE应用及Web应用的集成. 在示 ...

  7. 冲刺$\mathfrak{CSP-S}$集训模拟赛总结

    开坑.手懒并不想继续一场考试一篇文. 既没必要也没时间侧边栏的最新随笔题解反思相间也丑 而且最近越来越懒了竟然都不写题解了……开坑也是为了督促自己写题解. 并不想长篇大论.简要题解也得写啊QAQ. 目 ...

  8. 预处理+状态压缩+剪枝——codefoece 1209E

    那一步剪枝实在是没想到 #include<bits/stdc++.h> using namespace std; #define N 2005 struct Col{ ],Max[< ...

  9. NX二次开发-NXOpen::CoordinateSystemCollection Class Reference

    NX11+VS2013 #include <NXOpen/Section.hxx> #include <NXOpen/SectionCollection.hxx> #inclu ...

  10. flask json

    导入 from flask import Flask,jsonify 1.列表 def index(): arr=['mkdir','md','touch'] return jsonify(arr) ...