div css 伪类 不固定图片大小 居中

<style>

.pic_box{width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}

.pic_box img{vertical-align:middle;}

.pic_box::after{

content:'center';

display:inline-block;

width:0;

height:100%;

vertical-align:middle;

overflow:hidden;

}

</style>

<div class="pic_box">

　　<img src="http://i.santelvxing.com/upload/2016/ouc8qxay7-uystiw75ku-125148768.jpg" />

</div>

 css div 实现三角形

<style>

    .left{

        float: left;

    }

    .mlr-20{

        margin-left:20px;

        margin-right:20px;

    }

    .triangle{

        width: 0;

        height: 0;

        border: 20px solid #fff;

    }

    .triangle-down{

        border-color: #209E6B  transparent transparent transparent;

    }

    .triangle-right{

        border-color: transparent transparent transparent #209E6B;

    }

    .triangle-special{

        border-color: #209E6B #209E6B transparent #209E6B;

    }

</style>

<body>

    <div class="triangle triangle-down  left mlr-20">

    </div>

    <div class="triangle  triangle-right left mlr-20">

    </div>

    <div class="triangle triangle-special left mlr-20">

    </div>

</body>

　

　CSS 伪类实现左上角标签

<style type="text/css">

	.ui-cover-tip{

	  position: relative;

	  width: 200px;

	  height: 200px;

	  margin:0 auto;

	  border: solid 1px grey;

	}

	.ui-cover-tip:before{

	  content:'';

	  position: absolute;

	  display:block;

	  width: 0;

	  height: 0;

	  border-top: 60px solid #3399FF;

	  border-right: 60px solid transparent;

	  z-index: 2;

	}

	.ui-cover-tip:after{

	  content:'热门';

	  position: absolute;

	  top: 0px;

	  left: 0px;

	  width: 50px;

	  height: 30px;

	  transform: rotate(-45deg);

	  display: inline-block;

	  color:#fff;

	  z-index: 3

	}

</style>

<body>

	 <div class="ui-cover-tip"><div>

</body>

　　

　　

div css 伪类 不固定图片大小 居中， css div 实现三角形的更多相关文章

  1. 应用越来越广泛的css伪类

    说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...

  2. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  3. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  4. 12、第十二节课，css伪类 （转）

    一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...

  5. CSS伪类整理笔记

    0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没 ...

  6. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  7. CSS 伪类 (Pseudo-classes)实例

    CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...

  8. css伪类:before及:after除了插入文字内容还能做点儿啥？画图

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11181416.html 1.什么时候用伪类:before和:after? 结合实际开发情况,说一 ...

  9. (五)CSS伪类(Pseudo-class)

    CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...

随机推荐

  1. Swing框架的继承关系

    ---------------siwuxie095 Java SE 8 (截止 2017/4/1 最新)在线 API 文档: http://docs.oracle.com/javase/8/docs/ ...

  2. C++面向对象类的实例题目九

    题目描述: 编写一个学生和老师数据输入和显示程序,学生数据有编号.姓名.班号和成绩,教师数据有编号.姓名.职称和部门. 要求将编号.姓名.输入和显示设计成一个类person,并作为学生数据操作类stu ...

  3. C++对二进制文件的操作实例

    有5个学生的数据,要求: (1)将它们存放到磁盘文件中: (2)将磁盘文件中的第1,3,5个学生数据读入程序,并显示出来: (3)将第三个学生的数据修改后存回磁盘文件中的原有位置: (4)从磁盘文件读 ...

  4. 算法Sedgewick第四版-第1章基础-2.1Elementary Sortss-007归并排序(自下而上)

    一. 1. 2. 3. 二.代码 package algorithms.mergesort22; import algorithms.util.StdIn; import algorithms.uti ...

  5. 2用java代码实现冒泡排序算法（转载）

    import java.util.Scanner; public class Maopao { public static void main(String[] args) { System.out. ...

  6. p3584 [POI2015]LAS

    传送门 分析 f[i][S](S∈[0,4])表示第iii个食物没有被选/左边选/右边选/同时选的状态是由哪一个状态转移来的 我们需要满足两个条件: 每个人只能选择一个  改变选择之后不会比当前获得热 ...

  7. ZROI2018提高day4t1

    传送门 分析 一道贪心题,我们用两个优先队列分别维护卖出的物品的价格和买入但没有卖出的物品的价格,然后逐一考虑每一个物品.对于每一个物品如果他比卖出的物品中的最低个价格,则改将现在考虑的物品卖出,将之 ...

  8. loj10131 暗的连锁

    传送门 分析 首先我们知道如果在一棵树上加一条边一定会构成一个环,而删掉环上任意一条边都不改变连通性.我们把这一性质扩展到这个题上不难发现如果一条树边不在任意一个新边构成的环里则删掉这条边之后可以删掉 ...

  9. python3-列表中存储字典

    # Auther: Aaron Fan #示例1:#定义几个字典alien_0 = {"color":"green", "points":5 ...

  10. MATLAB数字图像处理（二）图像增强

    1         图像增强 1.1            直方图均衡化 对于灰度图像,可以使用直方图均衡化的方法使得原图像的灰度直方图修正为均匀的直方图. 代码如下: I2=histeq(I1); ...