css
Coding-lover
Keep hungry,Keep foolish(可通过微信联系我:unilay_yang)
展开
-
css 通用css样式
/*---------------------------------------------------------通用CSS开始----------------------------------------------- */@charset "utf-8";/* ------------------------------------全局定义----------------转载 2014-05-15 00:15:05 · 955 阅读 · 0 评论 -
css 实现的loading页面等待效果
有些页面加载起来比较慢,为了加强用户体验效果,所以一般都会做一个页面加载等待的提示,页面加载完成后消失。下面是用CSS实现的一个简单的页面加载等待效果,大家可以参考: 无标题文档 .loading{ width:160px; height:56px; position: absolute; top:50%;转载 2015-03-09 14:29:34 · 1499 阅读 · 0 评论 -
css属性之Overflow
CSS属性之Overflow 当页面有上下两个DIV层时,由于上面的DIV文字内容过多,超出该层的高度和宽度,此时上面的DIV层中的内容会覆盖到下面的DIV层之上。如下图: 此时该怎么解决呢?这就会用到CSS的一个很有用的属性—Overflow。该属性有四个值:· visible(默认值)· hidden· scroll· aut转载 2015-05-21 14:25:02 · 773 阅读 · 0 评论 -
css position属性和实例应用
目前几乎所有主流的浏览器都支持position属性(”inherit”除外,”inherit”不支持所有包括IE8和之前版本IE浏览器,IE9、IE10还没测试过),以下是w3school对position五个值的解释:其中absolute和relative是最常用的,fixed用得也比较多(其中IE6并不支持fixed)。1、absolute(绝对定位)absolute是生成觉对定位的元素,脱离了转载 2015-05-22 09:16:15 · 630 阅读 · 0 评论 -
css z-index详解
概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系的比较对于同级元素,默认(或position:static)情况下文档流后面的元素会覆盖前面的。对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素,即z-index越大优先级越高。IE6/7下position不转载 2015-05-22 10:06:34 · 806 阅读 · 0 评论 -
css HTML元素布局及Display属性
1.HTML元素分类HTML元素大题可分为内联(inline)元素和块(block)元素。1.1 内联元素(inline)①元素显示方式:”文本方式”,1个挨着1个,不独自占有1行;②内嵌的元素也必须是内联元素:如<a></a>,不能在里面嵌入<div></div>等块级元素;③包含的标签有:<a>、<input>、<label>、<img> 等等;1.2 块元素(block)①元素显示方式:每个元转载 2015-05-22 09:58:58 · 922 阅读 · 0 评论 -
css vertical-align属性详解
前言:关于vertical-align属性vertical-align属性可能是CSS属性中比较不好理解的一个。W3C对它的解释是:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。本文将通过一系列实例实验说明它的作用。[注:将鼠标放置到本文的图片上可看到辅助线]实践出真知首先,在HTML body中定义一个用于实验的HTML结构它包含一个div作为父元素,两张图片,和一个span元素,如转载 2015-05-22 11:44:33 · 1191 阅读 · 0 评论 -
css 行高——line-height
初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下。所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识:顶线、中线、基线、底线<!DOCTYPE html><html> <head> <t转载 2015-05-23 09:28:44 · 696 阅读 · 0 评论 -
css 圆角效果
-webkit-border-radius:苹果;谷歌,等一些浏览器认,因为他们都用的是webkit内核; -moz-border-radius:moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这两个属性有值的时候,去掉哪个属性,对用他们做内核的浏览器就有影响,如果没值的话,就没影响,这两个属性和,IE,和360没关系。不删除的话影响微乎其微. bo转载 2015-07-14 10:59:25 · 671 阅读 · 0 评论 -
css 网站大背景(按比例缩放背景图片)
很多网站是全背景图片的,而且适应各种主流分辨率,给人一种干净大气的感觉,实属设计派的一个耍酷良方,下面介绍几种实现全屏图片自适应缩放背景图片的方法。1.帅气简单的CSS3方法html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover;转载 2015-07-27 17:49:10 · 14707 阅读 · 0 评论 -
css div重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
重叠样式需要主要CSS样式解释 1、z-index 重叠顺序属性 2、position:relative和position:absolute设置对象属性为可定位(可重叠) 3、left right top bottom绝对定位具体位置设置 配合的样式 1、css width 2、css height 3、background 为了观察效果,我们对不同DIV设置不同背景颜色进行区别 接转载 2015-07-28 12:13:28 · 5010 阅读 · 0 评论 -
html 网页背景图片根据屏幕大小CSS自动缩放
腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码实现的。先不说要调用jq库拖慢了网页的打开时间,而且对于兼用性不好。前几天用CSS研究出相同效果的样式代码。无论图片多大都能根据屏幕变化(当然图片尺寸越大越好)。而且在拉动网页窗体大小时会自动调节图片大小,实时交互。效果上图看不了。在这里放个连接,CSS 代码如下:#background { po转载 2015-07-28 18:11:55 · 19945 阅读 · 1 评论 -
css 实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看测试页面,有简短解释。)方法一这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-a转载 2015-07-29 14:23:57 · 816 阅读 · 0 评论 -
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:.Absolute-Center { margin: auto; position: absolute; top: 0; left:转载 2015-07-29 16:15:50 · 659 阅读 · 0 评论 -
html+css布局的三种方式
1.自然布局。 没有任何修饰的布局是自动靠左的。 2.流动布局 上面讲的float:left的情况。 3.定位布局 相对定位和绝对定位都是相对于父div标签的。 相对——以这个元素的本来应该在的位置为参照点 绝对——以父div标签的原点(左上角)为参照点。由于外层是position:relative,所以里层是absolute的话,则会以外层的左上角为位移参考对齐。当然外层只转载 2015-08-03 12:49:18 · 2636 阅读 · 0 评论 -
css 多行文本溢出显示省略号(…)全攻略
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。overflow: hidden;text-overflow: ellipsis;white-space: nowrap;但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。WebKit浏览器或移动端的页面在WebK转载 2015-07-23 18:28:44 · 5897 阅读 · 0 评论 -
css 利用媒体查询进行响应式设计
原文:http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries如今屏幕分辨率的范围已经从320px(iPhone)涵盖到2560px(大显示器)或者更高了。用户不单单在桌面电脑上浏览网站。用户如今会使用移动电话,小的笔记本,平板设备(比如iPad或者Playbook)来访问互联网。所以传统的固定宽度设转载 2015-09-03 18:58:45 · 1786 阅读 · 0 评论 -
css 强制换行和超出隐藏实现
一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行。解决方法(以IE,chrome,FF为测试浏览器):{ word-转载 2014-12-26 13:11:54 · 1089 阅读 · 0 评论 -
css 多行文本垂直居中
.outer { display:table; width:578px; overflow:hidden; background: #eee; height: 42px;}.middle {display:table-cell; vertical-align:middle; margin-left 10px;} /*下面的CSS是针对IE7,IE6*/.outer{pos转载 2014-12-23 18:45:38 · 770 阅读 · 0 评论 -
web 前端开发规范文档
规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小转载 2014-05-15 00:31:52 · 583 阅读 · 0 评论 -
css 前端设计师必知的background属性(有CSS3内容)
背景属性——background是css中的核心属性。你应该对它有充分的了解。这篇文章详细讨论了background的所有相关属性,甚至包括background-attachment,还为我们介绍了它在即将到来的CSS3中的样子,还有那些新加入的背景属性。 使用CSS2中的背景属性回顾css2中有五个与背景相关的属性。它们是: bac转载 2014-07-22 12:27:29 · 1106 阅读 · 0 评论 -
css HTML里使用CSS 的几种方式
1.直接添加在HTML的标识符(tag)里(行列样式): 网页内容 例如: style="font-family:Geneva, Arial, Helvetica, sans-serif; font-size:9px; color:#ff9900">CSS 这种方法虽然简单易用,但是不推荐使用这种方法,这种方法无法展现出样式表的优势:缩短修改时间提高工作量。转载 2014-10-03 16:28:39 · 997 阅读 · 0 评论 -
css 选择器参考手册
CSS3 选择器在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)转载 2014-05-15 09:29:30 · 733 阅读 · 0 评论 -
css 中浮动(Float)的作用
转自:http://www.missyuan.com/thread-438828-1-1.html课程关键词:浮动页面布局有两种方式引用:1)浮动Float 2)定位Position今天就来一个小小的练习,让大家理解Float的含义复制内容到剪贴板代码:【例子】要求:1)两个方块,一个红色#900,一个蓝色#009;2转载 2014-07-15 15:34:12 · 1302 阅读 · 0 评论 -
css 调试方法总结
本总结不断更新,主要记录本人调试过程中所终结的经验与方法。毕竟本人不是做浏览器前端的,所以如有不详敬请见谅。css关系到界面的美观,有时候功能实现了。界面确丑到没人用,终归还是一件失败的产品,所有好的产品不仅需要实用的功能,更加需要贴心美观的外观。1.如果遇到整体布局工整,个别布局偏移的。可以使用浏览器取道偏移的组件(放大镜),然后得到应用到这个组件的css文件中的原创 2014-06-13 15:21:12 · 1592 阅读 · 0 评论 -
css 清除浮动
什么是CSS清除浮动?在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。引用W3C的例子,news容器没有包围浮动的元素转载 2014-10-04 00:47:55 · 588 阅读 · 0 评论 -
css 浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以转载 2014-10-03 23:21:00 · 600 阅读 · 0 评论 -
css 漂浮底部 漂浮顶部
.top{ margin: 0px; z-index: auto; position: fixed; font-family: cursive; border: 1px solid gray; padding-top: 10px; padding-bottom: 10px; line-height: 23px; height: 40px; width: 100%; back转载 2014-11-27 10:45:40 · 4613 阅读 · 0 评论 -
CSS 清除默认样式模版
宽度计算一定是包括自己设置宽度+边框宽度+padding宽度+margin宽度组成,因为一些组件默认含有一定的样式,开发前如不进行原有格式清除,很容易造成结构错位。首先给大家分享我的及CSS网页使用的开头CSS模板;HTML+CSS模板divcss5初始化XHTML(DIV+CSS初始化模板)此处提供DIVCSS5每次开发项目时候使用的DIV+CSS模板初始化最基本的模板模块。转载 2014-11-27 14:04:02 · 7919 阅读 · 0 评论 -
css 属性总结(三):positioning, dimension, list, table
定位position设置元素的定位类型,相当于声明当前元素的布局所使用的定位机制,需要left、top、right、bottom、z-index等属性配合使用,否则没有实际效果。取值如下表所示: top、bottom、left、right设置元素的上/下/左/右外边距的边缘与包含该元素的上/下/左/右边界之间的偏移。取值可以是auto,表示浏览器转载 2014-11-29 00:37:02 · 676 阅读 · 0 评论 -
css 5种你未必知道的JavaScript和CSS交互的方法
随着浏览器不断的升级改进,CSS和JavaScript之间 的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。我们的网页中都有.js文件和.css文 件,但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道!用JavaScript获取伪元素(pseudo-element)转载 2014-11-28 23:57:41 · 631 阅读 · 0 评论 -
css 属性总结(二):text, font, margin, padding
文本color设置元素内文本的颜色。值可以取任意CSS支持的颜色值,包括颜色名称(如red, blue)、十六进制颜色值(如#ff0000)或者rgb颜色值(如rgb(255, 0, 0))。默认为#000000,黑色。direction设置元素内文本的书写方向。取值有ltr(从左至右)和rtl(从右至左)。默认为ltr。letter-spacing转载 2014-11-29 00:35:04 · 1100 阅读 · 0 评论 -
css 属性总结(一):background, border, outline
背景background设置元素的所有背景属性,包括background-color、background-image、background-repeat、background-attachment、background-position。设置属性时可以不设置其中的某些项,也没有顺序。上述5个属性可以在CSS中单独设置,但通常推荐统一在background中设置。e.g.转载 2014-11-29 00:33:14 · 1247 阅读 · 0 评论 -
css 伪类与伪元素
CSS的元素选择器除了根据id(#)、class(.)、属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素。它们就是伪类和伪元素。跟id选择器、类选择器、属性选择器以及派生选择器等等这些从HTML文档层次结构(DOM树)中获取元素不同的是,伪类和伪元素是预定义的、独立于文档元素的。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征,而是在处于特殊状态的转载 2014-11-29 00:05:24 · 586 阅读 · 0 评论 -
css DIV层内的文字垂直居中
有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中的方法。 首先要知道css里vertical-align无效,W3C官方对vertical-align做了下面的解释: “ This property affect转载 2014-12-22 20:34:28 · 837 阅读 · 0 评论 -
css 入门基础知识
由于H5在移动端的发展如日中天,现在大部分公司对高级前端需求极大,到处挖墙角,前端薪资也随之水涨船高,那公司没有配备专用的前端怎么办呢? 作为老板眼中的“程序猿” 前端都不会是非常无能的表现,那作为后端人员需要不需要懂前端呢?为了提升价值还是需要懂点的,不然一点问题就找前端,那是不是让别人疯了…… 前端先从最常见的调样式说起吧,重要知识点之盒子模型,这里就不叽叽歪歪那些难懂的概念,直接看下面的图转载 2015-12-06 23:25:30 · 817 阅读 · 0 评论