放入图片：ctrl+o；
alt+移动鼠标：可以无限复制；（ctrl+j）
ctrl+g对多个图层分组
ctrl+shift+[ ]移动图层
按住shift图片水平、垂直或45走（不跑偏）
合并图层（ctrl+e）
选取反选（ctrl+shift+i）
一、ps切图
1、利用切面工具手动导出（ctrl+shift+alt+s）--选中的切片
2、图层-新建-基于图层的切片（ctrl+shift+alt+s）
3、辅助线切图（利用标尺-选择切片工具-基于参考线的切片）
项目
多行快速添加：ctrl+alt+c；
li是块级元素，（只要是文字导航栏，我们都用li包裹a来处理）
宽度可以继承，高度不可以继承；
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--样式-->
<style>
/*css初始化*/
* {
/*清除内外边距*/
margin: 0;
padding: 0;
}
/*整个页面的背景色*/
body {
background-color: #f3f5f7;
}
ul {
/*清除列表里的小点*/
list-style: none;
}
/*清除浮动*/
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
a {
color: #050505;
/*清除下划线*/
text-decoration: none;
}
input {
/*所有的表单边框为0*/
border: 0;
/*css3盒子模型 border和padding都包含到width里面去(不需要计算了)*/
box-sizing: border-box;
}
/*因为我们的版心宽度都是1200 都要居中对齐 我们就声明一个公共类*/
.container {
width: 1200px;
/*居中对齐*/
margin: 0 auto;
}
/*css初始化结束*/
/*页面头部分*/
header {
height: 100px;
/* background-color: paleturquoise;*/
/*解决两个盒子外边距合并的问题*/
overflow: hidden;
}
nav {
width: 2000px;/*小盒子宽度1600px*/
height: 42px;
/* background-color: palevioletred;*/
/*盒子居中对齐*/
margin: 26px auto;
}
.logo {
float: left;
}
.navbar {
float: left;
height: 42px;
line-height: 42px;/*这个行高给父亲就可以了，因为行高会继承*/
/*撑开logo和文字 两个黑子之间的距离*/
margin-left: 50px;
}
.navbar li {
float: left;/*让首页课程一行显示*/
}
.navbar li a {
/*上下0 左右8px*/
padding: 0 10px;
/*border-bottom: 1px solid red;*/
/*因为a是行内元素，给高需要转换为块级元素*/
display: block;
height: 42px;
}
.navbar li a:hover {
/*鼠标放入有底边框*/
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
/*搜索框部分*/
.search {
height: 38px;
width: 410px;/*360*50*/
border: 1px solid #00a4ff;
float: right;
}
.search input[type=text] {/*属性选择器(选取的是type=text的文本框)*/
/*background-color: palegoldenrod;*/
width: 360px;
height: 38px;
padding-left: 20px;
/*行内块元素之间会有缝隙，所以要他们浮动起来，去除空隙*/
float: left;
}
.search input[type=submit] {/*属性选择器(选取的是type=submit的文本框)*/
width: 50px;
height: 38px;
background-color: #00a4ff;
float: left;
/*按钮上没法插入图片，只能插入背景*/
background: url(img/seach.jpg) center center no-repeat;
}
.personal {
float: right;
height: 42px;
line-height: 42px;
/*遵循上右下左 右15 左30*/
margin: 0 15px 0 30px
}
.personal img {
margin: 0 10px;
}
/*个人中心*/
/*bannerstar*/
.banner {
height: 420px;
background-color: #1c036c;
}
.banner-in {
height: 420px;
background: url(img/banner.jpg) 0 0 no-repeat;
}
.slidebar {
height: 420px;
width: 220px;
/*盒子半透明*/
background:rgba(0,0,0,0.4);
float: left;
}
.slidebar li a {
color: white;
font-size: 16px;
/*a内边距上下0，左右20px*/
padding: 0 20px;
/*a是行内元素，没有高度，若想有高度必须转换成块级元素*/
display: block;
height: 45px;
/*文字垂直居中，行高=高(很多情况下，有了行高可以不给高度)*/
line-height: 45px;
}
.slidebar li a:hover {
color: #00A4FF;
}
.slidebar li a span{
float: right;
/*一般情况下我们的符号都用这个字体*/
font-family: arial;
}
.timetable {
float: right;
width: 230px;
height: 300px;
background-color: white;
margin-top: 50px;
}
.timetable dt {
height: 50px;
/*文字水平居中*/
line-height: 50px;
background-color: #9bceea;
text-align: center;/*文字水平居中*/
color: white;
font-weight: 700;/*文字加粗*/
letter-spacing: 2px;/*设置字间距*/
margin-bottom: 5px;
}
.timetable dd {
width: 193px;
height: 60px;
background-color: white;
padding-top: 12px;
/*盒子加了宽高会被撑开*/
box-sizing: border-box;
/*盒子居中对齐*/
margin: 0 auto;
border-bottom: 1px solid #ccc;
}
.timetable dd:last-child {/*结构伪类选择器*/
border: 0;
}
.timetable dd h4 {
font-size: 16px;
font-weight: normal;/*让粗体不变粗*/
color: #4e4e4e;
}
.timetable dd p {
color: #a5a5a5;
font-size: 14px;
}
.timetable dd a {
height: 38px;
border: 1px solid #00a4ff;
display: block;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-weight: 700;/*不要加单位 */
}
.timetable dd a:hover {
background-color: #00A4FF;
color: white;
}
/*bannerend*/
.recommend {
height: 60px;
line-height: 60px;
/* background-color: khaki;*/
margin-top: 8px;
/*盒子阴影 水平位置 垂直位置 模糊距离 阴影颜色*/
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
.recommend a {
padding: 0 30px;
border-right: 1px solid #CCCCCC;
}
.recommend a:hover {
color: #00a4ff;
}
.recommend a:first-child {
color: #00a4ff;
}
.recommend a:last-child {
color: #00a4ff;
border: 0;
float: right;
font-size: 14px;
}
</style>
</head>
<body>
<!--结构-->
<!--页面头部-->
<header>
<nav>
<!--logo部分-->
<div class="logo">
<img src="img/logo.jpg" alt="logo" />
</div>
<!--导航栏部分用li来做-->
<div class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!--个人中心-->
<div class="personal">
<a href="#">个人中心
<img src="img/ling.jpg" alt="" />
</a>
<a href="#">
<img src="img/tou.jpg"/>
刘德华
</a>
</div>
<!--搜索框部分-->
<div class="search">
<form action="" method="post">
<input type="text" placeholder="请输入关键词"/>
<input type="submit" value=""/>
</form>
</div>
</nav>
</header>
<!--banner部分-->
<div class="banner">
<!--多类名的使用-->
<div class="banner-in container">
<!--左侧导航栏(侧边栏)-->
<div class="slidebar">
<ul>
<li><a href="#">前端开发<span> > </span></a></li>
<li><a href="#">后端开发<span> > </span></a></li>
<li><a href="#">移动开发<span> > </span></a></li>
<li><a href="#">人工智能<span> > </span></a></li>
<li><a href="#">商业预算<span> > </span></a></li>
<li><a href="#">云计算&大数据<span> > </span></a></li>
<li><a href="#">运维&测试<span> > </span></a></li>
<li><a href="#">UI设计<span> > </span></a></li>
<li><a href="#">产品<span> > </span></a></li>
</li>
</ul>
</div>
<!--小课表部分 -->
<dl class="timetable">
<dt>我的课程表</dt>
<dd>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</dd>
<dd>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</dd>
<dd>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</dd>
<dd>
<a>全部课程</a>
</dd>
</dl>
</div>
</div>
<div class="recommend container">
<a href="#">精品推荐</a>
<a href="#">精品推荐</a>
<a href="#">精品推荐</a>
<a href="#">精品推荐</a>
<a href="#">精品推荐</a>
<a href="#">精品推荐</a>
<a href="#">精品推荐</a>
<a href="#">精品推荐</a>
</div>
</body>
</html>
