- 博客(16)
- 收藏
- 关注
RSS订阅原创 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
141
原创 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
162
原创 jQuery mooc学习
第2章 jQuery选择器 jQuery给我们提供了大量的选择器，通过丰富的选择器我们能够更方便的对元素进行样式和动画的操作 第3章 jQuery的属性与样式 本章主要介绍jQuery中获取、增加、移除元素的属性；获取、添加元素的文本内容以及操作元素的样式 简介：jQuery基础课程总共分为4个部分，分别是样式篇、事件篇、动画篇、DOM篇。此为第一个部分—样式篇...
2019-10-04 10:13:52
229
原创 126.选择器参考手册，以及元素的排列方向
选择器参考手册 修改box内部元素的排列方向 .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); direction: rtl; }
2019-10-01 15:46:36
165
原创 CSS sercrets 杂七杂八
Chrome浏览器缩放比例25%-500% 1em本身是变量，存储当前变量尺寸。类似currentcolor以及inhert 颜色是一门功课 CSS 原理 应用 全貌 经典 难
2019-10-01 13:39:31
205
原创 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
146
原创 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
182
转载 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
119
转载 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
116
转载 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
132
转载 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
105
转载 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
133
转载 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
644
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人