2020年06月_不停喝水

原创移动web 15-1 Flex布局

移动web开发——flex布局2.0 flex布局原理总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式3.0 父项常见属性flex-direction：设置主轴的方向justify-content：设置主轴上的子元素排列方式flex-wrap：设置子元素是否换行align-content：设置侧轴上的子元素的排列方式（多行）align-items：设置侧轴上的子元素排列方式（单行）flex-flow：复合属性，相当于同时设置了 flex-direction 和 fle

2020-06-30 23:56:11 149

原创移动web 14-1 视口物理像素逻辑像素流式布局

一.移动端基本知识提示:h5 c3 在移动端上的兼容性非常好1.进入开发者模式2.点击左边图标转换移动端模式3.alt+shift+鼠标拖动改变大小4.可以添加尺寸,自定义尺寸二.视口属性介绍可视窗口的大小:最好=手机屏幕大小1.user-scalable:0;不允许用户缩放三.像素1.物理像素:手机出场自带的,不能修改,就是水平和垂直方向的物理像素点的多少比如iphone3的分辨率是320480 屏幕上水平方向有320个物理像素点1px(css像素,开发像素,逻辑像素)=1个物理像

2020-06-30 12:26:19 129

原创 H5C3 13-2 3D转换

一、 3D 转换3D 转换知识要点3D 位移：translate3d(x, y, z)3D 旋转：rotate3d(x, y, z)透视：perspctive3D呈现 transfrom-style3D 移动 translate3d - transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离二、透视 perspective知识要点透视需要写在被视察元素的父盒子上面代码演示body { persp

2020-06-29 23:50:06 267

原创地图热点图

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .map {

2020-06-29 12:18:22 942

原创 H5C3 13-1 2D转换动画

1.transform:translate;不改变其他盒子的位置1.1.对行内标签没有效果1.2. 参数%移动,是自身宽度或者高度的%来对比可以配合定位来实现盒子在盒子里面水平垂直居中1.3对行内元素无效1.transform:translate(100px,100px)2.transform:translateX(100px)3.transform:translateY(200px)一、rotate1.transform:rotate(30deg)可以让三角小图标鼠标经过旋转180°

2020-06-28 23:44:57 149

原创品优购 12-1 笔记

1.引入ico图标<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

2020-06-28 19:16:01 137

原创伪元素添加字体图标案例

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> @font-face

2020-06-24 16:18:28 1434

原创土豆视频案例鼠标经过时候出现播放按钮伪元素案例

土豆视频案例鼠标经过时候出现播放按钮<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style&g

2020-06-24 16:17:07 508 2

原创数字翻页栏练习

数字翻页栏练习<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * {

2020-06-24 10:17:24 108

原创京东秒杀价格三角案例

京东秒杀价格标签<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> *

2020-06-23 15:21:27 218

原创 HTML5 CSS3提高 11-01 新增标签及属性表单多媒体结构伪类伪元素过渡小米log jd进度条

HTML5新特性语义化标签（★★）<header> 头部标签<nav> 导航标签<article> 内容标签<section> 定义文档某个区域<aside> 侧边栏标签<footer> 尾部标签多媒体标签视频标签- video（★★★）基本使用当前 <video>元素支持三种视频格式：尽量使用 mp4格式使用语法： <video src="media/mi.mp4"></

2020-06-20 08:53:52 812

原创 CSS 10-01 显示隐藏界面样式垂直对齐精灵技术滑动门笔记

1.元素显示与隐藏1.1display显示(重点)使用较多display:none 隐藏 ,不保留位置display:block 显示/转换成块级元素1.2 visibility可见性(了解)使用较少visibility:hidden 隐藏元素,保留位置(停职留薪)visibility:visible 显示元素1.3overflow溢出(重点)1.清除浮动2.保证盒子的内容不会超出该盒子范围overflow:visible 默认不剪切内容也不添加滚动条overflow:hidde

2020-06-18 23:56:12 239

原创 WakaTime 记录你的时间

Moana 自动同步信息客户端WakaTime 可以记录敲代码时间，和具体编辑的文件等信息，并且支持这些数据保存15天，如果想存储更长时间，可以在官网购买服务。因为官网提供了数据接口 API，所以做了一个 WPF 的客户端程序，可以对数据进行同步，并做图表来展示内容。使用方法登录 wakatime，注册账号；在自己使用的IDE，安装 wakatime 的插件；运行 Moana 程序，在“设置”界面，配置自己的 API Key。PS：wakatime 的 API Key 在网站 Settings

2020-06-18 20:26:09 366

原创 CSS 09-01 定位笔记

定位(position)目标理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局应用能写出淘宝轮播图布局1. CSS 布局的三种机制网页布局的核心 —— 就是用 CSS 来摆放盒子位置。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中：普通流（标准流）浮动让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。定位将盒子定在某一个位置自由的漂浮在其

2020-06-17 23:08:37 160

原创 CSS 08-01 伪元素清除浮动方法

例子1:在div内部的最前面添加div::befote{ content:"清明"; width:100px; height:100px; bgc:red;div::after{content:"河图"<div> 上 </div>.clearfix:after {content:".";转为行内块元素display:block;照护兼容性隐藏元素height:0;隐藏元素visibility:hidden;清除浮动clear:both;}

2020-06-17 11:06:44 116

原创 CSS 07-01 学成在线页面制作

1. 学成在线页面制作目标理解能够说写单页面我们基本的流程能说出常见的css初始化语句能说出我们CSS属性书写顺序应用能利用ps切图能引入外部样式表能把psd文件转换为html页面学成在线的目的就是为了串联前面的所有知识。来一个春晚大联欢。pink老师：取义学有所成，为师之期望，君等成才者也，故曰学成网是也~~1.1 前期准备素材学成在线PSD源文件开发工具 = PS（切图） + sublime（代码） + chrome（测试）1.2 前期准备工作

2020-06-14 12:00:21 230

原创 CSS 08-01 爱宠知识案例思路笔记

1.首先确定结构*清除内外边距1.整个为一个大盒子,测量高宽.W H2.然后测量边框,border:1px solid red;3.然后给bgi4.然后给一个margin:20px auto 0;5.最后分析给一个padding:10px这里有宽所以会撑大!要减去.box { width: 240px; height: 307px; margin: 20px auto 0; border: sol

2020-06-14 11:59:59 440

原创 CSS 06-01 浮动清除浮动切图

1. 浮动(float)目标记忆能够说出 CSS 的布局的三种机制理解能够说出普通流在布局中的特点能够说出我们为什么用浮动能够说出我们为什么要清除浮动应用能够利用浮动完成导航栏案例能够清除浮动能够使用PS切图工具1.1 CSS 布局的三种机制网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：普通流（标准流）块级元素会独占一行，从上向下顺序排列；常用元素：di

2020-06-09 23:22:39 155

原创 CSS 05-01 新浪导航栏项目笔记

一定要先分析1.先确定结构div navaaaaa2.构建样式a.构建边框测量高度测量背景色测量上框色测量下框色3.

2020-06-09 15:12:31 105

原创 HTML 02-03 网页注册案例

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>世纪佳缘网</title> <style> body {

2020-06-07 16:28:32 100

原创 CSS 05-01 盒子模型笔记核心之一!!!!!! 内外边距圆角阴影

盒子模型（CSS重点）css学习三大重点： css 盒子模型、浮动、定位主题思路：目标：理解：能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用：能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例1.看透网页布局的本质首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如

2020-06-07 00:03:01 276

原创 CSS 4-01 简单导航栏案例总结

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> 1.变化样式有大小有一行

2020-06-05 23:54:50 523

原创 CSS 04-01 复合选择器链接伪类标签显示模式display 行高背景 css三大特性笔记

今日重点：复合选择器后代选择器并集选择器标签显示模式CSS背景背景位置CSS三大特性优先级1. CSS复合选择器目标理解理解css复合选择器分别的应用场景应用使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器为什么要学习css复合选择器CSS选择器分为基础选择器和复合选择器，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个或多

2020-06-04 00:01:23 409

原创 CSS 03-03 文本颜色水平对齐行间距首行缩进文本线笔记

2.1 color:文本颜色作用：color属性用于定义文本的颜色，其取值方式有如下3种：表示表示属性值预定义的颜色值red，green，blue，还有我们的御用色 pink十六进制#FF0000，#FF6600，#29D794RGB代码rgb(255,0,0)或rgb(100%,0%,0%)注意我们实际工作中，用 16进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色2.2 text-align:文本水平对齐方

2020-06-03 23:34:33 319

原创 CSS 03-02 字体大小粗细样式文本对齐行间距缩进文本线笔记

CSS字体样式属性调试工具目标应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式使用常用的emment语法能够使用开发人员工具代码调试1.font字体1.1 font-size:大小作用：font-size属性用于设置字号p { font-size:20px; }单位：可以使用相对长度单位，也可以使用绝对长度单位。相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。注意：我们文字大小以后，基本就

2020-06-03 13:34:58 998

原创 CSS 03-01三种样式基础选择器笔记

学习目标理解：1.CSS的目的作用2.CSS的三种引入方式应用：1.CSS三种引用方式的书写2.通过样式规则给标签添加简单的样式1.HTML的局限性1.关注内容

2020-06-02 20:53:54 364

原创 HTML 02-02 列表表单标签笔记

1.列表标签列表是用来布局的。因为非常整齐和自由。列表的概念：容器里面装载着结构，样式一致的文字或者图表的一种形式，叫列表特点：列表最大的特点就是，整齐、整洁、有序，跟表格类似，但是他可组合自由度会更高1.1无序列表ul（重点）无序列表的各个列表直接没有顺序级别之分，是并列的。<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li></ul>脚下留心：

2020-06-01 22:25:00 388

原创 HTML 02-01 表格学习笔记

表格：用来展示数据，让数据显示整齐规范列表：用来布局，可以让页面布局整齐规范表单：用来收集用户信息表格 table表格作用：是一种比较常用的标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显得非常规整，可读性好。特别是后台展示数据的时候表格运用是否熟练就显得很重要。1.创建表格创建表格的基本语法：<table> <tr> <td>单元格内的文字</td> </tr></table>1.tab

2020-06-01 17:25:41 123

原创 HTML 01-01 标签笔记

!tab排版标签<title></title>文档标题<hx></hx>标题标签<p></p>段落换行标签<hr />水平线标签<br />换行标签<div></div>用来布局的，只能放一个<span></span>用来布局的，可以放好多个span<b></b>和<strong></strong>

2020-06-01 15:29:18 208

Write less，do more