随笔分类 -  HTML/CSS

上一页 1 2 3 4 5
CSS总结div中的内容垂直居中的五种方法
摘要：一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段 阅读全文
posted @ 2015-09-14 17:37 风雨后见彩虹 阅读(299360) 评论(1) 推荐(28)
CSS中你知道的display的值有多少？用了多少？
摘要：它的语法如下： display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | t 阅读全文
posted @ 2015-09-14 16:02 风雨后见彩虹 阅读(1627) 评论(1) 推荐(1)
CSS属性disabled和readonly的区别是什么
摘要：在博客园中看到这样一篇文章，关于disabled和readonly的区别，以前还真的没有注意它们的区别，还是有必要知道它们的区别的，所以转载了。 这两个属性有类似之处，但是区别也是巨大的，之所以说类似，是因为这两个属性好像都貌似能够将指定的元素设置为"不可用"状态，下面就简单介绍一下它们两个的区别, 阅读全文
posted @ 2015-09-13 20:32 风雨后见彩虹 阅读(4026) 评论(0) 推荐(2)
CSS之Normalize.css的使用（重置表）
摘要：本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normaliz 阅读全文
posted @ 2015-09-13 09:09 风雨后见彩虹 阅读(3045) 评论(0) 推荐(1)
CSS reset重置样式有那么重要吗？
摘要：在以前写html代码的时候，一般都会在head里添加重置样式reset.css，其内容如下： @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 阅读全文
posted @ 2015-09-13 08:47 风雨后见彩虹 阅读(3015) 评论(0) 推荐(0)
CSS让浮动元素水平居中
摘要：对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。如下： HTML 代码： <div class="box"> <p>我是浮动的</p> <p>我也是居中的</p> </div> CSS 代码： .box{ 阅读全文
posted @ 2015-09-12 22:38 风雨后见彩虹 阅读(2322) 评论(1) 推荐(0)
CSS中table tr:nth-child(even)改变tr背景颜色： IE7,8无效
摘要：例如： .my_table tr:nth-child(even){ background:#E6EDF5; } .my_table tr:nth-child(odd){ background:#F0F5FA; } IE7,8无效，无法识别。 换一种方法： 给需要变色的tr加上class .table 阅读全文
posted @ 2015-09-06 16:55 风雨后见彩虹 阅读(3990) 评论(1) 推荐(0)
CSS之 :before && :after的用法，伪类和伪元素的区别
摘要：一：:before && :after的用法 :before 如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明： .before:before{content:'you before'; color:red;} <div class="before"> me 阅读全文
posted @ 2015-09-05 20:48 风雨后见彩虹 阅读(1644) 评论(2) 推荐(1)
CSS强制性换行word-break与word-wrap的使用
摘要：一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，不换行 阅读全文
posted @ 2015-09-05 19:48 风雨后见彩虹 阅读(5446) 评论(0) 推荐(2)
CSS之设置滚动条样式
摘要：因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决。 比如网易邮箱的滚动条样子很好看，就是利用的CSS来设置的，而且是webkit浏览器的。如图所示： 下面就讲解这几个属性怎么使用，代表什么意思。 一：webkit下面的CSS设置滚动条 主要有下面7个 阅读全文
posted @ 2015-09-05 17:22 风雨后见彩虹 阅读(61027) 评论(1) 推荐(4)
CSS3属性选择器与(:not)选择器
摘要：一：css3属性选择器 img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签。 还可以通过设定属性值来缩小匹配范围：如下代码： img[alt="atwi_oscar"]{ border:2px dashed #000; 阅读全文
posted @ 2015-09-05 17:06 风雨后见彩虹 阅读(20398) 评论(0) 推荐(3)
CSS属性之position讲解
摘要：postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值： position: static position: inherit position: relative position: absolute position: fixed position: stic 阅读全文
posted @ 2015-09-04 15:51 风雨后见彩虹 阅读(1687) 评论(0) 推荐(0)
网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素
摘要：一：网页中插入flash代码如下： 当然里面的很多属性可以去掉，根据具体的需求而定。 我们在网页中经常遇到播放flash，要正常播放flash就要用到OBJECT和EMBED这两个标签。鉴于火狐及IE等不同浏览器厂商的不兼容性。播放flash也不相同。 OBJECT标签：用于windows平台的IE 阅读全文
posted @ 2015-08-24 11:12 风雨后见彩虹 阅读(3922) 评论(0) 推荐(0)
CSS效果：CSS实用技巧制作三角形以及箭头效果
摘要：实现如图所示的三角形图标： html代码如下： <div class="arrow-up"></div> <div class="arrow-down"></div> <div class="arrow-left"></div> <div class="arrow-right"></div> css 阅读全文
posted @ 2015-08-24 10:17 风雨后见彩虹 阅读(1333) 评论(0) 推荐(0)
CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
摘要：媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。 先看一个简单的例子： 上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容： 1、screen：这个不用说大家都知 阅读全文
posted @ 2015-08-24 09:09 风雨后见彩虹 阅读(25455) 评论(0) 推荐(9)
EDM总结
摘要：1、 使用table 布局，align="center" 2、 尽量不要用padding-left ,padding-right 样式； 3、 CSS的浮动定位； 4、 不要用锚标记，EDM中会失效； 5、 css样式表不要使用外联式，尽量写入代码行中，不要使用滤镜和任何js脚本 6、 通常图片的高 阅读全文
posted @ 2014-05-05 08:41 风雨后见彩虹 阅读(640) 评论(0) 推荐(0)
CSS3效果：实现气泡效果
摘要：首先定义一个 先给外层的容器添加样式： 没有什么特别复杂的，主要的核心就在postion:relative，用来定位对话浮层的。我们还需要一些Mozilla和webkit的属性来完成圆角和阴影，IE8以下的浏览器看不到这些属性，只是显示一个框，不影响总体的效果。 我们现在需要创建对话浮层下面的那个三 阅读全文
posted @ 2014-04-22 17:51 风雨后见彩虹 阅读(6856) 评论(0) 推荐(0)

上一页 1 2 3 4 5