weixin_37128962的博客

原创 删除事件兼容性解决方案

原创 事件监听兼容性解决方案

封装一个函数，函数中判断浏览器的类型：

转载 移动web开发_流式布局

移动web开发流式布局1.0 移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主...

转载 移动web开发之响应式布局

移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）992~1200的中等屏幕（桌面显示器）大于1200的宽屏设备（大桌面显示器）1.2 响应式布局容器响应式需要一个父级做为布局容器，来配合子...

转载 移动web开发_rem布局

移动web开发之rem布局rem基础rem单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */html { font-size: 12px;...

转载 移动web开发_flex布局

移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.2 flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 f...

转载 HTML5CSS3_day03

day02 - 移动web开发_H5C31.1. 学习目标理解3d转换的中的3d移动，3d旋转动画属性的设置和使用animate.css动画库的使用1.1. 3D转换（变换）3d转换是改变标签在3坐标系上的位置和形状的一种技术 以下知识点最好结合 3d模型工具来理解1.1.1. 3维坐标系3维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的x轴 水平向右...

转载 HTML5CSS3_day02

day02 - 移动web开发_H5C31.1. 2D转换（变换）transform2d转换是改变标签在2维平面上的位置和形状的一种技术，先来学习2维坐标系1.1.1. 2维坐标系2维坐标系其实就是指布局的时候的坐标系 如图1.1.2. 2d移动 translate2d移动是2d转换里面的一种功能，可以改变元素在页面中的位置，类似 定位使用2d移动的步骤：给元素添加 转换属性 ...

转载 HTML5CSS3_day01笔记

day01 - 移动web开发_H5C3HTML5学习目标：​ 了解 H5 新变化​ 掌握 H5 新增语义化标签​ 掌握 H5 新增多媒体标签​ 掌握 H5 新增 input 表单、表单属性1.1. 语义化标签 了解使用语义化标签的好处是增强了代码的可阅读性，也方便了网站的seo（Search Engine Optimization，搜索引擎优化）。header 头部标签...

转载 品优购-day04笔记-品优购项目的详情页

typora-copy-images-to: media第01阶段.WEB基础：品优购-day04笔记-品优购项目的详情页一、品优购项目(四)学习目标布局 品优购项目的详情页 detail.html1、品优购详情页制作 detail.html常用单词名称说明主体de_container面包屑导航crumb_wrap产品介绍product...

转载 品优购-day03笔记-完善品优购的首页&制作列表页

typora-copy-images-to: media第01阶段.WEB基础：品优购-day03笔记-完善品优购的首页&制作列表页学习目标完善 品优购项目的首页 index.html制作 品优购项目的列表页 list.html品优购项目(三)第01阶段.WEB基础：品优购-day02笔记-品优购首页1. 品优购首页布局命名集合：名称说明...

转载 品优购-day01笔记-代码规范&品优购项目准备工作&首页初步

typora-copy-images-to: media第01阶段.WEB基础：品优购-day01笔记-代码规范&品优购项目准备工作&首页初步学习目标能会引入ico图标能简单看懂网站优化的三大标签能使用字体图标 ( 重点 )能说出我们css属性书写顺序能跟上pink老师的节奏完成品优购项目一、代码规范（重点）1. 概述欢迎使用品优购代码规范， 这是借鉴...

转载 css-day08笔记-CSS高级技巧

typora-copy-images-to: media第01阶段.WEB基础：css-day08笔记-CSS高级技巧学习目标理解能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的方法应用能写出最常见的鼠标样式能使用精灵图技术能用滑动门做导航栏案例一、CSS高级技巧1. 元素的显示与隐藏目的让一个元素在页面中消失或...

转载 css-day07笔记-CSS定位position

typora-copy-images-to: media第01阶段.WEB基础：css-day07笔记-CSS定位position一、定位(position)学习目标理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局应用能写出淘宝轮播图布局1. CSS 布局的三种机制网页布局的核心 —— 就是用 CS...

转载 css-day06笔记-学成在线网页制作&chrome调试工具&Chrome提示的常见布局错误

typora-copy-images-to: media第01阶段.WEB基础：css-day06笔记-学成在线网页制作一、学成在线页面制作目标理解能够说写单页面我们基本的流程能说出常见的css初始化语句能说出我们CSS属性书写顺序应用能利用ps切图能引入外部样式表能把psd文件转换为html页面学成在线的目的就是为了串联前面的所有知识。来一个春晚大联...

转载 css-day05笔记-清除浮动&学成网布局准备工作

typora-copy-images-to: media第01阶段.WEB基础：css-day05笔记-清除浮动&学成网布局准备工作一. 清除浮动1. 为什么要清除浮动因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了后面的标准流盒子。总结：由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响准确地说...

转载 css-day04笔记-CSS盒子模型&CSS书写规范&浮动float

typora-copy-images-to: media第01阶段.WEB基础：css-day04笔记-CSS盒子模型&CSS书写规范&浮动float一、PS基本操作以及常用快捷键因为网页美工大部分效果图都是利用ps 来做的，所以，以后我们大部分切图工作都是在ps里面完成。文件–打开 – 可以打开 我们要测量的图片ctrl+r 可以打开标尺 或者 视图...

原创 css-day03笔记-CSS三大特性&CSS盒子模型

typora-copy-images-to: media第01阶段.WEB基础：css-day03笔记-CSS三大特性&CSS盒子模型CSS-day03笔记-盒子模型CSS学习三大重点： CSS盒子模型、浮动、定位今日主题思路一、CSS三大特性学习目标理解能说出css样式冲突采取的原则能说出那些常见的样式会有继承应用能写出CSS优先级的算法能会...

原创 css-day02笔记-复合选择器&display&行高line-height&背景background

typora-copy-images-to: media第01阶段.web基础：css-day02笔记-复合选择器&display&行高line-height&背景backgroundCSS 第二天今天我们主要围绕一个 导航栏案例来学习知识点。今日重点复合选择器后代选择器（重点）子元素选择器交集选择器并集选择器（重点）链接伪类选择器（重点）...

原创 css-day01笔记-CSS初识、基础选择器、文字和文本样式

typora-copy-images-to: media第01阶段.web基础：css-day01笔记-CSS初识、基础选择器、文字和文本样式一、CSS层叠样式表学习目标理解css的目的作用css的三种引入方式应用css三种引用方式的书写通过样式规则给标签添加简单的样式1.HTML的局限性说起HTML，这其实是个非常单纯的家伙， 他只关注内容的语义，...

转载 判断位数为3的高级写法

var pattern = /^[0-9]+$/;if(pattern.test(15161563)) { //这个叫正则表达式，判断任何用户输入的数字尾数是否为3，不局限于100console.log("你输入的数字尾数是3")}//输出------你输入的数字尾数是3...

转载 html-day02笔记-表格、列表和表单

typora-copy-images-to: media第01阶段.web基础：html-day02笔记-表格、列表和表单HTML 第二天目标能够利用表格、列表和表单完成注册页面的综合案例能出说表格用来做什么的能说出列表用来做什么的能说出表单用来做什么的为了让我们页面显示的更加整齐，我们需要学习三个表（表格、表单、列表）一、表格 table(会使用)学习目标理解：...

转载 html-day01笔记-01-前言&WEB标准&认识HTML&HTML常用标签

typora-copy-images-to: media第01阶段.web基础：html-day01笔记-01-前言&WEB标准&认识HTML&HTML常用标签一、前言1. 基础班学习目标目标： 能根据psd文件（psd文件，其实就是一张类似于图片的格式，这个呢是用ps做的，也就叫做源文件）， 用HTML+CSS 布局出符合W3C规范的网页（也就是说，我们...