12 2021 档案
摘要：@ 1. 移动端布局主流方案 1.) 单独制作移动端页面（主流） 通常情况下，网址域名前面加 m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。 也就是说，PC端和移动端为两套网站，pc端是pc端的样式，移动端再写一套，专门针对移动端适配的一套网站 京东pc端 京
阅读全文
摘要：@ 1. 物理像素&物理像素比 物理像素指的是屏幕分辨率，物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750*1334 我们开发时候的1px(css像素) 不是一定等于1个物理像素的，一个px（css像素）的能显示的物理像素点的个数，称为物理像素
阅读全文
摘要：@ 1. 视口简介 视口(viewport) 就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 2. 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS, Android基本都将这个
阅读全文
摘要：@ 1. 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器等 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器等 国内的UC和QQ，百度
阅读全文
摘要：@ 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 尤其是移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术就是字体图标（i
阅读全文
摘要：@ 1. 维护 css 的弊端 CSS 是一门非程序式语言，没有变量、函数、 SCOPE（作用域）等概念。 CSS 需要书写大量看似没有逻辑的代码， CSS 冗余度是比较高的。 不方便维护及扩展，不利于复用。 CSS 没有很好的计算能力 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写
阅读全文
摘要：@ CSS 媒体类型 CSS3 多媒体查询 1. 什么是媒体查询 媒体查询（Media Query）是CSS3新语法。 使用 @media查询，可以针对不同的媒体类型定义不同的样式 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询 2. 媒体查询语法规范 用 @media开头
阅读全文
摘要：浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。padding 和 border 不会撑大盒子 ①私有前缀 -moz-：代表 firefox 浏览器私有属性 -ms-：代表 ie 浏览器私有属性 -webkit-：代表 safari、 chrome 私有属性 -o-：代表 Oper
阅读全文
摘要：@ 1. 传统盒子模型 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding 通过样式box-sizing: content-box;指定盒子的模型（默认） <style> div { /* 传统盒子模型= width + border + padding
阅读全文
摘要：@ 1. 简介 转换(transform)：是CSS3的特征之一，可以实现元素的位移、旋转，缩放等效果。可理解为“变形”。 移动： translate 旋转： rotate 缩放： scale 2. 2D转换 1.) 二维平面坐标系 2D 转换是改变标签在二维平面上的位置和形状的一种技术。 二维坐标
阅读全文
摘要：@ ① 什么是动画 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果 ② 动画的基本使用 先定义动画 在调用定义好的动画 ③ 定义动画 用keyframes 定义动画（类似定义类选择器） @keyframes 动画名称 { 0% { w
阅读全文
摘要：@ 1. 简介 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画： 是从一个状态 渐渐的过渡到另外一个状态 可以让我们页面更好看，更动感十足，虽然 低版本浏
阅读全文
摘要：1. 元素的显示与隐藏 | 2. CSS用户界面样式 | 3. vertical-align 垂直对齐 | 4. 溢出的文字省略号显示 | 5. CSS精灵技术（sprite) | 6. 滑动门 | 7. margin负值 | 8. CSS三角形 | 9. css属性书写顺序 | 10. css初始化
阅读全文
摘要：@ 什么是定位 定位是一种更加高级的布局手段， 通过定位可以将元素摆放到页面的任意位置，它有两部分组成：定位 = 定位模式 + 边偏移 偏移量(offset) 当元素开启了定位以后，可以通过偏移量来设置元素的位置 在 CSS 中，通过 （方位名词）top、bottom、left 和 right 属性
阅读全文
摘要：@ CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子，CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位。 普通流（标准流、文档流） 块级元素会独占一行，从上向下顺序排列。 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 浮动 让
阅读全文
摘要：@ 文档流 - 网页是一个多层的结构，一层摞着一层 - 通过CSS可以分别为每一层来设置样式 - 作为用户来讲只能看到最顶上一层 - 这些层中，最底下的一层称为文档流，文档流是网页的基础 我们所创建的元素默认都是在文档流中进行排列 - 对于我们来元素主要有两个状态 在文档
阅读全文
摘要：@ 网页布局的本质： 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。 最后把网页元素比如文字图片等等，放入盒子里面。 盒子模型（Box Model） 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。 盒子内容与边框的距离是内边距（类似单元格的
阅读全文
摘要：@ 1. CSS层叠性 div{ color:red; font-size:25px; } div{ color:green; } /* 最后div的color为 green ，red会被层叠掉 */ 概念： 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同
阅读全文
摘要：@ 一、font字体 菜鸟文档：CSS font 属性 1. font-size:大小 作用： font-size属性用于设置字号 p { font-size:20px; } 长度单位： 可以使用相对长度单位，也可以使用绝对长度单位。 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少
阅读全文
摘要：@ background-color 语法： background-color:颜色值; /* 默认的值是transparent :透明的 */ 可指定透明度的背景色(rgba) 语法： background: rgba(0, 0, 0, 0.3); 最后一个参数是alpha 透明度 取值范围 0~
阅读全文
摘要：@ 一、CSS选择器作用 找到特定的HTML页面元素 h3 { color: red; } /* 选着h3标签，并把属性color值改为red */ 选择器分为 基础选择器 和 复合选择器 二、CSS基础选择器 1. 标签选择器 概念： 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标
阅读全文
摘要：@ 一、概述 概念： CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） 作用： 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS以HTML为基础，提
阅读全文
摘要：基本使用 定义iframe标签, 指定标签name，以及标签的默认src <iframe name="fm" src="/../../xxx.html" frameborder="0"></iframe> 自定义iframe的样式 iframe { width: 100%; height: 100%
阅读全文
摘要：@ 引入ico图标 首先把favicon.ico 这个图标放到根目录下。 再html里面， head 之间 引入 代码。 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 制作ico图标 图片可以自己做，也可以用别人
阅读全文
摘要：@ 1.html5简介 HTML5 MDN介绍 HTML5 - Web开发者指南 _ MDN.mhtml ① 概念与定义 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念： 是一个新版本的 HTML 语言，定义了新的标签、特性和属
阅读全文
摘要：简介 表单在网页中主要负责 数据采集功能 。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。 表单基本组成结构 表单标签 表单域 表单按钮 <!-- 1 --> <form> <!-- 2 --> <input typ
阅读全文
摘要：@ 1. 排版标签 排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。 标题标签h 为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即 标题标签语义： 作为标题使用，并且依据重要性递减 其基本语法格式如下： <h1> 标题文本 </h1>
阅读全文
摘要：@ 1、什么是HTML HTML 指的是==超文本标记语言== (Hyper Text Markup Language)是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) html作用: 网页
阅读全文
摘要：Photoshop 切图 一、常见的图片格式 1. jpg图像格式： JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的。 2. gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果。 3. png图
阅读全文
