Ps技术 - 切图 测量
测量：F8、信息面板
image
切图（抠图）
image
command + c 复制
command + n 新建同等大小纸张
command + d 粘贴
command + s 保存
css样式 - background背景
css允许应用纯色作为背景、也允许使用背景图片创建相当复杂的效果
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-size: cover;
/* background-size是css3中新增的属性，会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。 */
background-size: contain;
/* ontain：正好相反，他是按照某一边来覆盖显示区域的，会有白边*/
”background”の颜色渐变
image
复合属性的写法
默认值 :
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: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 */
定位背景图像
屏幕快照 2018-03-15 上午10.01.11.png
<div class="wb_enterprise qy_style"></div>
// . wb_enterprise . 里面写些文字样式。
body {
padding-top: 60px; // . 这个是导航栏的高度
}
.qy_style { // 为背景图片样式
height: 350px;
background: url(https://www.zhangmen.com/static/desktop/static/index/img/onkeyappoint_7187506.jpg);
background-attachment: fixed; //这个属性必须与 background-image 一起使用
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
}
固定顶部导航
/* <!-- 导航栏 --> */
.header {
width: 100%;
height: 60px;
background-color: #fff;
position: fixed;
top: 0;
z-index: 2;
}
body {
padding-top: 60px;
}
banner图. => background-size: cover;
background-size是css3中新增的属性，会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。
可应用于：css3的动效、banner图扩大、设计师给的图片过大.要缩小时
.banner {
width: 800px;
background: url(img/bg-screen-1.png) no-repeat center top;
background-size: cover;
}
.banner {
width: 1920px;
height: 450px;
position: relative;
left: 50%;
margin-left: -960px;
}
css样式 - border边框
image
用 border 边框写一个三角形
#wrap {
border: 9px solid;
border-color: transparent #00c0ff transparent transparent;
}
image.png
.main_Right .nav .userList::after {
display: block;
content: '';
border: 8px solid;
border-color: transparent transparent #fff transparent;
position: absolute;
top: -15px;
right: 30px;
}
.main_Right .nav .userList::before {
display: block;
content: '';
border: 8px solid;
border-color: transparent transparent #ebeef5 transparent;
position: absolute;
top: -16px;
right: 30px;
}
image.png
.tags_Corner_Mark {
width: 0;
height: 0;
border-top: 36px solid #3377ff;
border-bottom: 36px solid transparent;
border-left: 58px solid #3377ff;
border-right: 58px solid transparent;
}
WechatIMG350.jpeg
.Download .bg {
border-top: 6.9rem solid #091219;
border-bottom: 2.6rem solid transparent;
border-left: 7.5rem solid #091219;
}
css样式 - font字体
div{
font-weight: bold; /* 文字加粗 */
font-style: italic; /* 文字倾斜 */
font-size: 26px; /* 文字大小、字体偶数 */
font-family: "微软雅黑"; /* 字体 */
line-height: 48px; /* 行高 */
/* 复合写法 */
font: bold italic 26px/48px "微软雅黑";
}
image
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; /* 向文本添加阴影 水平阴影 垂直阴影 模糊的距离 阴影的颜色 */
}
省略号…
image
<!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); /* 图像来替换列表项标记 */
}
b
