day04前端

一、伪类hover的使用

hover,当鼠标移动到对应位置时，实现变化()

1.hover 可以给自身改变状态 自身的选择器:hover{声明}

2.hover 可以通过父级改变子级 父级的选择器:hover 子级选择器{声明}

3.不可以给父级改变状态

css代码如下:

div:hover{
    color: rebeccapurple
}

<!-- 通过父级改变子级 -->
div:hover p{
    color: greenyellow
}

二、其他的伪类

a:link{
    color:green;/*未访问的链接状态*/
}

a:visited{
    color:blue;/*已访问的链接状态*/
}

a:hover{
    color:pink;/*鼠标滑过的状态*/
}

a:active{
    color:red;/*鼠标按下去的状态*/
}

三、权重的计算表达方式

​ 用四位数字表示 0 0 0 0

​ 行内样式表 1000

​ id选择器 0100

​ class选择器 0010

​ 伪类选择器 0010

​ 标签选择器 0001

​ 包含选择器 相加 ul li

​ 群组选择器 各自计算

​ 通配符 0000

​

拓展：属性:属性值 !important

四、ps的基础使用

1.火狐和360浏览器支持 保存网页为图片；

2.切图：（左侧操作栏里面第五个工具，右键单击，选取切片工具）

3.矩形选择框:量取整选中图片的大小（左侧第二个按钮）

​ 信息提示： F8或者Fn+F8

​ ps中的辅助线: 快捷键ctrl + r

​ ps设置单位 默认是cm 快捷键ctrl + k --> 单元与标尺 --> 像素

​ 放大和缩小设计图的快捷键：ctrl + +/-

​ 长按alt + 鼠标滚轮

​ 移动图片: 按住键盘上的空格键 鼠标指针会变成手型；

4保存切片：

​ - 点击左上角文件选择存储为web和设备所用格式

​ - 弹窗 - 文件后缀名(根据需求)

​ -png一般用来当背景图，

​ - 需要修改图片的名字/ps切图保存会自动生成一个images文件夹

​ - 切片需要选择到的是"所有的用户切片"

5 视图：

​ 清除参考线

​ 清除辅助线

6做一个表情包

​ 两个图片拖入ps中

​ 橡皮擦工具抹除表情

​ 套索工具选择表情 ctrl + c/v

​ 选到相应的图层 ctrl + t(shift等比例缩放) 右键翻转 回车

​ 图像 - 模式 - rgb- ->灰度（扔掉-不拼合）

​ 图像 - 调整 - 色阶。

五、浮动属性

​ 类比气球

标签{
	float：left/*right(共三种，但none不要求)*/
}

​ 浮动属性会让元素脱离文档流（正常的网页布局：从上到下从左到右）初始位置不在了

​ 浮动元素碰到-父级元素边框-或者前面一个含有浮动属性的元素也会停止浮动

当最后一个子级元素的宽度大于父级元素宽度的时候 会往下进行移动直到找到足够的控件停止浮动

六、盒子里面常用的属性（css文件里面）

1.盒模型的概念

​ css布局的基石

​ 规定了网页元素如何显示以及元素间相互关系。

​ css定义了所有的元素都可以拥有像盒子一样的外形和平面空间。

即margin,border,padding,content;(外边距、边框、内边距、内容区)

p{
	text-align: center;/* 文本在盒子里面水平居中 */
	line-height: 40px;/* 设置列高为盒子的高度来实现文字垂直居中 */   
}

img{
    display:block;/* 1.margin:0 auto;使用的前提是块级2.元素行内元素设置成块级元素后也可以对其宽高进行设置*/
    width:333px;
    height: 350px;
    margin:0 auto;/*使图片在盒子里面水平居中*/
}

七、遇到的问题

​ semi-colon expected 前面需要加分号