ubuntu安装photoshop 记住点Graphic
配置中文字体
企业切图
ctrl+shift+L实现同时编辑多处文字
PhotoShop使用
组成：
菜单项
工具栏
辅助面板
快捷键：
ctrl + r : 显示隐藏标尺
在标尺上可以拖拽参考线
可以通过移动工具拖拽回去，也可以在视图菜单中选择清除所有的参考线
图层中的小眼睛可以对当前图层进行显示隐藏
alt + 滚轮：可以对图片进行放大缩小
png等图片的切图流程：
1. 通过矩形选框工具，选择指定的区域
微调：alt 减少区域 shift 增加区域 上下左右键进行微调
利用参考线记录量取的位置，以便以后测量其他的值
2. ctrl + c : 复制图层
3. ctrl + n : 新建图层
4. ctrl + v : 粘贴图层
5. 存储为web格式
切片工具也可以切图
psd图片的切图流程：
1. PS cc启动生成器
2. 图像资源
3. 重命名图层，自动获取切图
4. 可上传到线上，方便数据获取
新浪趣图练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;}
ul{
list-style: none;}
img{
display: block;}
a{
text-decoration: none;color: #666666;}
h1,h2,h3,h4,h5,h6{
font-size: 16px;font-weight: normal;}
#main{
margin: 20px auto;width: 238px;border: 1px solid #d9e0ee;border-top: 3px solid #ff8400;}
#main h2{
height: 35px;border-bottom: 1px solid #d9e0ee;line-height: 35px;padding-left: 11px;}
#main h2 a{
color: black;}
#main h2 a:hover{
color: #ff8400}
#main div img{
margin: 8px auto 3px auto;}
#main ul{
font-size: 12px;line-height: 24px;margin-bottom: 8px;}
#main ul li{
padding-left: 18px;background: url(./img/dot.png) no-repeat 8px center;}
#main ul li.first-line{
border-bottom: 1px solid #d9e0ee;padding-bottom: 3px;margin-bottom: 8px;}
#main ul a{
}
#main ul a:hover{
color: #ff8400;text-decoration: underline;}
</style>
</head>
<body>
<div id="main">
<h2>
<a href="#">探索趣图</a>
</h2>
<div>
<a href="#">
<img src="./img/img.png" alt="">
</a>
</div>
<ul>
<li class="first-line">
<a href="#">测试文字测试文字测试文字测试</a>
</li>
<li>
<a href="#">测试文字测试文字测试文字测试</a>
</li>
<li>
<a href="#">测试文字测试文字测试文字测试</a>
</li>
</ul>
</div>
</body>
</html>
流程总结：
1.写html结构
2.重置样式
3.根据结构写好选择器
4.通过PS测量相关数值
5.数值设置到样式中
float浮动
文档流：是文档中可显示对象在排列时所占用的位置。
float浮动：脱离文档流，沿着父容器靠左或靠右进行排列。如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float的取值: left、right、none
正常文档流：
<style>
body{
border: 1px black solid;}
#box1{
width: 100px;height: 100px;background: yellow;}
#box2{
width: 200px;height: 200px;background: red;}
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
#box1{width: 100px;height: 100px;background: yellow;float: left;}
box1浮起，脱离文档流，沿着父容器靠左排列。
#box1{width: 100px;height: 100px;background: yellow;float: left;} #box2{width: 200px;height: 200px;background: red;float: left;}
box1和2都脱离文档流，沿着父容器靠左排列。box2挨着已浮动的box1排列。此时body里空了。
float注意点：
只会影响后面的元素。
内容默认提升半层。 -->实现图文混排
默认宽根据内容决定，而不是父容器。
浮动元素太多，会在父容器中换行排列。
主要给块元素添加，但也可以给内联元素添加。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body{border: 1px black solid;} */
/* #box1{width: 100px;height: 100px;background: yellow;}
#box2{width: 200px;height: 200px;background: red;float: left;}
#box3{width: 300px;height: 300px;background:blue;}
#box4{background: green;float: left;} */
ul{
margin: 0;padding:0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}
li{
width: 100px;height: 100px;background: red;border: 1px yellow solid;box-sizing: border-box;float: left;}
li:nth-of-type(1){
height: 120px;}
li:nth-of-type(2){
height: 80px;}
span:last-of-type{
float: right;}
</style>
</head>
<!-- <body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
<div id="box4">这是一个没有宽度的块元素</div> -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<span>aaa</span><span>bbb</span>
</body>
</html>
清除浮动
上下排列：clear属性，表示清除浮动，取值：left、right、both，一般用both就不用考虑左右了
<style>
#box1{
width: 100px;height: 100px;background: red;float: left;}
box2{
width: 200px;height: 200px;background: blue;clear: both;}
</style>
<div id="box1"></div>
<div id="box2"></div>
嵌套排列：
1.固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。
2.父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
3.overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
4.display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
5.设置空标签 : 不推荐 , 会多添加一个标签。
6.after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。
( clear属性只会操作块标签，对内联标签不起作用 )
5方法如下：
<style>
#box1{
width:200px; border:1px black solid; }
#box2{
width:100px; height:200px; background: red;float:left}
.clear{
clear: both;}
</style>
<body>
<div id="box1">
<div id="box2"></div>
<div class="clear"></div>
</div>
aaaaaaaa
</body>
6方法：给父容器加class，用after伪类添加空内容，因为添加的content是inline标签，不受clear影响，所以得转成block标签。
<style>
#box1{
width:200px; border:1px black solid; }
#box2{
width:100px; height:200px; background: red;float:left}
.clear:after{
content: '';clear: both;display: block;}
</style>
<div id="box1" class="clear">
<div id="box2"></div>
</div>
aaaaaaaa
浮动练习1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;padding:0;}
ul{
list-style: none;}
img{
display: block;}
a{
text-decoration: none;color: #666;}
h1,h2,h3{
font-size: 16px;}
.l{
float:left}
.r{
float:right}
.clear:after{
content:"";display: block;clear: both;}
#main{
width:366px;margin:20px auto;}
#main .title{
height: 23px; line-height: 23px; font-size:12px; font-weight:bold; padding-left:30px;
background: url(./img2/bg_title.png) no-repeat 6px 4px, url(./img2/bg_line.png) repeat-x;
}
#main ul{
margin-top:13px; }
#main li{
margin-bottom:22px;}
#main .pic{
width: 99px; border:1px #c8c4d3 solid; margin-left:5px;}
#main .pic img{
margin:2px; }
#main .content{
width:240px; margin-left:13px}
#main .content h2{
font-size:12px; line-height: 24px; }
#main .content p{
font-size:12px; line-height: 20px;}
</style>
</head>
<body>
<div id="main">
<h2 class="title">外媒评论精选</h2>
<ul>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img2/img.png" alt="">
</a>
</div>
<div class="l content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试……
<a href="#">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img2/img.png" alt="">
</a>
</div>
<div class="l content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试……
<a href="#">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img2/img.png" alt="">
</a>
</div>
<div class="l content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试……
<a href="#">[详细]</a>
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
浮动练习2:
<style>
*{
margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{
font-size: 16px;}
img{
display: block;}
a{
text-decoration:none;color:#000000;}
ul{
list-style:none;}
.l{
float:left;}
.r{
float:right;}
.clear:after{
content:""; display:block;clear:both;}
#main{
width: 407px; margin: 20px auto;}
#main .title{
height: 21px;line-height:21px; border:1px #c4ddf1 solid;font-size:13px;font-weight:bold;color:#273566;
padding-left:11px; background:url(./img2/bg_lianxi2.jpg) repeat-x;}
#main .content{
font-size:11px; border-left:1px #d4d4d4 solid;
border-right:1px #d4d4d4 solid;border-bottom:1px #d4d4d4 solid;}
#main .content1{
padding-top:12px;padding-left:17px;}
#main img{
border:1px #dedede solid;}
#main .content1 li:nth-of-type(2) a{
margin-left:11px;}
#main .content1 li:nth-of-type(3) a{
margin-left:11px;margin-bottom:2px;}
#main .content1 p{
width: 117px; height:21px;background:#dedede; margin-bottom:7px;
margin-left:4px; margin-top:3px;}
#main .dot{
width: 391px; height:1px;margin-left: 7px;margin-bottom:7px; background: url(./img2/dot.jpg) no-repeat;}
#main .content2{
line-height:24px;font-size:13px;color:#232c6d;}
#main .content2 li{
background: url(./img2/icon_list.jpg) no-repeat 11px center;
padding-left:20px;}
#main .content li:nth-of-type(2){
margin-left:49px;}
#main .content li:nth-of-type(4){
margin-left: 36px;}
</style>
</head>
<body>
<div id="main">
<h2 class="title">视觉焦点</h2>
<div class="content">
<ul class="content1 clear">
<li>
<a href="#" class="l">
<img src="./img2/img1.jpg" alt="">
<p>韩中小学生雪地军训</p>
</a>
</li>
<li>
<a href="#" class="li2 l">
<img src="./img2/img3.jpg" alt="">
<p>奥巴马度假打高球</p>
</a>
</li>
<li>
<a href="#" class="l">
<img src="./img2/img2.jpg" alt="">
<p>回访舟曲：阳光美好</p>
</a>
</li>
<hr>
</ul>
<div class="dot"></div>
<ul class="content2 clear" >
<li class="l">菲律宾警方封枪迎新年</li>
<li class="l">安徽黄山出现罕见雪淞奇观</li>
<li class="l">英国举行节礼日狩猎活动</li>
<li class="l">全球最恐怖的十大恶魔鱼</li>
</ul>
</div>
</div>
</body>
</html>
position定位
position属性： 用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
position取值 :
static（默认）
relative
absolute
fixed
sticky
relative相对定位：
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的
<style>
#box1{
width: 100px; height: 100px; background:red;}
#box2{
width: 100px; height: 100px; background:blue; position:relative; left:100px; top:100px;}
#box3{
width: 100px; height: 100px; background:yellow;}
</style>
absolute绝对定位：
使元素完全脱离文档流
使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，如果祖先元素没有定位，则该元素会相对于整个文档发生偏移（祖先元素可以是绝对、相对、固定定位）
fixed固定定位：
使元素完全脱离文档流
使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky黏性定位：
在指定的位置，进行黏性操作。
z-index定位层级
默认层级为0
嵌套的时候，父跟其他块比较，父没有则跟子比较
<style>
#parent{
width:100px; height:100px; border:1px black solid; position:absolute; z-index:-2;}
#box1{
width:100px; height:100px; background:red; position:absolute; z-index:0;}
#box2{
width:100px; height:100px; background:blue; position:absolute; left:50px; top:50px; z-index:-1;}
</style>
<div id="parent">
<div id="box1"></div>
</div>
<div id="box2"></div>
定位实现下拉菜单：
<style>
*{
margin:0; padding:0;}
ul{
list-style: none;}
#menu{
width: 100px; height: 30px; margin:20px auto; border:1px black solid;position:relative;}
#menu ul{
width:100px;border:1px black solid; position:absolute; left:-1px; top:30px; background:white;
display:none;}
p{
text-align:center;}
#menu:hover ul{
display:block;}
#menu ul li:hover{
background:gray;}
</style>
<div id="menu">
卖家中心
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</div>
<p>测试段落测试段落测试段落测试段落</p>
定位实现元素居中：
<style>
#box1{
width: 300px; height:300px; border:1px black solid;position:relative;}
#box2{
width:100px; height:100px; background:red; position:absolute; left:50%; top:50%; margin:-50px 0 0 -50px;}
</style>
<div id="box1">
<div id="box2"></div>
</div>
定位实现列表的装饰点：
用背景图实现：
#main ul li{padding-left: 18px;background: url(./img/dot.png) no-repeat 8px center;}
改为定位实现列表装饰点，就省去切图步骤了：
#main ul li{padding-left: 18px; position:relative;}
#main ul li:before{content:""; display:block; width:3px; height:3px;
background:red; position:absolute;left:8px; top:50%; margin-top:-2px;}
优酷定位练习：
<style>
*{
margin:0; padding:0;}
a{
text-decoration: none; color: #e1e1e2;}
ul{
list-style: none;}
img{
display:block;}
h1,h2,h3,h4,h5,h6{
font-size: 16px;}
.l{
float:left;}
.clear:after{
content:''; display:block;clear: both;}
#main{
width:673px; margin:20px auto; background:black;}
#main title{
overflow: hidden;}
#main .title div:hover{
color: #0d9bff;}
#main .content div:hover{
color:#0d9bff;}
#main .title h2{
height:32px; line-height:32px; font-size:25px; color: #e1e1e2; margin-left:8px; margin-top:10px; margin-bottom:19px;}
#main .title .sub_title{
line-height:20px; font-size:13px; color:#a2a2a4; margin-left:141px; padding-top:13px;}
#main .content{
margin-left:7px;}
#main .content2{
margin-left:13px;}
#main .content3{
margin-left:13px;}
#main .content div{
font-size:15px; color:#edecf1;}
#main .content p{
margin-bottom:15px; font-size:13px; color: #6f7277;;}
#main .content1{
position: relative;}
#main .content1:before{
content:'独播'; display: block; width: 32px; height:18px;
background:#ff658e;font-size:11px;font-weight:bold;color:white;
position:absolute; left:100%; margin-left:-32px;border-radius:0 50% 0 50%;}
#main .content1:after{
content:'6.1'; display: block; width: 32px; height:18px;
background:transparent;font-size:11px;font-weight:bold;color:#fd753b;
position:absolute; left:100%; top:65%;margin:-12px 0 0 -28px ;}
#main .content2{
position: relative;}
#main .content2:before{
content:'VIP'; display: block; width: 32px; height:18px;
background:#fdd5bb;font-size:11px;font-weight:bold;color:#2d432c;
position:absolute; left:100%; margin-left:-32px;border-radius:0 50% 0 50%;}
#main .content2:after{
content:'10话全'; display: block; width: 46px; height:19px;
background:transparent;font-size:11px;font-weight:bold;color:white;
position:absolute; left:100%; top:65%;margin:-19px 0 0 -46px ;}
#main .content3{
position: relative;}
#main .content3:before{
content:'独播'; display: block; width: 32px; height:18px;
background:#ff658e;font-size:11px;font-weight:bold;color:white;
position:absolute; left:100%; margin-left:-32px;border-radius:0 50% 0 50%;}
#main .content3:after{
content:'6.1'; display: block; width: 32px; height:18px;
background:transparent;font-size:11px;font-weight:bold;color:#fd753b;
position:absolute; left:100%; top:65%;margin:-12px 0 0 -28px;}
</style>
<body>
<div id="main">
<div class="title clear">
<h2 class="l">正在热播</h2>
<a href="#">
<div class="sub_title">关于互联护苗举报专项行动公告</div>
</a>
</div>
<div class="content clear">
<ul>
<li>
<div class="content1 l">
<a href="#">
<img src="./img2/yk_2.jpg" alt="">
<div>战王 外星人入侵</div>
<p>飓风营救末日逃生</p>
</a>
</div>
</li>
<li>
<div class="content2 l">
<a href="#">
<img src="./img2/yk_1.jpg" alt="">
<div>伍六七3 爆燃</div>
<p>阿七玄武国遭劫杀</p>
</a>
</div>
</li>
<li>
<div class="content3 l">
<a href="#">
<img src="./img2/yk_2.jpg" alt="">
<div>战王 外星人入侵</div>
<p>飓风营救末日逃生</p>
</a>
</div>
</li>
</ul>
</div>
</div>
</body>
有一些小问题：
- content中的内容不知道怎么居中显示
- 鼠标移到右上角定位处 不显示能点击
后续再改吧。
CSS一些小操作
添加省略号
width
必须有一个固定的宽
white-space : nowrap
不让内容折行
overflow : hidden
隐藏溢出的内容
text-overflow : ellipsis
添加省略号
#content{ width: 200px; border:1px black solid; white-space:nowrap;overflow:hidden; text-overflow:ellipsis;}
<div id="content">测试文字测试文字测试文字测试文字测试文字</div>
该方法不支持多行，更复杂的要配合js。
CSS Sprite
特性：CSS雪碧/CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处：可减少图片的质量，网页图片加载速度快。减少图片的请求次数，加快网页的打开。
通过背景定位就可以找到对应的图标：
#box1{ width:20px; height:20px; background:url(./sprite_icon.png) no-repeat left -596px;}
#box2{width: 300px;height: 50px;border:1px black solid;line-height: 50px;padding-left:30px;
background:url(./sprite_icon.png) no-repeat right -516px;}
CSS圆角
border-radius属性
border-radius: 20px;
border-radius: 50%; 正圆一般写百分比
border-radius: 10px 20px; 10px代表左上角和右下角，20px代表右上角和左下角
border-radius: 10px 20px 30px 40px; 四个值为顺时针：左上，右上，右下，左下
border-radius: 20px/40px; 椭圆相切
实现半圆：
#box{width: 300px;height:150px;background:red;border-radius: 150px 150px 0 0;}
转载：https://blog.csdn.net/Xiaolei233/article/details/117042965
查看评论