CSS3
文章平均质量分 64
秋天1014童话
坚持就是胜利,珍惜当下,珍惜学习的机会!!
展开
-
margin相对的元素
margin相对的元素在不同的情况下有所不同:如果父元素在子元素的margin的同向上有padding或border的话,子元素的margin相对于父元素,否则相对于父元素以外的元素。我们还是看例子吧:margin .parent{width: 300px;line-height: 1.8;} .sam转载 2015-06-15 09:37:04 · 2034 阅读 · 0 评论 -
IE下bug
IE6下不能定义1px高度的容器(1)触发的条件—定义一个div,将容器的高度设置成1px (2) 编码得到的结果—在IE6浏览器中,容器的高度不是1px 而是18px (3)出现问题的原因—是因为IE6浏览器下默认的行高 (4)解决的方法—添加属性 line-height:1px overflow:hidden; (可有可无的 属性 zoom:1;)关于IE6双倍边距bug解决原创 2017-07-11 21:43:07 · 371 阅读 · 0 评论 -
margin到底相对谁?
margin垂直方向上存在以下问题:外边距合并现象 如果两个div上下排列,给上面div设置margin-bottom,给下面div设置margin-top,那么两个margin会发生合并现象,会取较大的margin值。注意:左右不会发生 外边距合并现象上下塌陷现象 一个大盒子 中包含一个小盒子,给小盒子设置一个margin-top,大盒子会一起向下平移。注意:margin左右没有塌陷现原创 2016-09-09 17:26:23 · 6110 阅读 · 0 评论 -
css习题集锦
1、css中clear的作用是什么?答案:指明该元素周围不可出现浮动元素。 clear : none | left | right | both. 对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。原创 2016-11-01 21:51:46 · 575 阅读 · 0 评论 -
箭头小三角(向上或向下、两条边)--两种制作方法
网站中不论是导航还是下拉,往往有些小三角,制作方式有几下几种:方法一 主要思想:使用一个矩形,盖住一个菱形的上半部分,则显示下三角;盖住下半部分,则显示上三角。主要代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小三角</title> <meta content="主要思想原创 2016-11-08 22:22:19 · 10713 阅读 · 0 评论 -
实体小三角-制作方法
实体小三角-制作方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>易迅网三角</title> <link rel="shortcut icon" href="favicon.ico"> <style> div.test{ width:原创 2016-11-08 22:25:29 · 518 阅读 · 0 评论 -
清除浮动的几个方法
清除浮动的几个方法:方法一(推荐):.clearfix:before,.clearfix:after{ content:" "; display:table;}.clearfix:after{ clear:both;}.clearfix{ *zoom:1;}方法二:.clearfix:after{ content: "";原创 2016-11-09 20:26:30 · 205 阅读 · 0 评论 -
高度坍塌问题--BFC模式解析
问题引起是2016IFE春季问题的任务三,总的父元素parent包含三个浮动的子元素,容器的高度不能自动伸长以适应内容的高度,出现了高度坍塌问题。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高度坍塌问题-BFC模式解析</title> <style> .parent转载 2016-11-10 14:23:04 · 3288 阅读 · 0 评论 -
js-封装自己的class类
封装自己的class类,对于高版本浏览器,支持document.getElementsByClassName,对于IE678,不支持的情况要进行处理。首先判断是否支持,不支持再进行如下处理。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style原创 2016-11-23 19:56:32 · 2211 阅读 · 0 评论 -
两个并排的div之间有间隔问题
问题描述1:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>两个并排的div之间有空隔</title> <style> *{ margin:0; padding:0; } div{原创 2016-09-12 22:15:43 · 20632 阅读 · 1 评论 -
jquery设置css样式的多种方法
设置css样式的多种方法,jquery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head><body> <ul> <li>兄弟多个1</li> <li原创 2017-02-07 13:44:49 · 736 阅读 · 0 评论 -
网站侧边功能导航栏--屏幕滚动效果
屏幕滚动效果:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul,ol { list-style-type: none; } * {margin:0;padding:0;}原创 2016-12-13 18:03:33 · 2327 阅读 · 1 评论 -
getComputedStyle方法与currentStyle属性获取元素样式
1、getComputedStylegetComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值(计算之后的最终结果,如2em计算后的结果。此外,即使没有CSS代码,也会把默认的祖宗八代都显示出来)。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。/* 语法 */var style = window.getComputedSty原创 2017-08-10 17:43:14 · 1255 阅读 · 0 评论 -
css sticky footer布局+流式布局
css sticky footer布局参考地址:张鑫旭老师-css sticky footer布局 结合项目具体场景给出介绍:点击信息,弹出浮层,显示详细信息。浮层最下面有个关闭按钮,一直处在底部,当内容未撑开一页大小时,关闭按钮处在页面最底端。当内容撑开超出一页的大小时,底部内容向下推送。方法一:min-height+ padding-bottom + margin-top布局核心框架: 核心原创 2017-06-06 10:35:35 · 2634 阅读 · 0 评论 -
css-href与src的区别
href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。例如:<link href="style.css" rel="stylesheet" />浏览器会识别该文档为css文档,并行下载该文档,并且不会停止对当前文档的处理。这也是建议使用link,而不采用@import加载css的原因。 src是source的缩写,src的内原创 2017-07-11 20:51:37 · 778 阅读 · 0 评论 -
实现一个自适应布局 两列布局
实现一个自适应布局--网易课堂代码如下: css-布局-自适应布局 html,body{margin:0; padding:0; text-align:center;} .side{background-color:red;} .main{background-color:blue;} html,body{height:100%;} /*方法一*/原创 2015-06-13 15:03:52 · 818 阅读 · 0 评论 -
css思维导图
css思维导图转:http://www.cnblogs.com/qiuchen/p/4573055.html转载 2015-06-15 09:07:58 · 1470 阅读 · 0 评论 -
实现一个弹窗
css-布局-弹窗html,body{margin:0;padding:0;width:100%;height:100%;}.backLayer{width:100%;height:2000px;}.popup{position:fixed; top:50%; left:50%;transform:translate(-50%,-50%);width:300px;原创 2015-06-15 10:10:42 · 709 阅读 · 0 评论 -
仿淘宝层级
实现几个并排div,边框合并问题,鼠标hover,边框变亮<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> /* .test { width: 150px; height: 300px;原创 2016-11-17 17:30:09 · 418 阅读 · 0 评论 -
输入框--仿placeholder,oninput检测用户输入事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .search{ width: 300px; height: 30px; margin: 100px原创 2016-11-18 19:54:43 · 833 阅读 · 0 评论 -
把多余文字转化为省略号
怎么把多余文字转化为省略号? 先看看最简单的,利用 text-overflow:ellipsis 实现单行文本溢出显示省略号效果1 overflow: hidden;2 text-overflow: ellipsis;//clip|ellipsis3white-space: nowrap;效果如下:所有主流浏览器都原创 2016-12-30 20:29:58 · 1567 阅读 · 0 评论 -
左右轮播图-酷炫
html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta keyword="左右轮播图-效果比较好"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/css.css">原创 2017-01-17 13:50:37 · 684 阅读 · 0 评论 -
旋转木马-轮播
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl原创 2017-01-17 15:59:35 · 611 阅读 · 0 评论 -
单行文本和多行文本--文字溢出
单行文本和多行文本–文字溢出:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文本换行</title> <style> .text{ width: 200px; border: 1px solid red;原创 2017-02-20 19:11:23 · 1690 阅读 · 0 评论 -
使用css3图形描绘
css描绘各种图形:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 边框</title> <style> body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 { margin: 0;原创 2017-02-20 18:00:33 · 885 阅读 · 0 评论 -
stylus使用再升级
1、一些使用技巧常常在一些很常见的场景中使用,比如插值,常在做浏览器兼容性处理时使用。还是要做一些总结。 stylus中文版参考文档:http://www.zhangxinxu.com/jq/stylus/selectors.php 基本使用方法: https://segmentfault.com/a/1190000002712872#articleHeader15原创 2017-06-09 10:13:28 · 486 阅读 · 0 评论 -
包含块
前端技术研究一:包含块 给一个div设置它的宽度为100px,然后再设置它的padding-top为20%。问:现在这个div有多高?.inner{ position: absolute; width: 100px; padding-top: 20%;}.mid{ width: 200px;}.wrap{ position:原创 2017-03-03 10:24:39 · 1934 阅读 · 1 评论