一个切图仔的工作日常

最新推荐文章于 2023-05-28 22:00:58 发布

赵羽珩

最新推荐文章于 2023-05-28 22:00:58 发布

阅读量1.7k

点赞数

1.拿到公司设计师给的PSD图（PC端给的是1920px的设计稿，移动端给的750px的设计稿）。

2.自己新建一个项目目录（默认有css，js,images文件夹以及一个index.html文件）。

3.分析设计图，使用PS切图工具进行切图（分析哪些内容需要切成图片，设计稿的图标，可以向设计师要这些图标的SVG图，或者到http://www.iconfont.cn/阿里巴巴矢量图网站找相应的图标svg，将所有的svg图标转换成字体图标到网站https://icomoon.io/app/#/select，生成的文件中将fonts文件夹和style.css放入项目目录里）。

4.切的图片需要透明的选择png-24格式，颜色多样且不需要透明的选择jpg品质60，切出来的全部图片在https://tinypng.com/网站上进行PNG和jpg的图片压缩。（PNG-8和PNG-24的区别，PNG-8适合颜色比较单一的图片如纯色，logo，图标相对图片大小比较小；PNG-24适合颜色比较丰富的图片相对图片大小比较大,现在几乎选用png-24）。

5.html文件

　PC端为主的响应式网站模板

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>网站标题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="Keywords" content="网站关键字">
    <meta name="Description" content="网站描述">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!--[if lt IE 9]>
        <script src="js/vendor/html5shiv.js"></script>
        <script src="js/vendor/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<!--[if lt IE 9]>
<p class="browserupgrade">您的浏览器版本过旧，请到<a href="http://browsehappy.com/">这里</a>更新，以获得最佳的体验</p>
<![endif]--><br>　　<!--网站主体内容-->
    <script type="text/javascript" src="js/vendor/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="js/vendor/jquery.placeholder.min.js"></script>
    <script type="text/javascript" src="js/vendor/fastclick.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</body>

</html>

　移动端为主的模板(微信，支付宝)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=750">
    <script type="text/javascript" src="js/vendor/mobile-util.min.js"></script>
    <title>标题</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <!-- 主体内容 -->
    <script src="js/vendor/zepto.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

6.css文件（重置样式：normalize.css，公共样式：common.css，页面样式：index.css）

7.js文件（依赖js:vendor文件夹–jq，zepto,fastclick,mobile-util,jquery.placeholder,html5shiv,respond;公共js：common.js，页面js：index.js）

8.根据设计稿，

　　—书写html主体结构

　　—CSS书写（盒子模型，定位，flex布局，百分比，圆角，行高，背景图片）

　　—JS书写（jq插件使用，click，导航切换，
　　show,hide,for,length,tap,find,addClass,removeClass,text,indexOf,parseFloat,split,hasClass,Number,toFixed）

9.完成所有html，css,js后，对css和js进行压缩。

10.项目打包交付给后端人员。

一个纯静态页面产出的切图仔（不涉及数据交互，不需要写ajax）

经典布局方案

左右两栏式

<!DOCTYPE html>
<head>
    <style>
        .wrap{
            margin:0 auto;
            width:80%;
        }
        #left{
            width:200px;
            height:300px;
            background: #ccffff;
            float: left;
        }
        #right{
            height: 300px;
            background: #ffcccc;
            margin-left:200px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <aside id="left">#left</aside>
        <section id="right">#right</section>
    </div>
</body></html>

三栏式布局（双翼）

<!DOCTYPE html>
<head>
    <style>
        .wrap {
            width:80%;
            margin:0 auto;
        }
        .header {
            height:100px;
            background: #66ccff;
        }
        .main {
            height:500px;
            background: #ffcccc;
        }
        .footer {
            height:80px;
            background: #99ccff;
        }

        .middle {
            width:100%;
            float: left;
        }
        .left {
            width:200px;
            height:100%;
            background: #ccffff;
            float: left;
            margin-left: -100%;
        }
        .right {
            width:200px;
            height:100%;
            background: #ccffff;
            float: left;
            margin-left: -200px;
        }
        .content {
            height:500px;
            margin:0 200px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="header">#header</div>
    <div class="main">
        <div class="middle">
            <div class="content">#content</div>
        </div>
        <div class="left">#left</div>
        <div class="right">#right</div>
    </div>
    <div class="footer">#footer</div>
</div>
</body></html>

css清除默认样式

@charset "utf-8";
/*
    妙味官网：www.miaov.com
    技术交流：bbs.miaov.com
*/

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
em { font-style:normal; }
li { list-style:none; }
a { text-decoration:none; }
img { border:none; vertical-align:top; }
table { border-collapse:collapse; }
input,textarea { outline:none; }
textarea { resize:none; overflow:auto; }
body { font-size:12px; font-family:"微软雅黑"; }
/* end reset */

赵羽珩

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
一个切图仔的工作日常

1.拿到公司设计师给的PSD图（PC端给的是1920px的设计稿，移动端给的750px的设计稿）。2.自己新建一个项目目录（默认有css，js,images文件夹以及一个index.html文件）。3.分析设计图，使用PS切图工具进行切图（分析哪些内容需要切成图片，设计稿的图标，可以向设计师要这些图标的SVG图，或者到http://www.iconfont.cn/阿里巴巴矢量图网站找相应的图标svg
复制链接

扫一扫