前端基础
photoshop
1、调出信息和历史记录窗口，xy单位改为像素
2、放大图片ctrl+ ,缩小图片ctrl-
3、拖动图片：空格然后移动光标
4、抠图 （英文输入法下 v移动工具，m选区工具）
a 隐藏标尺ctrl+r 用标尺线标出范围
b 用矩形选区工具 撤销选区ctrl+d、
c 复制 ctrl+c 新建窗口ctrl+n 粘贴 ctrl+v
d 存储为web格式ctrl+alt+shift+s，预设为 需要透明时存PNG-24；不需要透明时用jpg
5、量图
a 清除参考线：视图下清除参考线
b 使用标尺和选区工具选中在信息中查看
6、提取颜色 用吸管工具 i 在前景色或背景色中查看
（1）颜色rgb（ , , ,） 、#+颜色值
（2）颜色和透明度 rgba（）a的值由0到1
html4和css2
html4：一门编程语言 ，超文本标记语言 ，其实就是学标记
（注意：css并不属于html，css和html是两门课程，html制作框架css用来装修）css2：三个样式 width height background-color(背景颜色)
- css的应用方式
1）当出现父子结构定位时由父亲到儿子，定位的长度尽量短
2）网站包含文件夹 css ,imgs, js
3）引用路径的问题：（ .. 表示返回该文件所在文件夹下的上一层目录）
一般使用相对路径来表示
4）！+Tab键：调出html文件基本格式
5)`<!DOCTYPE html>` ：HTML5的标记
6)当涉及到业务图片时一定要设置宽和高
网页的基本结构
<html>
<head>
<title> 网页标题 </title>
<meta charset="UTF-8">// 在head中用<meta charset="UTF-8">标记： （meta charset定义网页的编码信息，UTF-8：国际化编码）防止网页中有中文出现时乱码
</head>
<body> 网页内容 </body>
</html>
清除默认样式
在<style></style>中使用组合选择器添加
块标签：
Body,h1,h2,h3,h4,h5,h6,p,ul{
Margin:0px;
Font-size:12px;
Font-weight :normal;
}
Ul {
Padding:0px;
List-style :none;
}
行标签：
a{
Text-decoration :none;
Font-size:12px;
Color:black;
}
strong{
font-weight: normal;
font-size: 12px;
}
行块标签：
img{
vertical-align:top;
border:none;
}
安装插件
调出安装面板 ctrl+shift+p ， install， package 单击 选择插件
1、sunblime server 配置web环境
2、autofilename 调出文件路径
快捷生成结构
1、生成带有id名的标签 div# id名
2、生成带有类名的标签 div .类名
3、生成并列结构用加号 span+em+strong
4、生成父子关系结构用大于号 div.wrap>div
5、生成并列关系的结构用加号
6、生成多个相同的标签 div# id名*6
7、批量生成类名为div并且类名有规律的标签 div.div$*6
8、往元素属性身上加内容 img[src=img/$.jpg]*6
9、往元素里面加内容div>{内容} div>{1111}
注意：适当的时候用（）提升优先级
快捷键
查找替换：ctrl+h 选中相同的：alt+f3
转意字符
div标记
<div></div>标记：
用来做结构 特点：独占父亲一行，宽度是由父亲决定的，高度是它里面的内容决定的，div里面也可以嵌多个div（父子结构）- 用css改变div样式：
a, （行间样式）<div style="width:200px;height:100px;background-color:red（#+颜色代码）"> </div>
b, （内联样式）在div中用id=” ”编号（编号不能重复），在head标记中用<style> #+编号{ 宽 高 颜色 } </style>标记设定
c, (外联样式) 在html文本下<link rel=”stylesheet” href=””>链接.css文件，在网页所在根文件夹下新建css文件夹，在该文件夹下建立以.css为扩展名的文件： #+编号{ 宽 高 颜色 } 当出现父子结构时样式有父到子
link标记
link标记：在head中使用，注意相对路径与绝对路径 link 中含有rel 属性包括stylesheet：调用外部样式、icon：定义网站收藏夹的图标、canonical：指明网址的规范版本等等，href 所要链接文件所在的位置，相对路径：起始位置是该文件所在的文件夹
一、背景样式（已学宽 高 背景颜色）
注意：以下几种样式可以用background+冒号后面的值 直接调用
1、背景图片 background-image: url(图片所在位置的相对路径)
2、平铺方式background-repeat: repeat-x(横向平铺) repeat-y(纵向平铺) no-repeat（不平铺）
3、图片的位置background-position: 距左边的值，距上边的值 当平铺方式为不平铺时可用
4、background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
值：scroll：背景图像会随着页面其余部分的滚动而移动。
Fixed 当页面的其余部分滚动时，背景图像不会移动。
Inherit
5、background-position ：xy;属性设置背景图像的起始位置。
第一个值是水平位置，第二个值是垂直位置。
注意：background-attachment：fixed；时这个才管用
二、边框类样式
注意：边框一样时可以用border+冒号后面的值 直接调用
（double 双线 、dashed虚线、dotted点线、solid实线）
1、左边框 border-left：粗细 形状 颜色
2、上边框 border-top：粗细 形状 颜色
3、右边框 border-right：粗细 形状 颜色
4、下边框 border-bottom：粗细 形状 颜色
2017年10月21日星期六
三、可以从父类中继承的样式
关键字：Inherit（继承）
【1】字体样式
一、设置文字位置时利用行高来做，
1、字体颜色 color：颜色；
2、字体大小 font-size:12 px;
3、字形 font-style： ；italic （斜体）oblique（倾斜）
font-weight：； bold（加粗）
4、字体的水平布局 text-align：左left 中center 右right
5、字体类型 font-family：“黑体”/“宋体”等；
【2】段落样式
1、行高（大于字体大小） line-height：30px；
2、首行缩进 text-indent：24px；
3、划线 text-decoration：overline上划线 、underline 下划线、
line-through 贯穿线
4、溢出类 overflow ：隐藏hidden、滚动scroll;
5、段落的水平布局 text-align：两端对齐justify 左left 中center 右right
6、字体的间距letter-spacing:;
四、圆角类样式
1、border-radius：四个角的大小 （左上、右上、左下、右下）以像素为单位规定半径大小 【radius（半径）】
五、透明度
1、 div的内容随着div透明：opacity：由0到1；
2、背景透明（div的内容不随着div透明，使用rgba单位）： background：rgba()
六、Js基础
display
【1】控制元素的显示方式
一般与js配合使用
1、none此元素不会显示
2、block此元素将显示为块级元素前后带有换行符
3、list-item：此元素将作为列表显示
4、inline 默认此元素显示为内联元素，元素前后没有换行符
5、inherit规定次元素从父级继承
【2】标签之间的转换
鼠标与点击时的背景颜色
1、设置鼠标选中时改变鼠标形状变为手型 cursor:pointer;
2、设置鼠标点击时不选中文本 User-select:none;
3、设置鼠标选中时背景色改变，新建一个类{background：；}，在html中调用即可
选择器
目的：在复杂的父子关系中，随意的选择自己需要的元素
伪类选择器指 在选择器后面加上：冒号not(元素名)
一、ID选择器
1、编号用id定义，用#编号进行调用，但是编号不能重复
二、类选择器
1、编号用class定义 ，用点.编号进行调用，编号可以重复而且同一个div可以定义多个编号（中间空格隔开）
三、标签选择器
1、不用编号，直接用标签名调用，元素包括div 、 p
四、后代选择器
经常使用优点减少编号量
1、由以上三种选择器构成 ：调用时组合调用中间用空格隔开。 例如#A1 .A2
2、当调用方式为#A1 .A2时 A1 A2不一定是父子关系可以是父亲与后代
3、当调用方式为#A1> .A2时 A1 A2一定是父子关系
五、组合选择器
有多个选择目标，中间用逗号隔开
调用时同时调用两个div中间用逗号隔开，打代码时也经常使用。
**选择器的优先级
当多个选择器选择了同一组元素时，出现优先级的问题。
1、优先级由高到低：行间样式>ID选择器>类选择器>标签选择器
2、后代选择器的优先级计算：ID选择器100、类选择器10、元素选择器1
3、组合选择器不参与优先级运算
注意：1、当某一样式有(!important)标记时，此样式优先级最高。
2、优先级低的也照常运行，只是里面的样式被优先级高的替换了，也就是说某一样式只在低优先级存在时照样运行。
盒子模型
一、理解盒子，可视高与宽
盒子即用div定义的一个区域，理解可视宽和高：眼能看见的高度（width+padding+border）
二、内填充：调整盒子里面内容的位置
Padding：上，右，下，左；
padding：上下，左右；
padding：上下左右；
左内填充: Padding-left:20px;
……
三、盒子模型计算：在可视宽中减去填充物
例如：内容宽=以前盒子宽加上两个边框宽减去填充物宽
四、盒子模型的外填充
Margin关键字：上下左右 例如margin-left:20px;
当盒子大小已经设定时： 可以用Margin：0 auto；使盒子水平居中
注意：1、两个模块之间的填充（上面模块的下填充与下面模块的上填充）不累加取最大值，但是当元素浮动起来时就需要累加
2、两个模块之间的左右填充累加
3、外填充不影响可视宽高
标签
一、块标签
特点：宽度由父亲决定，高度由内容决定也可以自己设定，独占父亲一行
【1】div标签：主要用来布局
section标签：跟div一样
【2】标题标签：<h1></h1>
标题级别由高到底用h1到h6
注意：存在默认的外填充而且字体越来越小的默认样式，使用前必须清除
【3】段落标签：<p></p>
宽度由父亲决定，高度由内容决定，独占父亲一行，
【4】列表标签：
列表<ul></ul>
有序列表<ol></ol>
列表项<li></li>
【5】表格
1.表格一般用于后台管理
特点：
Caption 表格标题
Thead 表格列标题 默认字体加粗居中
Tbody 表格主体可以有多个
Td 文本默认垂直居中，可以放置任何标签
合并单元格：合并列 Td中用colspan=”n”属性，在合并的起始位置，合并n个单元格
合并行 Td中用rowspan=”n”属性，在合并的起始位置，合并n个单元格
格式：
<table>
<caption>table title and/or explanatory text</caption>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
属性：
边框 Border：默认0，
边框间隙 cellspacing 默认1
单元格大小cellspadding
2 样式
合并相邻边框：在table上border-collapse:collapse; 除去td的双边框
【6】表单 from
-
1、属性
Action：提交表单处理的界面，默认提交到当前界面
Method：设置请求方式是get方法还是post方法
enctype=”multipart/from-data” 在使用文本域时需要添加
value：input中的内容一般赋值到value中 -
2、内容
输入：Inpurt标签:
< Inpurt type=” text”输入型的文本框 value=”文本框中的值” placeholder =”提示语言（请输入用户名）” name=””>
< Inpurt type=” password”输入型的密码框 value=”文本框中的值” placeholder =”” name=””>
< Inpurt type=” radio”单选按钮 name=”” checked=” checked”>
< Inpurt type=” checkbox”多选按钮 name=”” check=” check”>
相同的name名为一组选项，只能选一个
checked=” checked”设置默认值，h5中可以写为checked；
< Inpurt type=” button”按钮 value=”提交” >
< Inpurt type=” file”上传域 > 上传文件 默认一次一个
Multiple=” Multiple” 上传多个文件
< Inpurt type=” hidden”隐藏域 >
< Inpurt type=” reset”重置 >
< Inpurt type=” submit”提交 >或者是<button>提交</button>
< Inpurt type=” image” 图片域 > 提交表单用
required设置该内容必须填
下拉列表：（样式不好一般不用）
<select name="" >
<option value="">内容</option>
</select>
select 默认单选 multiple改为多选
文本域：
<textarea name="" id="" clos="文字块的宽度" rows="文字块的高度">
</textarea>
二、行标签
特点：并排显示两标签换行则中间出现间隙，宽高只由内容决定不能自己设置
【1】超链接标签：<a></a>
<a href=”” target=”_blank”> </a>
1、 Href=””: 所需跳转的网址,其中 外网：http://baidu.com（以http开头） 内网：demo.html
2、 target=”_blank”：可有可无，作用新建一个窗口打开 1、a:hover{颜色} 设置当鼠标点击时改变颜色 2、锚点 设置点击某一元素瞬间跳转到指定位置（可以是当前页面中的位置也可以是其它页面中的位置），在href中设置需要跳转的元素名
注意：当a中含有除文字以外的其它内容时，要将a元素转为块元素。以免出现bug.
【2】<span></span>标签 ：用来行间做布局
例如把某些字分开：
<span>好好</span>
<span>好好</span>
【3】<strong></strong>标签：用来强调文本
【4】<em></em>标签：自带斜体样式
三、行快标签
特点: 并排显示两标签换行则中间出现间隙，可以设置宽高
【1】img标签：将图片作为网页内容引入网页
<Img src=””>
Src:图片所在的位置
标签之间的转化
一、块标签与行标签与行块表签：
display: 值 ;
值 ：块转行inline、行转块block、行块转块block、块转行块inline-block
伪类标签
伪类标签一般用于a标签，以a举例
a:link{}//a本身一般不用
a:hover{}//当鼠标移上去的状态，所有浏览器都支持
a:active{}//鼠标点击的瞬间，个别浏览器不支持
a:visited{}//鼠标点击过后, 个别浏览器不支持
元素位置
一、浮动
- 浮动定义：
使元素脱离文档流，按照指定的方向移动，遇到父级边界或者相邻的元素停下来
清除浮动的目的：使父级元素有高，占据文档流。
- 格式：Float：值；
1、left 往左浮动至父亲左边
2、right： 往左浮动至父亲右边
3、当往同一方向浮动时，会并排显示
- 注意：
1、现象： 浮动会使元素脱离文档流（即浮动元素与包裹该元素的父亲不再同一平面），会出现父亲高度的丢失（父亲的边框无法包裹住浮动元素）
2、 解决办法：利用父亲元素 清理浮动：把浮动元素拽回到它父亲的平面中 调用父亲:after{ content:’’; display:block; clear:both; }
1、浮动的边界问题
在父亲的左右边界中浮动；
如果一排不够浮动元素会自动另起一行；
如果浮动中遇到一像素的坎，浮动过程中会出现卡住的情况；
2、浮动对块元素的影响
1、在不设宽度的条件下，宽度由内容决定
2、同行显示，
3、浮动对行元素的影响
1、行元素可以设定宽高，而且换行不出现间隙
2、使行元素支持了所有的样式。
二、定位
一、相对定位
-
格式：Position:relative; top,bottom,left,right
1、特点：并不会使元素脱离文档流，如果元素没有偏移量则对于它没有任何影响,如果设置偏移量则它相对于自己原来位置有改变
2、用途：99%用于配合绝对定位使用，1%用于元素位置的微调
二、绝对定位
- 格式：Position:absolute ; top ,bottom,left,right
1、影响：跟浮动对元素的影响一样
使元素脱离文档流,对块元素的影响，不设置宽高的情况下，由内容决定；使行元素支持了所有样式
1、 注意：在不指定定位父级的情况下，相对于可视区定位。
2、 指定定位父级
定位父级元素的条件：是绝对定位元素的父级，在该父级加上定位样式
90%：在父级元素加上相对定位
3、 细节问题：
1、绝对定位元素的left:0px;top:0px, 会移动到边框里面紧贴边框。
2、层级：先定位的元素在最下面，后定位的会压在它上面，我们可以通过z-lndex：；数值越大层级越大，越靠上（仅限定位元素），定位父级元素永远盖不住他的定位子元素。
三、固定定位
- 格式：Position:fixed; top ,bottom,left,right
1、特点：相对于可视区去定位，也脱离文档流
【1】、轮播图
用定位去做外面用一个盒子里面用列表，
1.左右轮播，控制left左移一个宽度，盒子为一张图片的大小，列表为所有图片的大小
2.上下轮播，控制opacity 与z-index的值，盒子、列表都为一张图片的大小
【2】、选项卡
不一定需要定位，看情况
默认隐藏在：display：none；
显示出来：display：block；
【3】、弹出列表
用定位去做，
默认隐藏在：display：none；
选中时显示出来：display：block；