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

51dev.com 技术开发者社区

CSS 列表样式详解

CSS 列表样式详解

CSS列表用于前端的列表排列。CSS列表属性作用如下:设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像在HTML中,有两种类型的列表:无序列表-列表项标记用特殊图形(如小黑点、小方框等)有序列表-列表项的标记有数字或字母list-style-type:设置列表标志类型。1:无序列表实例u...

快速使用CSS 弹性盒子

快速使用CSS 弹性盒子

布局的传统解决方案,基于盒状模型,依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现;2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安...

CSS,font-family,好看常用的中文字体

CSS,font-family,好看常用的中文字体

例1(小米米官网):font-family:"Arial","MicrosoftYaHei","黑体","宋体",sans-serif;例2(淘宝技术研发中心):font:12px/1.5Tahoma,Helvetica,Arial,...

css font-family 字体及各大主流网站对比

css font-family 字体及各大主流网站对比

@常用字体对应表:HTML,CSS,font-family:中文字体的英文名称宋体SimSun黑体SimHei微软雅黑MicrosoftYaHei微软正黑体MicrosoftJhengHei新宋体NSimSun新细明体PMingLiU细明体MingLiU标楷体DFKai-SB仿宋FangSong楷体KaiTi仿宋_GB...

css font-family属性设置元素的字体

css font-family属性设置元素的字体

font-family属性定义及用法在css中,font-family属性是使用来规定元素的字体系列,把多个字体名称作为一个“回退”系统来保存,如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表,浏览器会使用它...

css中设置z-index不起作用的解决办法

css中设置z-index不起作用的解决办法

 今天在写一个首页的时候,发现了一个情况:导航的下拉菜单会被banner图挡住。我便去设置z-index属性,但是却没有成功,几经试验后发现了解决css中z-index无效的方法。    想要z-index起作用,需要做到以下两点条件:  1.在添加z-index之前,需要给元素设置一个postio...

CSS控制文字,超出部分显示省略号

CSS控制文字,超出部分显示省略号

<p>文字显示两行,超出两行部分显示省略号...

CSS之outline:html标签点击会出现蓝色边框

CSS之outline:html标签点击会出现蓝色边框

哪些标签会有outline属性?outline定义和用法outline(轮廓)是绘制与元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。ps:轮廓线不会占据空间,也不一定是矩形。outline简写属性在一个声明中设置所有的轮廓属性。可以按照顺序设置属性:outline:outline-coloroutline...

自定义css样式结合js控制audio做音乐播放器

自定义css样式结合js控制audio做音乐播放器

最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器。实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制:1.通过play()、pause()来控制音乐的播放与暂停2.通过duration、currentTime获取音乐长度及实时播放进度3.通过volume、muted对音量...

css3 box-sizing属性

css3 box-sizing属性

box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。content-box,border和padding不计算入width之内padding-box,padding计算入width内border-box,border和padding计算入wi...

采用CSS定位属性实现Html中DIV层叠与悬浮

采用CSS定位属性实现Html中DIV层叠与悬浮

一般来说,DIV没有悬浮一说,更准确的应为层叠或者固定。最简单的方法是采用CSS定位属性。1、DIV层叠,即一个层叠加在另外一个层上利用相对定位和绝对定位来实现:在父对象上设置:position:relative;在子对象上设置:position:absolute;top:10px;left:10px;这样如果父对象里...

纯css3实现 transtion过渡效果

纯css3实现 transtion过渡效果

css3鼠标:hover效果会平滑过渡,但鼠标离开,效果消失的太生硬,能不能和:hover一样平滑过渡?<ahref=""><imgsrc="image/portfolio-03.jpg"<bclass="block"></b></a>最终实现效果:鼠标划入img上...

CSS实现背景渐变图片transtion过渡效果

CSS实现背景渐变图片transtion过渡效果

一、background-image不支持CSS3transitionbackground-image不支持CSS3transition,而CSS3gradient渐变作为背景图片存在的时候,下面的CSS设置是不会有过渡效果的。.gradient{background-image:linear-gradient(tor...

CSS3的@keyframes用法详解

CSS3的@keyframes用法详解

CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节。一.基本知识:keyframes翻译成中文,是"关键帧"的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问...

CSS 隐藏滚动条 但可以滚动

CSS 隐藏滚动条 但可以滚动

垂直滚动,用鼠标滚轮滚动 <!DOCTYPEhtml><htmllang="utf-8"><head><metacharset="utf-8"/><style>.parent{height:80px;width:100px;overflow:hidd...