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

本文详细介绍了Photoshop中进行切图的三种常见方法:图层切图、切片切图和使用Cutterman插件切图。图层切图适用于单个元素的导出,通过合并图层并快速导出为PNG。切片切图则适合于需要按区域划分导出的场景,通过切片工具手动划定导出范围。而Cutterman插件提供了一种自动化切图解决方案,提高工作效率。文章还包含了一个简单的网页HTML结构示例,展示了切图在实际网页设计中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

PS切图

常见的图片格式

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

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

图层切图

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

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

  1. 选中需要的图层:图层菜单—>合并图层(Ctrl + e)
  2. 右击—>快速导出为PNG

在这里插入图片描述

切片切图

  1. 利用切片选中图片

    利用切片工具手动划出

  2. 导出选中图片

文件菜单—>导出—>存储为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;
}

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值