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

51dev.com 技术开发者社区

CSS如何清除浮动流的多种方案

CSS如何清除浮动流的多种方案

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><style>.wrapper{...

css实现两边有缺口的卡券效果

css实现两边有缺口的卡券效果

自己项目用到优惠券的样式,特拿来分享。主要用到了css的position:absolute属性。 效果如下图:  <!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8...

css模型之层模型

css模型之层模型

css层模型说的是position这个属性,它有四个常用值,分别是static、relative、absolute、fixed。1.static:这个是元素的默认值,特点是页面会依照自左向右、自上向下的方向布局,并且设置top、right、bottom、left值是没有用的,并且设置z-index也...

css中使input输入框与img(图片)在同一行居中对齐

css中使input输入框与img(图片)在同一行居中对齐

display:inline;...

CSS在超出宽度后显示省略号…代码

CSS在超出宽度后显示省略号…代码

display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;必须要有个宽度...

实现div里的img图片水平垂直居中

实现div里的img图片水平垂直居中

body结构<body><div><imgsrc="1.jpg"</div></body>方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align...

html怎样设置鼠标指针样式

html怎样设置鼠标指针样式

可以用css来统一设置,也可以单独对标签进行设置。Auto<span>Auto</span>Crosshair<span>Crosshair</span>Default<span>Default</span>Pointer<...

div中p标签自动换行

div中p标签自动换行

只需要设置div的width属性,p标签加上word-break:break-word属性就会自动换行----------------2016.7.1--------------------今天在评论列表中也遇到了这个问题,并且只有英文会出现顶开容器的现象,仔细找了一下资料,因为在排版上,CJK(C...

分享两个常用的rem布局方式

分享两个常用的rem布局方式

关于rem这种技术需要一个参考点,一般都是以<body>的“font-size”为基准。比如我们设置body,html的字体大小为10px;那么1rem就是10px,这样一来,我们设置字体大小相当于“14px”时,只需要将其值设置为&ldq...

移动端border:1px问题解决方案

移动端border:1px问题解决方案

了解设备像素和css像素的因该知道,通常我们在写移动端时,是按照设计稿标注的像素除以设备的DPR来写真实的像素,比如在iPhone6上,我们写的20px字体世界上在视觉效应上有20px;所以当我们写1px边框时,在手机上看起来会变粗变为2px;对此有如下解决方案:.border-1px(@color...

sticky footer 布局

sticky footer 布局

在开发中常遇见这种问题,我们需要将底部固定在页面的最下方;无论正文内容的高度是多少;如果直接用fixed定位:bottom为0;那么当正文过多时,底部将会与正文重叠;代码如下:html:<divclass="container"><divclass="content"><...

CSS中关于list-style与inline的使用方法详解

CSS中关于list-style与inline的使用方法详解

以前只用到list-style:none;这种方式,原以为也只这种方式呢,这个方式只不过是让li前的标记去掉而已,下面为大家介绍下CSS:list-style和inline用法详解,感兴趣的朋友不要错过平时只顾着写程序,写p或span或ulli之类的,常常遇到一莫名的问题,自己的解决方式可能是top...

如何使用CSS设置Checkout样式的示例代码

如何使用CSS设置Checkout样式的示例代码

如何使用CSS设置Checkout样式的示例代码<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>CSS3自定义Checkbox特效</title></head&g...

display:none和visibility:hidden的区别

display:none和visibility:hidden的区别

visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏览时保留位置;而display:none视为不存在,且不加载! 1、visibility:...

css3 :nth-child()伪类选择器实现奇偶行显示不同样式

css3 :nth-child()伪类选择器实现奇偶行显示不同样式

css3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻...