css(五)项目实战，ps切图

PS 切图
4.1 常见的图片格式
jpg图像格式： JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的
gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景
和动画效果, 实际经常用于一些图片小动画效果.
png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保
持透明背景. 如果想要切成背景透明的图片,请选择png格式.
PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿. 对我们
前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.

4.2 图层切图

最简单的切图方式：右击图层  快速导出为 PNG。
但是很多情况下,我们需要合并图层再导出:

选中需要的图层: 图层菜单  合并图层(ctrl+e)
右击  快速导出为 PNG
最好的方法是: 沟通

4.3 切片切图

利用切片选中图片
 利用切片工具手动划出
导出选中的图片
文件菜单  导出  存储为 web 设备所用格式 选择我们要的图片格式  存储。

4.3 PS 插件切图

Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工
“导出 web 所用格式” 以及使用切片工具进行挨个切图的繁琐流程。
官网：http://www.cutterman.cn/zh/cutterman
注意：Cutterman 插件要求你的 PS 必须是完整版，不能是绿色版，所以大家需要安装完整版本。

5. 学成在线案例

5.3 CSS 属性书写顺序(重点)

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

5.4 页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路：

必须确定页面的版心（可视区），我们测量可得知。
分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置. 页面布局第二准则
制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.
所以, 先理清楚布局结构,再写代码尤为重要. 这需要我们多写多积累.

5.6 头部制作

导航栏注意点:

实际开发中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。

li+a 语义更清晰，一看这就是有条理的列表型内容。
如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），
从而影响网站排名
注意:
让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.
这个nav导航栏可以不给宽度,将来可以继续添加其余文字
因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度

实战项目：

代码如下：
index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>学成在线</title><link rel="stylesheet" href="css/style.css" /></head><body><div class="header w"><!--logo部分--><div class="logo"><img src="data:images/logo.png" alt="" /></div><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课堂</a></li><li><a href="#">职业规划</a></li></ul></div><div class="search"><input type="text" value="输入关键词" /><button></button></div><!--用户模块--><div class="user"><img src="data:images/user.png" alt="" /> qq-lilei</div></div><!--banner部分--><div class="banner"><div class="w"><div class="subnav"><ul><li><a href="#">前端开发<span>&gt;</span></a></li><li><a href="#">前端开发<span>&gt;</span></a></li><li><a href="#">前端开发<span>&gt;</span></a></li><li><a href="#">前端开发<span>&gt;</span></a></li><li><a href="#">前端开发<span>&gt;</span></a></li><li><a href="#">前端开发<span>&gt;</span></a></li><li><a href="#">前端开发<span>&gt;</span></a></li><li><a href="#">前端开发<span>&gt;</span></a></li><li><a href="#">前端开发<span>&gt;</span></a></li></ul></div><!--课程表模块--><div class="course"><h2>我的课程表</h2><div class="bd"><ul><li><h4>继续学习，程序语言设计</h4><p>正在学习-使用对象</p></li><li><h4>继续学习，程序语言设计</h4><p>正在学习-使用对象</p></li><li><h4>继续学习，程序语言设计</h4><p>正在学习-使用对象</p></li></ul><a href="#" class="more">全部课程</a></div></div></div></div><div class="goods w"><h3>精品推荐</h3><ul><li><a href="#">Jquery</a></li><li><a href="#">Jquery</a></li><li><a href="#">Jquery</a></li><li><a href="#">Jquery</a></li><li><a href="#">Jquery</a></li></ul><a href="#" class="mod">修改兴趣</a></div><!--核心内容区域--><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="data:images/pic.png" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> *1125人正在学习</div></li><li><img src="data:images/pic.png" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> *1125人正在学习</div></li><li><img src="data:images/pic.png" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> *1125人正在学习</div></li><li><img src="data:images/pic.png" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> *1125人正在学习</div></li><li><img src="data:images/pic.png" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> *1125人正在学习</div></li><li><img src="data:images/pic.png" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> *1125人正在学习</div></li><li><img src="data:images/pic.png" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> *1125人正在学习</div></li><li><img src="data:images/pic.png" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> *1125人正在学习</div></li><li><img src="data:images/pic.png" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> *1125人正在学习</div></li><li><img src="data:images/pic.png" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> *1125人正在学习</div></li></ul></div></div><div class="footer"><div class="w"><div class="copyright"><img src="data:images/logo.png" alt=""/><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#" class="app">下载APP</a></div><div class="links">abc</div></div><div class="links"><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">管理团队</a></dd><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">管理团队</a></dd><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">管理团队</a></dd><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl></div></div></body></html>

css文件如下：

* {margin: 0;padding: 0;
}.body {background-color: #f3f5f7;
}li {list-style: none;
}a {text-decoration: none;
}.w {width: 1200px;margin: auto;
}.header {height: 42px;/*background-color: pink;*//*此处会重叠w里面的margin*/margin: 30px auto;
}.logo {float: left;width: 198px;height: 42px;/*background-color: purple;*/
}.nav {float: left;margin-left: 60px;
}.nav ul li {float: left;margin: 0 15px;
}.nav ul li a {display: block;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}.nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;
}/*搜索模块*/.search {float: left;width: 412px;height: 42px;background-color: skyblue;margin-left: 70px;
}.search input {float: left;width: 345px;height: 40px;border: 1px solid #00A4FF;border-right: 0;color: #bfbfbf;font-size: 1;padding-left: 15px;
}.search button {float: left;width: 50px;height: 42px;/*button默认有一个边框需要我们手动去掉*/border: 0;background: url(../images/btn.png);
}.user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666;
}.banner {height: 421px;background-color: #1c036c;
}.banner .w {height: 421px;background: url(../images/banner2_20190819_210028.png) no-repeat top center;
}.subnav {float: left;width: 190px;height: 421px;background-color: rgba(0, 0, 0, 0.3);
}.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;
}.subnav ul li a {font-size: 14px;color: #fff;
}.subnav ul li a span {float: right;
}.subnav ul li a:hover {color: #00A4FF;
}.course {/*浮动的盒子不会有外边距合并的问题*/float: right;width: 230px;height: 300px;background-color: #FFFFFF;margin-top: 50px;
}.course h2 {height: 48px;background-color: #9bceea;text-align: center;line-height: 48px;font-size: 18px;color: #fff;
}.bd {padding: 0 20px;
}.bd ul li {padding: 13px 0;border-bottom: 1px solid #ccc;
}.bd ul li h4 {font-size: 16px;color: #4e4e4e;
}.bd ul li p {font-size: 12px;color: #a5a5a5;
}.bd .more {display: block;height: 38px;border: 1px solid #00A4FF;text-align: center;line-height: 38px;color: #00A4FF;font-size: 16px;font-weight: 700;margin-top: 5px;
}/*精品推荐模块*/.goods {height: 60px;background-color: #FFFFFF;margin-top: 10px;box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);/*行高会继承给3个孩子*/line-height: 60px;
}.goods h3 {float: left;margin-left: 30px;font-size: 16px;color: #00A4FF;
}.goods ul {float: left;margin-left: 30px;
}.goods ul li {float: left;
}.goods ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #CCCCCC;
}.mod {float: right;margin-right: 30px;font-size: 16px;color: #00A4FF;
}.box {margin-top: 30px;
}.box .box-hd {height: 45px;
}.box .box-hd h3 {float: left;font-size: 20px;color: #494949;
}.box .box-hd a {float: right;font-size: 12px;color: #A5A5A5;margin-top: 10px;margin-right: 30px;
}.box .box-bd ul {width: 1225px;
}.box .box-bd ul li {float: left;width: 228px;height: 270px;background-color: white;margin-right: 15px;margin-bottom: 15px;
}.box .box-bd ul li img {width: 100%;
}.box .box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;color: #050505;font-weight: 400;
}.box .box-bd ul li .info {margin: 0 20px 0 25px;font-size: 12px;color: #999;
}.box .box-bd ul li .info span {color: #ff7c2d;
}.footer {height: 415px;background-color: #FFFFFF;
}.clearfix:before,
.clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1;
}.footer .w {padding-top: 35px;
}.copyright {float: left;
}.copyright p {font-size: 12px;color: #666666;margin: 20px 0 15px 0;
}.copyright .app {display: block;border: 1px solid #00A4FF;color: #00A4FF;margin-top: 10px;width: 118px;height: 33px;text-align: center;line-height: 33px;font-size: 16px;
}.links {float: right;
}.links dl {float: left;margin-left: 100px;
}.links dl dt {font-size: 16px;color: #333;margin-bottom: 5px;
}.links dl dt a {color: #333;font-size: 12px;
}

css(五)项目实战，ps切图相关推荐

CSS学习笔记之PS切图 3.1
1.1 常见的图片格式 1.jpg图像格式:对色彩的信息保留较好 2.gif图像格式:常用于一些图片小动画效果 3.png图像格式:结合了GIF和JPEG的优点,保持透明背景 4.PSD图像格式:Ph ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
css第4天笔记-圆角边框；盒子阴影；文字阴影；浮动；PS切图
学习内容:圆角边框:盒子阴影:文字阴影:浮动:PS切图一.其他样式 1.圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的 ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
CSS学习（第四天）（浮动，常见网页布局，清除浮动，PS切图）
CSS浮动 1 浮动 1.1传统网页布局的三种方式 1.2 标准流(普通流/文档流) 1.3 为什么需要浮动? 1.3为什么需要浮动? 1.4什么是浮动? 1.5浮动特性(重难点) 1.6 浮动元素经 ...
CSS浮动、PS切图、学成在线案例前期准备
传统网页布局的三种方式网页布局的本质--用CSS来摆放盒子,把盒子摆放到相应位置 CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 普通流(标准流) 浮动定位标准流所谓标准流 ...
两种ps切图方法（图层/切片）
两种Ps切图方法一．基础操作: a) Ctrl++ 放大图片,ctrl - -缩小图片 b) 按住空格键space+,点击鼠标左键,拖动图片. c) 修改单位,点击编辑 ...
实用形ps切图技巧，图片格式及其相关
写在前面之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容. 关于版本 ...
前端ps切图，图文教程，详细。
写在前面:本文主要内容是目前我所知道的切图技巧结合网上的资料,写出来分享一波.图文教程,多图!! BB:很多人都会说,切图这个活倒底分给UI还是分给前端.虽然好的UI会给我们把图切好,但是他们切的图不 ...
【学习笔记】前端开发调试工具与PS切图技巧
[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理 ...