CSS-PS切图+学成在线按例（01-32课）

最新推荐文章于 2023-03-30 15:01:10 发布

皮匠大大

最新推荐文章于 2023-03-30 15:01:10 发布

阅读量232

点赞数

分类专栏： CSS初学文章标签： html css

本文链接：https://blog.csdn.net/weixin_45727991/article/details/110006336

版权

CSS初学专栏收录该内容

18 篇文章 2 订阅

订阅专栏

1、常见的图片格式

1、jpg图像格式：jpeg（jpg）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式。

2、gif格式：gif格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果

3、png格式是一种新兴的网络图形格式，结合了gif和jpeg的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，要选择png格式。

4、psd图像格式psd格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿，对前端而言，最大的优点在于可以直接从上面复制文字，获得图片，还可以测量大小和距离。

2-6课、PS切图-图层切图

1、理解图层的概念

2、PS切图：
①图层切图：点击要切出的图片（右下角图层栏中），鼠标右键-快速导出为png即可
若图层有文字导不出来，将图层和文字合并，（Ctrl+e）再导出即可

②切片工具（C）：切片选中部分，文件-导出-存储为web形式的图片（保存页面：选中的切片）

③PS插件切图-cutterman切图：

7-。。课、按例（学成在线网页）

1）准备工作
1、前提，要有一个jpg和psd文件来切图
开发工具：PS VScode chrome

2、前期准备
（结构与样式相分离）

3、创建总文件夹study、3个子文件夹放图，css，html

4、首页文件为index.html（行业规定）样式文件style.css，html文件中link连接css

2）CSS属性书写顺序
在这里插入图片描述
eg：

3）页面布局整体思路！！！！！！！！！
1、确定页面的版心（核心区域），测量宽度
2、分析页面的行模块（布置大的盒子-标准流）
3、分析每一行中的列模块（布置大盒子里面小的盒子-浮动流）
4、制作html结构
5、制作CSS样式

4）header区域制作
1、确定版心

.w {
    width: 1200px;
    margin: auto;
}

2、大盒子header

* {
    margin: 0;
    padding: 0;
}

.w {
    width: 1200px;
    margin: auto;
}

.header {
    height: 42px;
    background-color: pink;
    /* 注意此地会层叠w里面的margin */
    margin: 30px auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>
    <div class="header w">
        头部盒子
    </div>
</body>

</html>

3、5个列（小盒子）（一个孩子浮动，所有兄弟都要浮动）
①分别切出5个小图片，放到对应的小盒子里面（切图的过程、、再说吧）

在这里插入图片描述
②导航栏的制作：

后面的部分有时间填坑。。。

皮匠大大

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-PS切图+学成在线按例（01-32课）

1、常见的图片格式1、jpg图像格式：jpeg（jpg）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式。2、gif格式：gif格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果3、png格式是一种新兴的网络图形格式，结合了gif和jpeg的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，要选择png格式。4、psd图像格式psd格式是Photoshop的专用格式，里面可以存放图层
复制链接

扫一扫