浅谈html和css中的PS

我们知道一个漂亮的网页必然会使用大量的图片,而这些图片的处理、来源很重要。一般我们在制作网页时的图片都会有专门的部门提供(如:美工部),他们提供的图片是PSD格式,里面会有我们想要的一切来源,不管是字体样式,字体颜色,字体大小,背景颜色,以及各种你所需要的图片,都可以利用ps进行获取。
字体:点击字体的标签**“T”**,如下图所示:浅谈html和css中的PS_第1张图片
颜色:通过吸管工具,对你想要地方的颜色进行取色,点击前景色出现拾色器,直接复制颜色十六进制的值。如下图所示:
浅谈html和css中的PS_第2张图片

图片:我们可以通过图层一点点导出我们想要的图片。在想要的图片所在的图层,右击,点击快速导出PNG即可。如下图所示:
浅谈html和css中的PS_第3张图片

对于插入到网页中的图片,我们是可以通过width和height改变图片大小,但是如果我们能够得到的图片的大小是被精心设计过的,那我们使用起来会更加的容易。

图片在html中可以作为背景图片插入

background-image:url(图片的路径)
background-repeat:no-repeat/repeat;
background-position:可以利用百分比对图片进行定位如:110% 50%;
background-size:cover/contain;

图片可以直接插入

‘’ class=

在css中可以对img进行设置如

float:left;
width:50px;
heigth:30px;

等等
当然图片还可以作为按钮的背景图片,还可以作为textarea的背景图片等等。

另外关于我们经常用到的小图标大家可以搜索font-awesome,里面包含了我们可以用到的大量的小图标。

以上就是我此次要分享的内容,欢迎大家多多评论,多多指正!!!
浅谈html和css中的PS_第4张图片

你可能感兴趣的:(HTML和CSS)