51dev.com IT技术开发者社区

51dev.com 技术开发者社区

气泡聊天CSS

气泡聊天CSS

<divclass="divide"></div><divclass="user-right">2020-01-0611:12:40wang</div><divclass="chat-right"><span>wsw今天天气不错...

背景图片自适应整个页面CSS+DIV

背景图片自适应整个页面CSS+DIV

<bodystyle="overflow:hidden;"><divclass="wrapper"><!--背景图片--><divid="web_bg"style="background-image:url(/images/welcome.png);back...

CSS3实现文字过渡移动

CSS3实现文字过渡移动

1.在需要移动的对象上加上a标签,并定义CSS<a><imgsrc="/skin/images/ico-weixin.png"/><span>微信平台</span></a>2、定义CSS#solutiona{-webkit-transiti...

CSS3实现两行或三行文字,然后多出的部分省略号代替

CSS3实现两行或三行文字,然后多出的部分省略号代替

-webkit-line-clamp是一个不规范的属性(unsupportedWebKitproperty),它没有出现在CSS规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:display:-webkit-box;必须结合的属性,将...

用css3选择器给你要的第几个元素添加不同样式方法【转发】

用css3选择器给你要的第几个元素添加不同样式方法【转发】

下面我们来了解一下css选择器里面的几个:only-childp:only-child选择属于其父元素的唯一子元素的每个<p>元素。3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。3:nth-last-child(n)p...

CSS三栏布局

CSS三栏布局

 实现:高度为100px,左右栏宽度固定为300px,中间栏宽度自适应。.left,.right,.center{height:100px;}.left{float:left;width:300px;background:#ee2c2c;}.right{float:right;width:300px...

CSS实现自适应正方形

CSS实现自适应正方形

在处理移动端页面时,我们有时需要将banner图做成与屏幕等宽的正方形以获得最佳效果。方案一:CSS3  vw单位css3中新增了一组相对于可视区域百分比的长度单位vw,vh,vmin,vmax。vw是相对于视口宽度的百分比,1vw=1%viewportwidthvh是相对于视口...

CSS中可以和不可以继承的属性

CSS中可以和不可以继承的属性

1、display2、文本属性vertical-align垂直文本对齐text-decorationtext-shadowwhite-space3、盒子模型属性:width、height、margin、border、padding等。4、背景属性:background、background-colo...

CSS中的单位

CSS中的单位

在css中单位长度用的最多的是px、em、rem,这三个的区别是:  px是固定的像素,一旦设置了就无法因为适应页面大小而改变。  em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。  对于em和rem的区别一句话概括:em相对于父元素,rem相对于...

CSS盒模型与外边距重叠margin问题

CSS盒模型与外边距重叠margin问题

在标准盒模型中,盒模型的宽高只是内容的宽高;而在IE盒模型中,盒模型的宽高是内容(content)+padding+border; 标准盒模型模型:width=content,对象的实际宽度=width+padding+border+margin; IE6盒子模型:width=c...

CSS3相关

CSS3相关

1.CSS3的选择器1)E:last-child匹配父元素的最后一个子元素E。2)E:nth-child(n)匹配父元素的第n个子元素E。 3)E:nth-last-child(n)CSS3匹配父元素的倒数第n个子元素E。4)伪类选择器:(:link、:hover、:focus)2.圆角&...

css如何选择相同class下的第一个class元素和最后一个元素?

css如何选择相同class下的第一个class元素和最后一个元素?

如图,如果像选择类名为 class="exerciseInfo" 中的第一个和最后一个div,做法如下:选择第一个类名:.exerciseInfo:nth-of-type(1){...};选择最后一个类名:.exerciseInfo:last-child{...};选择其中一个指...

CSS或HTML如何实现文字下面加点?

CSS或HTML如何实现文字下面加点?

就像word里文字加着重号一样,在字的下面加一个点,用CSS怎么做?注意,我说的是下面加点,不是文字加粗或倾斜,请不要回答<strong>或<em>之类的。把要着重加点的文字用<span></span>行内标签括起来,然后对span加点的下边框有几种格...

通过CSS控制window.print打印样式浅析

通过CSS控制window.print打印样式浅析

  本文主要讲解如何使用CSS控制打印样式。一、基本概念  使用CSS可以控制文档如何正确的显示在不同的媒介(Media)上。其中分页媒介(PagedMedia),不同于连续媒介(ContinuousMedia),它可以控制文档内容,将其分隔至一个或多个不相关联的页面(如:书、幻灯片)。  页面(P...

两行css代码实现瀑布流:html,css最简单的瀑布流实现方式

两行css代码实现瀑布流:html,css最简单的瀑布流实现方式

  两行css如下:.waterfall-container{/*分几列*/column-count:2;/*列间距,可有可无,默认30px*//*column-gap:0;*/}.waterfall-item{/*不留白,不知道什么意思可以取消这个样式试试*/break-inside:avoid;...