css
-
使用css给未知宽高的元素添加背景图片方法
给页面的某一元素添加背景图片，当没有指定具体的宽高时，是无法显示效果的 1、添加背景图 HTML代码： *{margin:0; padding:0;} #wrap{ width:100%; height:auto; background:url(‘images/page.jpg’) no-repea…
-
CSS进阶之CSS的技巧分享
如何设置水平居中？ 分两种情况 行内元素与块级元素 1.行内元素（如图片 文字） div.textcenter{ text-align:center; } hello joe! 2.块级元素 块级元素的水平居中又分为两种 定宽块状元素 和 非定宽块状元素 立即学习“前端免费学…
-
CSS进阶之布局模型实例详解
css中含有三种布局模型 流动模型flow 浮动模型float 层模型layer 流动模型 网页默认的布局模型 特点有两个 1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。 h1,p,div{ b…
-
box-shadow IE8兼容处理方法介绍
根据canisue（http://caniuse.com/#search=box-shadow），box-shadow兼容性如下图所示： 测试代码： * { margin: 0; padding: 0; } #header { width: 400px; height: 400px; margin:…
-
border-radius IE8兼容处理方法介绍
根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示： 测试代码： * { margin: 0; padding: 0; } #header { width: 400px; height: 400px; m…
-
CSS左边竖条的实现方法代码
解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 题目1、下面这个图形，只使用一个标签，可以有多少种实现方式： 假设我们的单标签是一个 p: Studio Global Studio Glo…
-
使用CSS完美实现垂直水平居中的6种方法介绍
前言 由于HTML语言的定位问题，在网页中实现居中也不是如word中那么简单，尤其在内容样式多变，内容宽高不定的情况下，要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多，但是都不太完整，所以小茄今天就来总结下纯CSS实现居中的各种方案。学疏才浅，文中如有不当之处，万望指出！ 6种方案 1…
-
使用CSS创建各种不同的图形形状的方法
介绍 我们学习如何使用简单的CSS来创建不同类型的平面图形。 使用代码 矩形 .rectangle { width: 250px; height: 150px; background-color: #6DC75F;} 三角形 .triangleUp { border-left: 75px solid…
-
分享12个CSS牛逼的技巧
下面这些css高级技巧 left-2 list-paddingleft-2″> 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 max…
-
使用CSS实现div水平垂直居中的方法介绍
实现居中的方案有很多，这里介绍下纯css使用absolute配合margin的方案。 1. p宽高固定 width: 400px;height: 200px;position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -…
