CSS学习笔记7PS切图与仿学成在线例子

PS切图

常见的图片格式

jpg，产品类的图片经常使用
gif，实际经常用于一些图片小动画效果
png，如果想要切成背景透明的图片，请选择png格式
PSD，可以直接从上面复制文字，获得图片，还可以测量大小和距离

PS有很多切图方式：图层切图、切片切图、PS插件切图等

图层切图

最简单的切图方式：右击图层—>快速导出为PNG

但是很多情况下，我们需要合并图层再导出：

选中需要的图层：图层菜单—>合并图层（Ctrl + e）
右击—>快速导出为PNG

切片切图

利用切片选中图片

利用切片工具手动划出
导出选中图片

文件菜单—>导出—>存储为web设备所用格式—>选择我们要的图片格式—>存储

PS插件切图：Cutterman

仿学成在线例子

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>色图在线</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><!-- 1.头部区域 --><div class="header"><!-- logo部分 --><div class="logo"><img src="img/logo.png" ></div><!-- 导航栏部分 nav --><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><!-- 2.banner区域 --><div class="banner"><!-- 版心 --><div class="w"><div class="subnav"><ul><li><a href="#">LOL宇宙<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></div><!-- 3.色图推荐模块 --><div class="goods w"><h3>色图推荐</h3><ul><li><a href="#">琴女之家</a></li><li><a href="#">阿狸</a></li><li><a href="#">卡莎</a></li><li><a href="#">蔚</a></li><li><a href="#">扎克与锐雯</a></li></ul><a href="#" class="mod">修改兴趣</a></div><!-- 4.box核心内容区域 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><em><img src="img/5-120601154124.png"></em><img src="img/娑娜.jpg"><h4>琴瑟仙女 娑娜</h4><div class="info"><span>观看人数</span>：7826人正在学习</div></li><li><img src="img/卡莎头像.jpg" ><h4>虚空之女 卡莎</h4><div class="info"><span>观看人数</span>：2678人正在学习</div></li><li><em><img src="img/5-120601154124.png"></em><img src="img/扎克锐雯.jpg" ><h4>同人 扎克与锐雯</h4><div class="info"><span>观看人数</span>：9999人正在学习</div></li><li><img src="img/蔚.jpg" ><h4>女警察 蔚</h4><div class="info"><span>观看人数</span>：3001人正在学习</div></li><li><em><img src="img/5-120601154124.png"></em><img src="img/厄运.jpg"><h4>武装战姬 莎拉</h4><div class="info"><span>观看人数</span>：5060人正在学习</div></li><li><img src="img/薇恩.jpg" ><h4>烈焰美人 黑丝 大长腿 薇恩</h4><div class="info"><span>观看人数</span>：4550人正在学习</div></li><li><img src="img/卡莎.jpg" ><h4>KDA同人 卡莎</h4><div class="info"><span>观看人数</span>：3780人正在学习</div></li><li><em><img src="img/5-120601154124.png"></em><img src="img/索拉卡.jpg" ><h4>星之守护者同人 索拉卡</h4><div class="info"><span>观看人数</span>：6512人正在学习</div></li><li><img src="img/阿卡丽.jpg" ><h4>KDA同人 阿卡丽</h4><div class="info"><span>观看人数</span>：4444人正在学习</div></li><li><img src="img/阿狸.jpg" ><h4>永恒之森同人 阿狸</h4><div class="info"><span>观看人数</span>：2222人正在学习</div></li></ul></div></div><!-- 5.footer模块 --><div class="footer"><div class="w"><div class="copyright"><img src="img/logo.png" ><p>色图在线致力于普及世界最好的色图，它与世界一流大学和机构合作提供在线色图。<br>2021年CQD.保留所有权利。-皮ICP备173173173号</p><a href="#" class="app">下载APP</a></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></div></body>
</html>

* {margin: 0;padding: 0;
}.w {width: 1200px;margin: auto;
}
body {background-color: #f3f5f7;
}
li {list-style: none;
}
a {text-decoration: none;
}
.clearfix:before,.clearfix:after {content: "";display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom: 1;
}/* 头部模块 */
.header {height: 74px;background-color: black;/* 注意此地方会层叠w里面的margin */margin: 0 auto;
}
.logo {float: left;margin-left: 200px;width: 170px;height: 56px;background-color: purple;
}
.nav {float: left;margin-left: 100px;
}
.nav ul li {float: left;margin-top: 15px;
}
.nav ul li a {display: block;height: 42px;padding: 0 25px;line-height: 40px;font-size: 18px;color: #fff;
}
.nav ul li a:hover {border: 0 solid #e4cd6e;color: #e4cd6e;
}
.search {float: left;margin-left: 100px;margin-top: 15px;width: 412px;height: 42px;background-color: pink;
}
.search input {float: left;width: 345px;height: 40px;border: 1px solid black;border-right: 0;color: #bfbfbf;font-size: 14px;padding-left: 16px;
}
.search button {float: left;width: 50px;height: 42px;background-color: yellow;/* 按钮默认有边框,需要去掉 */border: 0;background-image: url(../img/search.png);
}/* banner模块 */
.banner {height: 565px;background-color: deeppink;background: url(../img/琴瑟仙女%20娑娜1920x1080.jpg) no-repeat -383px top;
}
.subnav {width: 280px;height: 565px;background:rgba(0,0,0,0.6);
}
.subnav ul li {height: 60px;line-height: 60px;padding: 0 40px;
}
.subnav ul li a {font-size: 14px;color: #fff;
}
.subnav ul li a span {float: right;
}
.subnav ul li a:hover {color: #e4cd6e;
}/* 色图推荐模块 */
.goods {height: 60px;line-height: 60px;background-color: #FFF;margin-top: 10px;box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1);
}
.goods h3 {float: left;margin-left: 30px;font-size: 16px;color: #e4cd6e;
}
.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 #ccc;
}
.mod {float: right;margin-right: 30px;font-size: 14px;color: #e4cd6e;
}/* box模块 */
.box {margin-top: 30px;
}
.box-hd {height: 45px;
}
.box-hd h3 {float: left;font-size: 20px;color: #494949;
}
.box-hd a {float: right;font-size: 12px;color: #a5a5a5;margin-top: 10px;margin-right: 30px;
}
/* 把li的父亲 ul 修改得足够宽，一行能装下5个盒子就不会换行了 */
.box-bd ul {width: 1225px;
}
.box-bd ul li {/* 子绝父相 */position: relative;float: left;width: 228px;height: 470px;background-color: #fff;margin-right: 15px;margin-bottom: 15px;
}
.box-bd ul li > img {width: 100%;
}
.box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;color: #050505;font-weight: 400;
}
.box-bd ul li em {position: absolute;top: 4px;right: -8px;
}
.box-bd .info {margin: 0 20px 0 25px;font-size: 12px;color: #999;
}
.box-bd .info span {color: #ff7c2d;
}
/* footer模块 */
.footer {height: 333px;background-color: black;
}
.footer .w {padding-top: 35px;
}
.copyright {float: left;
}
.copyright p {font-size: 12px;color: #e4cd6e;margin: 20px 0 15px 0;
}
.copyright .app {display: block;width: 118px;height: 33px;border: 1px solid #e4cd6e;text-align: center;line-height: 33px;color: #e4cd6e;font-size: 16px;
}
.links {float: right;
}
.links dl {float: left;margin-left: 100px;
}
.links dl dt {font-size: 16px;color: #e4cd6e;margin-bottom: 5px;
}
.links dl dd a {color: #e4cd6e;font-size: 12px;
}

CSS学习笔记7PS切图与仿学成在线例子相关推荐

html学习（06）-网页制作【学成在线】
文章目录一网页制作流程 1.1 根据项目需求创建根目录 1.2 从掌握网页布局基本步骤 1.3 效果 1.4 代码 1.4.1 HTML代码 1.4.2 CSS代码一网页制作流程 1.1 根据 ...
css学习任务二：切图写代码
今天的任务是根据UI给的图进行切图,然后写出相应的页面,UI如下: 收获:学习前端知识一年有余,却因为老是找不到实战项目而得不到实际的提高,直到今天的学习我才知道切图是怎么一回事,明白了你看到一张漂亮 ...
CSS浮动、PS切图、学成在线案例前期准备
传统网页布局的三种方式网页布局的本质--用CSS来摆放盒子,把盒子摆放到相应位置 CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 普通流(标准流) 浮动定位标准流所谓标准流 ...
CSS学习笔记-—学会用PS切图和取色—day03(基本用法)
CSS学习系列文章目录 HTML和CSS学习笔记--day01 HTML.CSS学习笔记--day02 css4.2.4参考手册.zip(免费下载) 文章目录 CSS学习系列文章目录一.PS测量图片 ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
[开发笔记]-页面切图、CSS前端设计、JS
这两天在学习页面的切图,样式设计,把学习过程中注意的地方记录下来. 一. input输入框点击时去掉外边框一般在IE,firefox下,设置 border:0 none; 即可.但在chrome下, ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
css布局与ldquo;切图rdquo;
CSS布局与"切图" 很多朋友问到关于在网页设计中,特别是使用CSS布局的时候,如何切图的问题,今天就来说说这个问题. 在过去,使用表格布局的时候,通常是整个页面在Photosho ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...

CSS学习笔记7PS切图与仿学成在线例子

PS切图

常见的图片格式

图层切图

切片切图

PS插件切图：Cutterman

仿学成在线例子

CSS学习笔记7PS切图与仿学成在线例子相关推荐

最新文章

热门文章