1 swiper介绍
开源、免费、强大的触摸滑动插件
简单配置即可实现手机、电脑网页大部分滑动功能,焦点图、tab、触摸导航等
比如常见轮播图就可以用这个实现
官网:https://www.swiper.com.cn/
swiper3地址:https://3.swiper.com.cn
rem布局可以等比例的缩放页面(宽高都自适应,在移动端较好),用户体验相对百分比布局可能会更好一些
1 rem定义
rem(font size of the root element)是指相对于根元素的字体大小的单位。它是一个相对单位。
em(font size of the elemen
1 浏览器的组成
用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是除了用来显示所请求页面的主窗口之外的其他部分
浏览器引擎- 用来查询及操作渲染引擎的接口
渲染引擎(浏览器内核)- 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析
1 响应式
什么是响应式布局
响应式布局(respond layout)是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端(手机、平板、pc电脑、手表) ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样:
可以看到,在滚动的过程中,会出现一条阴影:
对于两侧的列在滚动的过程中,静止不动,吸附在边界的问题,通常 CSS 使用
之前在知乎看到一个很有意思的讨论 一行代码可以做什么?
那么,一行 CSS 代码又能不能搞点事情呢?
CSS Battle
首先,这让我想到了,年初的时候沉迷的一个网站 CSS Battle 。这个网站是核心玩法就是:
官方给出一张图形,在给定的 400 x 300 的画布上,能够用越
最近在重新学习HTML,总结了一下:
HTML标题
<h1></h1>
<h2></h2>
.....
<h6></h6>
<h1> 定义最大的标题。<h6> 定义最小的标题
思路:①z-index的结构/定位元素默认的z-index②z-index单位③能不能用子元素和父元素比较④父元素没有z-index,能不能通过子元素控制他们的层级=>改变层级,父元素z-indexz-index属性的特点
默认是书写顺序在后的定位元素覆盖在顺序前的定位元素
可以使用
在上篇文章 -- 一行 CSS 代码的魅力 的最后,提到了两种快速实现水平垂直居中的方式。
当然,CSS 中实现水平垂直居中的方式很多。别看到水平垂直居中就准备右上角 x 掉,本文的重点不是罗列有多少种方式实现水平垂直居中方式,而是探讨一下常见的几种水平垂直居中的方式的利弊。
嗯哼?也就是
float元素的特点:浮动元素在一行显示!设置属性值为left时,浮动元素会依次从父级盒子的左侧向右排布,设置属性值为right时,浮动元素会依次从父级盒子的右侧向左排布浮动元素自动具有块级元素的属性浮动元素脱离文档流浮动元素内的子元素,不会继承浮动属性浮动元素下面的元素不能识别浮动元素的
三种嵌套格式:
1、内联样式 行内样式:
- 在标签内部通过style属性来设置元素的样式
- 问题:
使用内联样式,样式只能对一个标签生效,
如果希望影响到多个元素必须
安装
GitHub下载地址:https://github.com/fesiong/layarea.git
使用(html+js)
1. html部分
整个选择器需要使用一个父标签包裹,如下使用了id="area-picker",并且分别给省、市、区的select加上province-sel
1 元素的显示与隐藏
1.1 display(使用较多,配合js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单,应用广泛)
display:none 隐藏(先隐藏元素,不保留位置)
dispaly:block 除了转换成块级元素以外,还可以显示元素。
1.2 visibil
一个很有意思的题目。如何不使用 overflow: hidden 实现 overflow: hidden?
CSS 中 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。而 overflow: hidden 则会将超出容器范围内的内容剪裁。
控制 ove
url/href/src区别
1. URL
统一资源定位符 ( Uniform Resource Locator)是对可以从互联网上得到的资源的位置和访问方法的一种简洁表示,是互联网上标准资源的地址; 互联网上的每个文件都有一个唯一的 URL ,它包含的信息指出文件的位置以及浏览器应该
一:display:flex 布局
display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。
Flex是Flexible Box的缩写,意为"弹性布局
这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了?
伪代码大概是这样:
{
height: unset;
transition: all 0.3s linear;
will-change: height;
&
在大数据量场景下Vue的数据监听机制决定了让渲染性能被降低,基于Vue实现的常规树组件几乎无法胜任上万条数据的高性能渲染,在IE浏览器(即便是IE11)中很容易导致页面卡死在,这个领域ztree是当之无愧最成熟的方案。
有前辈使用了vue-giant-tree组件对Ztree进行了vue的
CSS小记
1.CSS简介
CSS(Cascading Style Sheet)层叠样式表;决定了如何显示HTML元素;由W3C创造
1. 特点
样式通常储存在样式表中
外部样式表通常存储在 css文件中
多个样式定义可层叠为一
2. 引入方式
行内式:即标签中用style标签设定css
今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思:
觉得它的风格很独特,尤其是其中一些边框。
嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样。
border 属性
谈到边框,首先会想到 border,我们最常用的莫过于 solid,d