css
文章平均质量分 53
Zjyyyy95
这个作者很懒,什么都没留下…
展开
-
text悬停改变背景颜色(选择器)
利用无序列表的结构创建了五个text文本框和一个按钮,鼠标悬停text文本框的背景颜色会改变,选择器使用了伪类选择器:hover和属性选择器。 formTextHover input[type="text"]:hover{ background:#D4E6ED; }原创 2016-03-20 21:40:57 · 792 阅读 · 0 评论 -
img 'vertical-align:middle;'
img{ vertical-align:middle;}意为设置图片与其它同级行内元素middle对齐例子如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> img{原创 2016-06-06 00:59:02 · 1266 阅读 · 0 评论 -
'border:none' or 'border:0'
去除img的边框border:none;border:0;有什么区别?具体问题和答案见下,我总结一下答案 http://stackoverflow.com/questions/2922909/should-i-use-border-none-or-border-0img{ border:0; //等同于 border-width:0; border:none; //等用于原创 2016-06-05 21:55:36 · 399 阅读 · 0 评论 -
块级元素垂直居中
文档流中div{ margin:0 auto;}绝对定位或固定定位后div{ position: absolute; width: 400px; left: 50%; margin-left: -200px; /*此处的负值是宽度的一半*/}js方法如下$('#box').css('left' , ($(window).width() -$('#b原创 2016-06-24 13:25:12 · 430 阅读 · 0 评论 -
简单的CSS图片动画(鼠标悬浮效果)
效果如下: 素材:一张宽 400px , 高 250px 的图片,一个宽 200px , 高 125px块级容器 原理:设置块级容器的background-image + animation设置帧动画 + 鼠标hover实现代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Docu原创 2016-04-22 21:17:14 · 6512 阅读 · 0 评论 -
关于导航栏
1.用ul和li的结构,在li中嵌套a标签 首页 新闻 动态 帮助 2.竖向:设置display的值为block 横向:inline-block(横向),这样做是为了使行内元素a变为块级元素从而设置其的高度和宽度,宽度也决定了每个导航链 接的间距3.设置ul中的li向左浮动,如果有父级包含块的问题,记住在父级包含块中设置overflo原创 2016-03-27 22:43:01 · 391 阅读 · 0 评论 -
基本图片与文字布局(浮动,包含块)
正常流中:1.块级元素( ...):换行,独自占一行显示,就算有足够的空间并排,也会在下一行显示,可以设置width宽度2.行内元素( ...):若有足够的空间并排,就会并排显示3.定位为relative仍在流中脱离正常流:1.设置宽度width并浮动2.定位为absolute 或 fixed浮动父级元素:错误原因:规定若父级包含块的元素都是浮动元素,原创 2016-03-22 09:59:21 · 4512 阅读 · 1 评论 -
总体布局积累(3列)
关键:1.根包含块:固定宽度width,并设置左右外边距为auto2.3列块级元素:全部向左浮动,流式布局用%设置宽度,并根据情况设置外边距效果:大于根包含块固定宽度自动居中,小于根包含块布局不会缩放 Document .left,.middle,.right{ float: left; width: 30%; height:500px; mar原创 2016-03-22 22:46:15 · 347 阅读 · 0 评论 -
二级菜单总结
原理:在一个列表的列表项中嵌入另一个(第二级)列表代码 Document *{ margin: 0; padding: 0; } ul li{float: left;list-style: none;}.secNav li{float: none;}ul.secNav{display: none;}.secNav a{b原创 2016-03-31 12:33:33 · 561 阅读 · 0 评论 -
按钮式链接
1..a{ display:block; }将链接从行内元素转换为块级元素,从而可以设置宽高度和背景2.大多数浏览器的默认字号是16像素,所以6.6em=16*6.6=105.6px同时1.4em=22.4px3..a{ /* ...*/ height: 1.4em; line-height: 1.4em; }将height原创 2016-03-25 00:06:46 · 823 阅读 · 0 评论 -
IE兼容
在项目中遇到的IE兼容问题,度娘后庆幸早已有许多大神做了总结,我在这里收集了一些链接,方便随时查看IE6,IE7上设置body{overflow:hidden;}失效BugCSS: IE中的BUG之margin-bottom失效CSS 多浏览器兼容性问题及解决方案IE7 z-indexIE7 float:right 出错转载 2016-06-24 13:11:55 · 325 阅读 · 0 评论