body {background-color: #c3c3c3}

09 2018 档案

摘要:1.transform: translateY(100px); 但是transform在单独使用的时候并不会产生动画效果,页面加载的时候就已经在变化后的状态了,所以需要搭配transition使用,产生动画效果。这种需要hover 给他一个事件 才会发生这个动作 使用方法: .a:hover{ tr 阅读全文
posted @ 2018-09-27 16:48 最美胡萝卜 阅读(1343) 评论(0) 推荐(0) 编辑
摘要:. 阅读全文
posted @ 2018-09-27 13:40 最美胡萝卜 阅读(287) 评论(0) 推荐(0) 编辑
摘要:简单归纳整整如下: alert(typeof i) ;用来查询数据类型 console.log(i); 用来调试 1.数字类型Number var i=0; 2..字符串类型String var i=' abc '; alert(i.length); 获取长度(空格也算); alert(i.char 阅读全文
posted @ 2018-09-26 10:04 最美胡萝卜 阅读(249) 评论(0) 推荐(0) 编辑
摘要:hover用法: 必须-移入父级操作子级 也可以移入自己操作自己 1.对自身作用 2.对自身的子集作用 3.对兄弟元素的作用 阅读全文
posted @ 2018-09-25 15:23 最美胡萝卜 阅读(2525) 评论(0) 推荐(0) 编辑
摘要:这边由于工作关系 需要用到 同一套网页的主体内容 content 建立到 pc端和移动端,除了头尾不同之外 其他全部相同基本思路如下: 固定定位 和百分比 先建立pc端内容》》在建立移动端1.pc端用百分比布局 碰到固定定位的时候,根据父级的位置和大小 来固定定位(此时父级必须 是一个固定不变的内容 阅读全文
posted @ 2018-09-20 11:08 最美胡萝卜 阅读(1417) 评论(0) 推荐(0) 编辑
摘要:移动端开发的过程中,当用户连接某个文字 跳转时候 出现 高亮一块,这样很影响用户体验,我们可以吧颜色设置为透明 或者自己需要的颜色 注意微信目前版本浏览器不支持 大部分浏览器兼容 阅读全文
posted @ 2018-09-19 11:31 最美胡萝卜 阅读(1908) 评论(0) 推荐(0) 编辑
摘要:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 宽度等于设备宽度 缩放比例1 最小1 最大1 阅读全文
posted @ 2018-09-18 17:35 最美胡萝卜 阅读(254) 评论(0) 推荐(0) 编辑
摘要:<link rel="stylesheet" type="text/css" href="600.css" media="screen and (max-width: 600px)"> 屏幕自适应 调取css 阅读全文
posted @ 2018-09-17 21:45 最美胡萝卜 阅读(764) 评论(0) 推荐(0) 编辑
摘要:表示 当屏幕 最小值是600时(表示大于600) 执行后面的语句 表示 当屏幕 最小值是800时(表示大于800) 执行后面的语句 总结:1.代码由上到下执行 当t判断条件是 min-width: 时,小的写上面 大的写在下面, max-width 大的上面 小的写下面 2.@media (min- 阅读全文
posted @ 2018-09-17 20:44 最美胡萝卜 阅读(457) 评论(0) 推荐(0) 编辑
摘要:父级{ 1. display: -webkit-flex; 声明弹性盒模型 2. flex-flow 复合写法 ( flex-flow:row wrap;) 2. flex-direction;决定子集标签的排列方向 row 从左到右,row-reverse 从右到左, column 垂直方向,co 阅读全文
posted @ 2018-09-17 11:00 最美胡萝卜 阅读(102) 评论(0) 推荐(0) 编辑
摘要:在a标签设置 height:0px ;padding-top:100px;overflow:hidden;这样a标签的文字就被这个padding顶到容器之外了,溢出隐藏,当css无法加载,文字就上去了。详情见淘宝logo 的 demo 阅读全文
posted @ 2018-09-15 10:38 最美胡萝卜 阅读(179) 评论(0) 推荐(0) 编辑
摘要:nth-child()和nth-of-type区别 1 .c p:nth-child(2):在C这个类下,找某个父元素下的第2个子元素,看是否是p 如果是,p元素身上加样式,不是表示失效【如果C 下面有多个子孙,挨个寻找 ,可以命中多个子孙的子元素】 2 .c p:nth-of-type (2):与 阅读全文
posted @ 2018-09-14 15:17 最美胡萝卜 阅读(190) 评论(0) 推荐(0) 编辑
摘要:方案一:div{font-size:0};方案二:img{ display:block};方案三:img{vertical-align:top;}方案四:div{ margin-bottom:-3px }; 1.为什么img标签上下会有间隙?。 根本原因在于img标签为inline元素,该元素默认垂 阅读全文
posted @ 2018-09-12 15:38 最美胡萝卜 阅读(136) 评论(0) 推荐(0) 编辑
摘要:淘宝首页 每个li长短不一,如何鼠标经过让弹出的头像居中呢,方法如下: li 相对定位 li:before 使用绝对定位: position: absolute;top: -15px; 头像上来left: 50%; 便宜左边50%margin-left: -13px; 减去自身的宽度一半 阅读全文
posted @ 2018-09-11 11:31 最美胡萝卜 阅读(128) 评论(0) 推荐(0) 编辑
摘要:水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中。 margin:0 auto —— 这是针对块元素的水平居中方法 垂直居中的常用方式: vertical-align: middle;——这个垂直居中属性,只对 inline 或者 inline-bl 阅读全文
posted @ 2018-09-07 16:50 最美胡萝卜 阅读(249) 评论(0) 推荐(0) 编辑
摘要:transform:动画 在元素上各种方向偏移,而position 适用布局而来 position 是为页面布局而生的。 transform 是为动画而生的。 A.transform 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta char 阅读全文
posted @ 2018-09-07 14:31 最美胡萝卜 阅读(378) 评论(0) 推荐(0) 编辑
摘要:z-index 在w3cschool介绍 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释:元素可拥有负的 z-index 属性值。 注释:Z-index 仅能在定位元素上奏效(例如 position:absolute,relative,fix 阅读全文
posted @ 2018-09-07 13:45 最美胡萝卜 阅读(407) 评论(0) 推荐(0) 编辑

body {background-color: #c3c3c3}
点击右上角即可分享
微信分享提示