<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
假设我们正在开发一个可视化拖拽的搭建平台,可以拖拽生成工作台或可视化大屏,或者直接就是开发一个大屏,首先必须要考虑的一个问题就是页面如何适应屏幕,因为我们在搭建或开发时一般都会基于一个固定的宽高,但是实际的屏幕可能大小不一,接下来我们就尝试几种简单且常见的方案,并简单分析一下利弊。
本文没有什么高深的东西,就是写几个CSS样式经常遇见的东西,可能大部分都已经知道怎么解决了,当做小白文浏览就好。
将使用Bootstrap重写首页,整个案例中将使用到Bootstrap各种模块,为了方便编程,将采用拆分的原则,各个模块单独编写,最后组合。
width: 1000px; //或 max-width: 1000px; margin-left: auto; margin-right: auto; 演示地址范例
可以看到,在京东各个模块的主容器中,都设置了最大最小宽度和宽度100%,而在导航区块中,由于一行有5个小区块,所以设置了宽度为20%,使得小区块也能达到自适应的效果。
在移动端导航的功能太常见了,很多时候还需要可滑动,点击的时候还需要当前动画到中间。实现的方法很多,今天分享一个本人最近开发所用的方法。
在 iOS Safari (其他浏览器和 Android 均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:
这2个class是直接在body标签下建立一个div标签,class等于这2个中的一个。 然后其他内容全部写在这个div标签中即可! 例如:
在 H5 中,我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素(对于 REM)或视口宽度(对于 VW)的大小变化而变化,从而适应不同尺寸的屏幕。
移动端浏览器兼容性好,我们不需要考虑以前JS的兼容问题,可以放心使用原生JS书写效果,但是移动端也有自己独特的地方,比如触屏事件touch(也叫触摸事件),Android和IOS都有。
最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。
归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和center定位背景图,然后用background-size来使图片铺满,具体css如下
HTML+CSS 怎么让一个容器里面不管存在2个子元素还是1个子元素都能垂直居中 2016.06.20~2016.06.24 核心内容 弹性布局 参考答案 实例: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5学堂</title> <link rel="stylesheet" href="reset.css"> <style> .wrap { width: 500px; height: 500px
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部,瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。
分享一个基于JQuery实现的瀑布流布局,效果如下: 实现代码如下,欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Co
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。
取值:数字+px 百分比 (圆角半径)
CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比如:全屏滑动案例
相对于PC端来说,移动端设备分辨率百花齐放,千奇百怪,对于每一个开发者来说,移动端适配是我们进行移动端开发第一个需要面对的问题。
CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比如:全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。 1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站,github地址。 主要功能有: 支持鼠标滚动。 支持前后退和键盘控制。 多个回调函数。
图片懒加载就是当页面需要展示较多图片时,首先只加载显示在当前屏幕位置的图片,在页面向下滚动时,再加载其他需要显示在当前屏幕位置的图片,这样可以防止一次性对服务器发送大量请求,并可以在用户不需要完整浏览页面的情况下减少服务器资源消耗。
遮罩弹出效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见,例如:QQ空间浏览相册等。这种效果的好处就是,可以让用户聚焦到弹出的菜单中。
Bootstrap 是由 Twitter 公司开发维护的简洁、直观、强悍的前端开发 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定HTML 结构及JavaScript,快速编写功能完善的网页及常见交互效果,让web开发更迅速、简单。
如果需要将某个元素 在可以滚动元素(scroll)中设置为居中计算方法为: 需要的scrollleft + 普通居中时候的offsetLeft = 当前的scrollleft+当前元素的offsetLeft = 固定的当前元素在整个滚动条中距离左边的位置
分享一个基于JQuery实现的瀑布流布局,效果如下: 📷 实现代码如下,欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>基于JQuery实现的瀑布流布局案例</title> <style type="text/css"> * { padding: 0;
web前端 —— 移动端知识的一些总结 个人在移动端的一些总结归纳,有新的知识点会一直更新 一.css部分 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正的自适应,不加的话,假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应
position:static | relative | absolute | fixed | center | page | sticky
viewport是移动端跨屏适配的基石,吃透这一概念,任何复杂多变的适配需求,都可以手到擒来。
本文的 『推荐』 部分也别错过喔~ 因为日常开发很少使用原生的方式去做视差效果。
在IOS端,使用 position: sticky 这个属性,使用类似于 position: relative 和 position: absolute 的结合体。在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识
一、背景样式 在CSS中,背景样式包括两个方面:背景颜色、背景图片。 在Web2.0 时代,对于元素的背景样式,我们都是使用CSS属性来实现。但在Web1.0时代,都是使用background或者 bgcolor这两个HTML属性(不是CSS属性)来为元素定义背景颜色或背景图片。 1.常用背景样式属性 属性 说明 background-color 定义背景颜色。 background-image 定义背景图片地址。 background-repeat 定义背景图片重复。 background-pos
1、注释 注解:CSS中注释/*这里是注释的文字*/ HTML中注释 2、外部式css样式,写在单独的一个文件中 注解: 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码: <link href="base.css" rel="stylesheet" type="tex
> 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整
语法为:vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]);
现在手机、电脑、ipad成为了每个家庭必备内容,但是通常设计给到我们的都是一个固定大小的UI,如果用户是一个屏幕小或者大的设备,一般就会出现滚动条或者大片空白内容,为了更好的利用一些空间,或者在各种屏幕上都有一个较好的体验,出现了网页设计的概念,自适应的概念,也就是随着屏幕尺寸的不同能够适配各种内容
行内元素和块元素的区别 概念 块元素:默认独占一行,页面中垂直排列,宽高和内外边距可控 行内元素:默认同行排列,宽高由内容决定 行内元素和块元素举例 块元素:、、、 行内元素:、、、<input> 行内元素和块元素的相互转换 display:inline;将块元素转换为行内元素 display:block;将行内元素转换为块元素 display;inline-blockl;行内块元素,既有block的宽度高度特性,也有inline的同行特性02使用CSS Flexbox 构建可靠实用的网站 Header最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。03web前端学习/工作笔记(三)快捷键控制滚动条 ,注意: ① 设置父级的滚动条,给到父级div的ref值,而且父级应设置固定高度或百分比 ② 用document.getElementById(elementId)获取div不好使(div.scrollTop始终为0),原因来自① ,没选对父级id错了 ③ 两种方法: ④ _this.addShortcutsKey(‘up’, () => { _this.KaTeX parse error: Expected 'EOF', got '}' at position 100: …op-=02Web前端学习笔记之BootStrapBootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。02建议收藏!总结了 42 种前端常用布局方案对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新,实现各种布局的方式已经多得数不胜数了。03建议收藏!总结了42种前端常用布局方案对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新,实现各种布局的方式已经多得数不胜数了。032019-08-09 满屏切换vue项目中使用 vue-fullpage.js演示效果 自带引用bug.png 把Dn()函数注释掉即可.png 安装 npm install vue-fullpage.js 引用 // 引用fullpage 插件 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js'; Vue.use(VueFullPage); 在组件中使用 <full-page :options="options" ref="page"> 03【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ;02fullPage.js全屏滚动插件如果你要制作一个全屏的网页,使用这个插件在合适不过,如QQ浏览器官方网站 直接下载 使用方法 1.引入fullpage.css文件 <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"> 2.引入jq 和 fullpage.js文件 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script02BootStrap应用开发学习入门[TOC] 0x00 前言简介 什么是BootStrap? 答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产02BootStrap应用开发学习入门[TOC] 0x00 前言简介 什么是BootStrap? 答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产03扫码添加站长 进交流群领取专属 10元无门槛券手把手带您无忧上云相关资讯让div水平垂直居中的几种方法年会大屏幕滚动抽奖软件CSS杂谈最全的实现垂直居中的方法js控制浏览器滚动条到制定元素热门标签更多标签云服务器ICP备案对象存储实时音视频即时通信 IM活动推荐运营活动广告关闭领券
、
最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。
快捷键控制滚动条 ,注意: ① 设置父级的滚动条,给到父级div的ref值,而且父级应设置固定高度或百分比 ② 用document.getElementById(elementId)获取div不好使(div.scrollTop始终为0),原因来自① ,没选对父级id错了 ③ 两种方法: ④ _this.addShortcutsKey(‘up’, () => { _this.KaTeX parse error: Expected 'EOF', got '}' at position 100: …op-=
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新,实现各种布局的方式已经多得数不胜数了。
演示效果 自带引用bug.png 把Dn()函数注释掉即可.png 安装 npm install vue-fullpage.js 引用 // 引用fullpage 插件 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js'; Vue.use(VueFullPage); 在组件中使用 <full-page :options="options" ref="page">
固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ;
如果你要制作一个全屏的网页,使用这个插件在合适不过,如QQ浏览器官方网站 直接下载 使用方法 1.引入fullpage.css文件 <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"> 2.引入jq 和 fullpage.js文件 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script
[TOC] 0x00 前言简介 什么是BootStrap? 答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产
领取专属 10元无门槛券
手把手带您无忧上云