HTML&CSS基础-ps的基本操作
HTML&CSS基础-ps的基本操作
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
我们工作中可能会经常需要将一个图片做成一个网页，而图片中的字体大小，行间距，图中logo大小的策略工作基本都是由美工来搞定，但如果没有美工的话就得咱们自己来搞了。我们可以使用QQ的截图工具来测量，但毕竟不太专业，因此推荐使用PS工具配置，关于PS安装过于简单我这里就不演示了，但是安装好PS之后需要对进行一些初始化配置来更加适合网页开发的需求。
一.将PS默认的单位改成像素(px是网页中经常使用的长度单位，而PS默认的单位是cm)
1>.点击"编辑" ---> "首选项" ---> "界面" ---> "单位与标尺"，会弹出如下图所示的对话框，注意默认单位是"cm",并不合适网页开发。
2>.修改默认单位
二.PS基本操作
1>.点击"窗口" ---> "工作区" ---> "复位基本功能"，然后就图片拉入到PS工作区中，如下图所示
2>.按住"ctrl + 1"可以立即还原图片原样显示，"ctrl + 0"适应屏幕大小，按住"ctrl + r"会可以"显示/隐藏"标尺，按住"alt"键可以放大图片，如下图所示
3>.自定义矩形的大小(按F8会显示详细信息)获取像素宽度和高度信息
如下图所示有矩形，单击该举行后会有四个类型，默认使用第一个类型:
第一个矩形是只能选择一个矩形区域;
第二个矩形的特点是可以选择多个区域，且每个区域的叠加部分就是选中的区域;
第三个矩形的特点是当多个矩形相交时，会把相交的区域删除掉;
第四个矩形就更加彻底了，它只会取多个矩形的交集部分,即相交的部分就就不好啦; 如下图所示，可以在标尺区域拉出来多跟线辅助咱们构图，按住"ctrl + h"可以"显示/隐藏"这些线
4>.使用取色器
5>.选中图片后，点击"图像" ---> "裁剪"后会将内容截取出来，点击"文件" ---> "存储威威Web 所用格式"(根据图片使用原则选择存储格式)
图片的格式:
JPEG(JPG):
JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
一般使用JPEG来保存照片等颜色丰富的图片。
GIF:
GIF支持的颜色少，只支持简单的透明，支持动态图。
图片颜色单一或者动态图可以使用gif
PNG:
PNG支持的颜色多，并且支持复杂的透明
可以用来显示颜色复杂的透明的图片。 图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的 HTML对于图片的处理方式可参考:https://www.cnblogs.com/yinzhengjie/p/8542361.html
三.编写开班信息网页图片
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>开班计划</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
} /*统一页面中的字体*/
body{
font: 12px/1 "微软雅黑" ;
} /*设置outer的大小*/
.outer{
width: 300px;
/*设置outer居中效果*/
margin: 50px auto;
} /*
* 设置title的边框
*/
.title{
/*设置上边框*/
/* border-top:2px #019e8b solid ;*/
/*设置盒子的高度*/
height: 36px;
/*设置背景样式*/
background-color: #f5f5f5;
/*设置title的行高*/
line-height: 36px;
/*设置title的内边距*/
padding: 0px 22px 0px 16px;
} /*
设置title中的超链接
* */
.title a{
float: right;
/*设置字体颜色*/
color: red;
} /*设置h3*/
.title h3{
font: 16px/36px "微软雅黑";
} /*设置内容*/
.content{
border: 1px solid #deddd9;
/*设置内边距*/
padding: 0px 28px 0px 20px;
} /*设置内容中的超链接*/
.content a{
color: black;
/*去除超链接的下划线*/
text-decoration: none;
/*设置字体大小*/
font-size: 12px;
} /*为超链接添加一个hover伪类*/
.content a:hover{
color: red;
/*为超链接添加下划线*/
text-decoration: underline;
} /*设置内容中的标题*/
.content h3{
margin-top: 14px;
margin-bottom: 16px;
} /*
* 设置右侧的a的样式
*/
.content .right{
/*设置向右浮动*/
float: right;
} /*设置ul的样式*/
.content ul{
/*去除项目符号*/
list-style: none;
/*为ul设置一个下边框*/
border-bottom: 1px dashed #deddd9;
} /*取消最后一个ul的边框*/
.content .no-border{
border: none;
} /*设置内容中的红色字体*/
.content .red{
color: red;
font-weight: bold;
} /*设置内容中的li*/
.content li{
margin-bottom: 15px;
} </style>
</head>
<body> <!--创建一个外层div，容纳整个内容-->
<div class="outer"> <!-- 开班信息的头部 -->
<div class="title">
<a href="#">2020年面授开班计划</a>
<h3>近期开班</h3>
</div> <!-- 开班信息的主要内容 -->
<div class="content">
<h3><a href="#">Linux云计算+devops</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2019-12-25</span></a>
</li>
<li>
<a class="right" href="#"><span class="red">无座，名额爆满</span></a>
<a href="#">开班时间：<span class="red">2018-07-15</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2018-03-15</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2017-08-25</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-12-26</span></a>
</li>
</ul> <h3><a href="#">Python+人工智能</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2019-08-10</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2018-12-17</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2018-03-20</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2017-10-21</span></a>
</li>
</ul>
<h3><a href="#">Golang+容器开发</a></h3>
<ul class="no-border">
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2019-05-10</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2018-03-16</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
2>.浏览器打开以上代码渲染结果
HTML&CSS基础-ps的基本操作的更多相关文章
- 软件测试必备-前端知识点之css基础及ps的用法
CSS 一. css定义 css样式表.层叠样式表,级联样式表 二. css基础语法 1. 写style标签,放在head标签里面的最后位置 2. 自己写的css代码,放在style标签里面 三. c ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- HTML&&CSS基础知识点整理
HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础总结
CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
随机推荐
- JS正则验证6位数字组成，验证纯中文组成
常见的简单规则还有6位数字组成的密码,如果想要6位数字以上,第二个参数可以不设置.验证是否是纯中文,可以用Unicode字符区间,在网上找到了验证中文的表达式,然后查了查看Unicode编码的表格,这 ...
- C#中Request.servervariables参数
整理一下,我在asp.net下遍历的Request.servervariables这上集合,得出的所有参数如下: : Request.ServerVariables["ALL_HTTP&qu ...
- UCOS III的时间片轮转调度的一个问题
1. 如果当前一个任务A在时间片未到来之前,主动放弃剩下的时间片,进入下一个任务B,那么下一个任务的的执行时间是多久? 书上说,是重置时间片,也就是说任务B也运行一个完整的时间片.
- IntelliJ IDEA 下搭建vue项目工程
Vue 项目:运行 npm run dev 后报错 “'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件.” 前提: 电脑已经安装了node 和 npm, ...
- php设计模式；抽象类、抽象方法
设计模式 什么叫设计模式 所谓设计模式,就是一些解决问题的“常规做法”,是一种认为较好的经验总结.面对不同的问题,可能会有不同的解决办法,此时就可以称为不同的设计模式. 工厂模式 在实际应用中,我们总 ...
- LeetCode 671. 二叉树中第二小的节点(Second Minimum Node In a Binary Tree) 9
671. 二叉树中第二小的节点 671. Second Minimum Node In a Binary Tree 题目描述 给定一个非空特殊的二叉树,每个节点都是正数,并且每个节点的子节点数量只能为 ...
- Spring MVC <mvc:annotation-driven/>的作用
一.mvc:annotation-driven的作用 Spring 3.0.x中使用了mvc:annotation-driven后,默认会帮我们注册默认处理请求,参数和返回值的类,其中最主要的两个类: ...
- Java中XML的四种解析方式（一）
XML是一种通用的数据交换格式,它的平台无关性.语言无关性.系统无关性给数据集成与交互带来了极大的方便.XML在不同的语言环境中解析的方式都是一样的,只不过实现的语法不同而已. XML文档以层级标签的 ...
- Django使用指南
一.安装Django 1.命令行安装 pip3 install django(默认安装最新稳定版本) pip3 install django==版本号(指定版本安装) 2.Pycharm安装 在Pyc ...
- Django出错Xadmin后台报list index out of range
input_html = [ht for ht in super(AdminSplitDateTime, self).render(name, value, attrs).split('/>&l ...