- 博客(16)
- 收藏
- 关注
原创 92. Responsive and Fixed Navigation Menu - Responsive Web Design
1. 引用下曹刘阳写的《编写高质量代码-web前端开发修炼之道》一书中看到的一句话:position:absolute和float会隐式地改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute、 float中任意一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素以s...
2019-10-12 12:44:14 101
原创 8. 未解之谜
父子元素均设置:position:absolute子元素的宽度为自适应。由内容决定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
2019-10-08 00:04:40 113
原创 jQuery mooc学习
第2章 jQuery选择器jQuery给我们提供了大量的选择器,通过丰富的选择器我们能够更方便的对元素进行样式和动画的操作第3章 jQuery的属性与样式本章主要介绍jQuery中获取、增加、移除元素的属性;获取、添加元素的文本内容以及操作元素的样式 简介:jQuery基础课程总共分为4个部分,分别是样式篇、事件篇、动画篇、DOM篇。此为第一个部分—样式篇...
2019-10-04 10:13:52 183
原创 126.选择器参考手册,以及元素的排列方向
选择器参考手册修改box内部元素的排列方向.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); direction: rtl;}
2019-10-01 15:46:36 128
原创 CSS sercrets 杂七杂八
Chrome浏览器缩放比例25%-500% 1em本身是变量,存储当前变量尺寸。类似currentcolor以及inhert 颜色是一门功课 CSS 原理 应用 全貌 经典 难
2019-10-01 13:39:31 162
原创 124
居中的一个方法是使用父元素相对定位,子元素绝对定位,调整left, top以及transform translate(-50%, -50%);如果X方向,父元素定义为position:relative, 子元素为绝对定位,left:50%, transform: translateX(50%);;另外元素消失,可使用opacity:0;hover某个动作引起opacity为1,再...
2019-09-29 23:36:17 108
原创 74.Background 背景图片问题
1. background-position:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title>...
2019-09-29 15:11:51 129
转载 114. 3d Social Media Buttons With Awesome Hover Using Only HTML & CSS
1. 父容器设置display:inline-flex后会包裹子容器。2. div的特性div不设置height与weight情况下,占据一行。设置后,虽然不占用整行,却又换行效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...
2019-09-29 12:00:39 85
转载 154. Amazing Alert Buttons With Only HTML and CSS
1. 用<a>制作button效果,需要设置text-decoration padding display.btn{ text-decoration: none; padding: 14px 20px; display: inline-block; text-align: center; color:white; fon...
2019-09-29 11:29:18 74
转载 94. Folded Box - Only By Using HTML & CSS
.test{ width: 100px; height:100px; background: deepskyblue; border-color:black; border-width:40px;; border-style: solid; border-color: #c0392b yellowgreen;}Border ...
2019-09-29 10:34:17 86
转载 130. 6 Awesome Css Filters For Images You Should Know
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2019-09-28 12:29:55 72
转载 120. 居中(DarkCode与CSS Secrets)
1. Text Align对象:行内元素, div内文字,匿名容器(没有被标签包裹的文本节点)效果:水平居中方法:对其父元素引用text-align<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor...
2019-09-28 11:35:51 100
转载 106. 行内标签span 设置position:absolute 变为inline-block 可设置宽高
发现问题过程:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
2019-09-19 12:55:30 548
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人