web前端（HTML+CSS）
前端基础
- photoshop
- html4和css2
- 网页的基本结构
- 清除默认样式
- 安装插件
- 快捷生成结构
- 快捷键
- 转意字符
- div标记
- link标记
- 一、背景样式（已学宽 高 背景颜色）
- 二、边框类样式
- 三、可以从父类中继承的样式
- 四、圆角类样式
- 五、透明度
- 六、Js基础
- 选择器
- 一、ID选择器
- 二、类选择器
- 三、标签选择器
- 四、后代选择器
- 五、组合选择器
- **选择器的优先级
- 盒子模型
- 一、理解盒子，可视高与宽
- 二、内填充：调整盒子里面内容的位置
- 三、盒子模型计算：在可视宽中减去填充物
- 四、盒子模型的外填充
- 标签
- 一、块标签
- 二、行标签
- 三、行快标签
- 标签之间的转化
- 伪类标签
- 元素位置
- 一、浮动
- 1、浮动的边界问题
- 2、浮动对块元素的影响
- 3、浮动对行元素的影响
- 二、定位
- 一、相对定位
- 二、绝对定位
- 三、固定定位
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)`` ：HTML5的标记
6)当涉及到业务图片时一定要设置宽和高
网页的基本结构
<html>
<head>
<title> 网页标题 title>
<meta charset="UTF-8">// 在head中用<meta charset="UTF-8">标记： （meta charset定义网页的编码信息，UTF-8：国际化编码）防止网页中有中文出现时乱码
head>
<body> 网页内容 body>
html>
清除默认样式
在中使用组合选择器添加
块标签：
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（父子结构）- 用css改变div样式：
a, （行间样式）
b, （内联样式）在div中用id=” ”编号（编号不能重复），在head标记中用标记设定
c, (外联样式) 在html文本下链接.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到h6
注意：存在默认的外填充而且字体越来越小的默认样式，使用前必须清除
【3】段落标签：
宽度由父亲决定，高度由内容决定，独占父亲一行，
【4】列表标签：
列表
有序列表
列表项
【5】表格
1.表格一般用于后台管理
特点：
Caption 表格标题
Thead 表格列标题 默认字体加粗居中
Tbody 表格主体可以有多个
Td 文本默认垂直居中，可以放置任何标签
合并单元格：合并列 Td中用colspan=”n”属性，在合并的起始位置，合并n个单元格
合并行 Td中用rowspan=”n”属性，在合并的起始位置，合并n个单元格
格式：
<table>
<caption>table title and/or explanatory textcaption>
<thead>
<tr>
<th>headerth>
tr>
thead>
<tbody>
<tr>
<td>datatd>
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”提交 >或者是
< Inpurt type=” image” 图片域 > 提交表单用
required设置该内容必须填
下拉列表：（样式不好一般不用）
select 默认单选 multiple改为多选
文本域：
二、行标签
特点：并排显示两标签换行则中间出现间隙，宽高只由内容决定不能自己设置
【1】超链接标签：
1、 Href=””: 所需跳转的网址,其中 外网：http://baidu.com（以http开头） 内网：demo.html
2、 target=”_blank”：可有可无，作用新建一个窗口打开 1、a:hover{颜色} 设置当鼠标点击时改变颜色 2、锚点 设置点击某一元素瞬间跳转到指定位置（可以是当前页面中的位置也可以是其它页面中的位置），在href中设置需要跳转的元素名
注意：当a中含有除文字以外的其它内容时，要将a元素转为块元素。以免出现bug.
【2】标签 ：用来行间做布局
例如把某些字分开：
好好
好好
【3】标签：用来强调文本
【4】标签：自带斜体样式
三、行快标签
特点: 并排显示两标签换行则中间出现间隙，可以设置宽高
【1】img标签：将图片作为网页内容引入网页
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；