Web前端基础+移动端开发
文章平均质量分 94
HTML、CSS、移动端开发
YuLong~W
这个作者很懒,什么都没留下…
展开
-
移动端、PC端 网页特效
文章目录PC端网页特效偏移量系列 offset可视区系列 client滚动系列 scrollPC端网页特效偏移量系列 offsetoffset 翻译过来就是偏移量, 使用 offset 系列相关属性可以 动态 的得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意: 返回的数值都不带单位常用属性:图示:offset与style区别:offsetstyle可以得到任意样式表中的样式值只能得到行内样式表中的样式值原创 2021-10-10 13:57:39 · 5669 阅读 · 6 评论 -
移动端Web开发 流式布局、flex布局、rem布局
文章目录移动端Web开发流式布局flex布局布局原理常用属性rem布局rem基础媒体查询less移动端Web开发流式布局在PC端进行网页制作时,经常使用固定像素的网页布局,但这种布局方式对小屏幕的设备不友好。为了适应小屏幕的设备,在移动设备和跨平台(响应式)网页开发过程中,多数使用流式布局。流式布局是一种等比例缩放布局方式,在CSS代码中使用百分比来设置宽度,所以也称百分比自适应布局。流式布局实现方法是,将CSS固定像素宽度换算为百分比宽度,其换算公式如下:目标元素宽度 / 父盒子宽度 = 百分数原创 2021-09-30 21:17:35 · 1660 阅读 · 2 评论 -
移动端Web开发 响应式布局及Bootstrap框架使用
文章目录BootstrapBootstrapBootstrap 是一款非常优秀的Web前端框架,其灵活性和可扩展性加速了响应式页面开发的进程。Bootstrap遵循移动优先的原则,在开源之后迅速受到开发人员的追捧,推动了响应式技术的发展Bootstrap 来自 Twitter(推特),是目前最受欢迎的前端框架之一。是一个基于 HTML、CSS和JavaScript 语言编写的框架,具有简单、灵活的特性,拥有样式库、组件和插件Bootstrap常用来 开发响应式布局和移动设备优先的Web项目,能够原创 2021-10-04 21:38:25 · 1146 阅读 · 2 评论 -
移动端Web开发 基础知识
文章目录移动端Web开发移动端基础浏览器视口样式编写分辨率和设备像素比二倍图SVG矢量图移动端Web开发移动Web开发的两种主流方案,一种是单独制作移动端页面,另一种是制作响应式页面移动端页面:单独制作移动端页面的优势和劣势:单独制作移动端页面,通常的做法是不改变原有的PC端页面,然后针对移动端单独开发出一套特定的版本。如果是移动设备(iPhone 6/7/8 Plus),则跳转到移动端页面如果是PC端设备,则跳转到PC端页面响应式页面:响应式页面指的是同一页面在不同屏幕尺寸下实现原创 2021-09-26 19:05:35 · 5073 阅读 · 4 评论 -
HTML5新特性、CSS3新特性
文章目录HTML5新特性新增语义化标签新增多媒体标签视频标签音频标签多媒体标签总结新增input类型新增表单属性CSS3新特性属性选择器结构伪类选择器伪元素选择器HTML5新特性HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性新增语义化标签<header>:头部标签<nav>:导航标签<article>:原创 2021-05-27 20:44:17 · 515 阅读 · 4 评论 -
CSS3 高级应用(过渡、变形、动画)、滤镜、精灵图、字体图标、CSS初始化、及相关技巧等
文章目录CSS3高级应用过渡变形动画多媒体嵌入图像视频音频CSS3高级应用在传统的Web设计中,当网页中需要显示动画或特效时,需要使用JavaScript脚本或者Flash来实现。在CSS3中,提供了对动画的强大支持,可以实现旋转、缩放、移动和过渡等效果。过渡属性描述属性值transition-property用于指定过渡效果①none ②all ③prpperty(定义多个名称用逗号分隔)transition-duration用于指定过渡的持续时间s/ms原创 2021-04-29 11:41:08 · 1898 阅读 · 4 评论 -
DIV+CSS布局概述、属性(浮动、定位等)、布局类型、常见布局技巧
文章目录布局概述网页布局目的和思想页面元素定位机制布局常用属性浮动属性(float)清除属性(clear)定位属性(position)溢出属性(overflow)层叠属性(Z-index)布局类型常见类型单列布局双列布局三列布局通栏布局HTML5中语义标签命名规范布局概述DIV+CSS布局:网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称网页布局目的和思想目的:使页面结构清晰、有条理、易读思想:确定"版心":页面主体内容所在位置 (通常在页面中水平居中)分析页面中原创 2021-04-20 01:00:21 · 12954 阅读 · 7 评论 -
CSS 盒子模型及相关属性、元素类型转换及CSS3新增盒子属性
文章目录盒子模型认识盒子模型盒子模型的相关属性边框属性外边距属性内边距属性背景属性CSS3新增盒子模型属性元素类型转换块级元素行内元素div和span标签元素类型转换盒子模型认识盒子模型盒子模型:网页布局的基础一个盒子可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)、content(内容)。margin、border、padding是CSS属性,因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。盒子的大小:盒子的总原创 2021-04-19 19:27:21 · 2284 阅读 · 2 评论 -
CSS使用、属性、选择器(基础、属性、关系、后代、伪类选择器等)、三大特性(层叠性、继承性、优先级)
文章目录CSS内容CSS功能CSS的使用样式规则特性CSS属性颜色表示方式尺寸表示方式图像表示方式文本样式属性列表样式规则CSS选择器(核心)基本选择器属性选择器复合选择器关系选择器伪类选择器CSS优先级:要看选择器的权重CSS内容CSS功能CSS:可叫作层叠样式表 用于结构和表现分离HTML只负责展示内容,搭建网页的基本结构,所有样式都由CSS来进行设置CSS的使用应用CSS的方法页面嵌入式:<style type="text/css"> CSS的样式规则</st原创 2021-04-13 21:57:13 · 971 阅读 · 2 评论 -
HTML基础之列表标签、表格标签、表单标签
文章目录表格标签表单标签表格标签表格含义:表格是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table></table> 表格<tr></tr> 行<td></td> 单元格<th></th> 列标题<caption></caption> 表原创 2021-04-10 22:42:01 · 435 阅读 · 2 评论 -
HTML基础之简介、结构、常见标签
文章目录HTML、CSS、JavaScript的关系HTML标签标签的结构标签的类型常用标签标题标签段落标签换行标签水平分割线标签字体标签文本格式化标签图像标签超链接标签特殊字符下标标签语义标签文本语义标签背景标签滚动标签列表标签无序列表有序列表项目列表(自定义列表)列表标签的嵌套HTML、CSS、JavaScript的关系HTML 用于构建网页结构,展示页面内容CSS 用于美化网页,布局页面JavaScript 用于控制页面元素,与后端数据交互HTML标签标签的结构<!DOCTYP原创 2021-04-10 21:51:01 · 839 阅读 · 10 评论