CSS
天地之大
保持学习的态度!
展开
-
CSS—页面添加
1. 内联式:即直接加在标签上的样式,如 2. 导入样式:@import url("css/style.css")3. 嵌入式:即用.classname{width:200px;}标签括起来写在页面中的样式4. 外部引用:即将样式单独放在一个文件中,然后用link标签引入页面的形式:原创 2016-09-29 09:58:17 · 263 阅读 · 0 评论 -
CSS—单位是怎么回事
彻底弄懂css中单位px和em,rem的区别国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点1. IE无法调整那些使用px作为单位的字体大小;2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;3. Firefox能够调整px转载 2016-08-05 21:38:32 · 181 阅读 · 0 评论 -
CSS—垂直居中
为了即将可能的面试,看了一下怎么使得DIV水平和垂直居中,实验了很多方法,比较通用的一个,如下,外层DIV的display: table,内层DIV的display:table-cell ; vertival-align: middle; text-align:center,然后内部是文字或者图片都可实现水平和垂直居中。 #wrapper { display:原创 2016-09-01 14:31:51 · 163 阅读 · 0 评论 -
一个DOM产生箭头
.triangle1{width:10px;height: 10px;border:1px solid black;border-top:none;border-right: none;transform: rotate(45deg);-ms-transform:rotate(45deg); /* IE*/-moz-transform:rotate(45px)原创 2016-11-07 18:12:13 · 407 阅读 · 0 评论 -
纯CSS保证两个DIV高度一样
对我逝去的几场面试,抱有缺憾,只能更加努力准备。要有梦想,一定可以找到,加油!两个并列的div设置他们高度相等: pdjdnnnnnnnnnnpdjdnnnnnnnnnnpdjdnnnnnnnnnnpdjdnnnnnnnnnn right css:.wrap{overflow:hidden;}.left{widt原创 2016-10-28 16:24:33 · 1760 阅读 · 0 评论 -
纯CSS重构table表格使之响应式适应移动端
由于手机屏幕空间有限,太大的表格很难友好显示,本文介绍一种使用纯CSS实现响应式表格的方法,可以比较完美的在手机端显示。在屏幕空间充足的情况下,我们可以将表格的每列都完全显式在屏幕上,但在手机下,每列内容会拥挤不堪,甚至出现横向滚动条,用户快速了解每条项目基本情况的效率会大打折扣。一种优化方法是:使用media转载 2016-10-28 17:23:23 · 13344 阅读 · 0 评论 -
CSS3—nth-child()和nth-of-type()
CSS3選擇器「:nth-child()」與「:nth-of-type()」用法大不同CSS, CSS3, 網頁設計 | 2014/07/17 雖然說目前CSS3還沒正式的標準化,但新的屬性已為網頁帶來許多的便利,像是大家所熟悉的圓角框、陰影、漸層、多欄位....,甚至目前正夯的RWD自適應,這些都是需要使用到CSS3,除此之外CSS3還提供了許多的選擇器可使转载 2016-11-01 13:42:51 · 358 阅读 · 0 评论 -
CSS3—animation参数
转自:http://www.tangbc.com/blog/#frontends/215CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点。animation基本用法是:animation: name keeping-time animat转载 2016-11-12 19:45:06 · 2220 阅读 · 0 评论 -
CSS—实现页面的水平垂直居中,只是页面
面试被问到居中的问题,当时说了一下,被泼了很大一盆冷水,面试官竟然很不屑听见我的回答。有点气愤,只是面试而已,何必为难我呢?1.实现水平居中 margin:0 auto;.wrap{width:200px;height:200px;margin:0 auto;}2.实现页面的水平垂直居中.wrap{width:300px;height:200px;position:abso原创 2016-10-27 21:13:04 · 267 阅读 · 0 评论 -
CSS—display取值
display取值:inline block inline-block比较(1)inline 内联元素,不会占据一整行。(2)block 块级元素,会占据一整行(3)inline-block 行内块级元素,不会占据一整行,但是可以对该元素添加宽度,高度等。原创 2016-10-25 10:29:34 · 443 阅读 · 0 评论 -
CSS—左边固定,右边自适应
left right// 左边浮动,右边margin-left#left{float:left;width:200px;background-color:red;}#right{background-color:green;margin-left: 200px;}原创 2016-10-09 20:32:52 · 433 阅读 · 0 评论 -
CSS—实现悬浮层
#nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }ddd原创 2016-08-03 18:44:44 · 1845 阅读 · 0 评论 -
CSS—占据全屏并且没有滚动条
hhhhhhhvar width = window.innerWidth;var height = window.innerHeight;var container = document.getElementById("container");console.log(width);console.log(height);container.style.width原创 2016-08-03 18:59:28 · 1420 阅读 · 0 评论 -
CSS—漂亮的背景色
漂亮的背景色 CSS 文件:.template-content { padding: 50px; margin-bottom: 40px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2),inset 0 0 50px rgba(0, 0, 0, 0.1); background-color: #ffffff;原创 2016-08-04 16:11:58 · 572 阅读 · 0 评论 -
CSS—组合选择器
在网页中有多个table,如有table1、table2 只想修改某个table的td,怎么办呢?设置table1 的 id="myTable"(也可以设置class="myTable"),在css中组合选择器:#myTable td{width:200px;}原创 2016-08-05 21:27:43 · 276 阅读 · 0 评论 -
CSS—position
原文:http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html转载 2016-08-07 18:54:45 · 176 阅读 · 0 评论 -
CSS—盒子模型
在网页之中,每一个元素都是由四部分组成的,从内到外分别是:content 指的就是具体内容,比如说,文字,图片等等paddingborder 元素的边界,这个你应该很熟悉margin转载 2016-08-06 19:30:46 · 201 阅读 · 0 评论 -
CSS—消除浮动
方法1:#test{ clear: both;}test为浮动元素的下一个兄弟元素。方法2:#test{ display:block; height:固定值; overflow:hidden}#test 是只包裹浮动元素的父元素原创 2016-09-01 16:59:37 · 170 阅读 · 0 评论 -
CSS—Tooltip
两种样式:样式1:实心tooltip样式2:空心tooptip比较全面的分析博客转自:http://www.cnblogs.com/daxiong/articles/3158630.html .tooltip { position: relative; display: inline-block; border-bottom:原创 2016-09-06 16:45:07 · 369 阅读 · 0 评论 -
CSS—表格出现滚动条
overflow: visible; hiddenscroll;auto;inherit;来自:http://www.w3school.com.cn/cssref/pr_pos_overflow.aspTable显示滚动条Table显示滚动条,要先把table放到一个div中,div的长度和宽度要固定,控制overflow属性为scroll转载 2016-11-02 17:15:24 · 1542 阅读 · 0 评论