Ps技术 - 切图 测量
测量:F8、信息面板
切图(抠图)
command + c 复制
command + n 新建同等大小纸张
command + d 粘贴
command + s 保存
css样式 - background背景
css允许应用纯色作为背景、也允许使用背景图片创建相当复杂的效果
body {
background-attachment: fixed;/* 背景图片固定 */
background-color: red;
background-image: url(WechatIMG194.jpeg);
background-repeat: no-repeat;
background-position: center top;
background-size: 1000px 1000px;
background: linear-gradient(to bottom, rgba(0,0,0,0) , rgba(0, 0, 0, 0.8) 80%);
/* 最后一个是颜色渐变 */
}
”background”の颜色渐变
复合属性的写法
默认值
background: transparent none repeat scroll 0% 0%;
默认值(中文意思)
background: 透明/ 无背景图片 / 平铺 / 背景图片随文本滚动或者固定/ 位于元素左上角
举个栗子:
background:rgba(11, 10, 9, 1) url(../img/dot2.main.bg.png) no-repeat scroll center top /cover;
/* cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 */
css样式 - border边框
用 border 边框写一个三角形
#wrap {
border: 9px solid;
border-color: transparent #00c0ff transparent transparent;
}
css样式 - font字体
div{
font-weight: bold; /* 文字加粗 */
font-style: italic; /* 文字倾斜 */
font-size: 26px; /* 文字大小、字体偶数 */
font-family: "微软雅黑"; /* 字体 */
line-height: 48px; /* 行高 */
/* 复合写法 */
font: bold italic 26px/48px "微软雅黑";
}
p {
font-size: 12px;
transform: scale(0.75);
}
css样式 - text文本
p {
color: blue;
text-align: right; /* 把文本排列到右边 */
text-indent: 2em; /* 2字符 = 2个文字 */
text-decoration: underline; /* '下划线' の文本修饰 */
letter-spacing: 10px; /* 字母间距 10px */
word-spacing: 20px; /* 单词间距 20px (以空格为解析单位) */
word-break: break-all; /* 自动换行 */
text-shadow: 10px 10px 3px red; /* 向文本添加阴影 水平阴影 垂直阴影 模糊的距离 阴影的颜色 */
}
省略号…
<!DOCTYPE html>
<html lang="en">
<head>
<style media="screen">
div{
width: 100px;
text-overflow: ellipsis; /* 显示省略号 */
white-space: nowrap; /* 文本不换行 */
overflow: hidden; /* 超出隐藏 */
}
</style>
</head>
<body>
<div>
欢迎大家来到妙味课堂
</div>
</body>
</html>
css样式 - a:hover链接
链接的四种状态:
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
css样式 -列表
li {
list-style-type:square; /* 表项标记类型 取值:disc 点 | circle 圆圈 | square方块 | */
list-style-image: url(WechatIMG194.jpeg); /* 图像来替换列表项标记 */
}