[真传弟子]JS-赵立鼐|2019年11月02日的日报-技能树.IT修真院

发表于： 2019-11-02 13:17:04

1 1080

今日完成：

任务三的切图有点问题，再重新梳理下整个切图过程：

1、打开psd图。先浏览整个页面，哪些是能用css实现的，哪些是用图片实现的，能用css代码实现的尽量用代码实现。

昨天扣下面这两个图标时带上了底部的文字一起切了。这就不符合上面所讲的，能用css代码实现的就不要用图片了，所以就只扣圆形图标就好了。

这次不再手动扣了，使用图层加一个插件来实现。

在右下角，展示图层的那一栏，有已经分好的不同图层。

选择隐藏一个图层（点击前面眼睛按钮）

可以看到葡萄消失了。这个图层被隐藏了。接着再隐藏下面椭圆1拷贝这个图层

整个图标都消失了

可以判断这两个图层是我们需要扣下来的图标。接下来，同时选中这两个图层，记得恢复隐藏（把眼睛点出来）

然后按F2（这里使用了插件）插件链接https://www.cnblogs.com/rangzf/p/3279848.html

图片就抠出来了。

存储为web格式

然后把图片引入到页面中看看效果：

左边是刚切出来的，右边是昨天用切片切的。可以看出来左边这个图有白边啊，这可怎么搞？？

在存储为web所有格式这一步时，界面右边有一些设置图片的选项。

给杂边设置为前景色

最后看看效果：

白边没了！

搞了一天，有些地方还是得调整下。

代码先提交了，有点乱，可能还会有问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,,maximum-scale=1,user-scale=no">

    <title>task4</title>
    <link rel="stylesheet" type="text/css" href="../css/task4.css">
</head>
<body>
<header>
      <a href="" class="signOn">关闭</a>
      <a href="" class="login">登陆</a>
      <a href="" class="signIn">注册</a>
</header>

<div>

        <div class="iphone">
        <img src="../img/locked-2.png">
        </div>


<input type="text" placeholder="请输入手机号">

    <div class="iphone">
        <img src="../img/iphone.png">
    </div>
<input type="text" placeholder="请输入密码">
    <button> 登陆</button>
    <a href="">忘记密码？</a>
</div>
</body>


</html>

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 62.5%;
}
div {
    height: 100vh;
    background-color: rgb(239,249,244);
}
header {
    background-color: rgb(95,192,205);
    height: 7vh;
    position: relative;
}

header a{
    font-size: 2.5vh;
    color: white;
    position: absolute;
    text-decoration: none;
    top :50%;
    transform: translate(-50%,-50%);
}
.login {
    left: 50%;
}
.signIn {
   right: 1vh;
}
.signOn {
    left: 5vh;
}
input {
    height: 5vh;
    width: 100%;
    border: 2px solid white;
    margin-top: 1vh;
    padding-left: 70px;
    vertical-align: top;
    display: inline-block;
    margin-left: 20%;



}
.iphone{
    height: 5vh;
    width: 20%;
    margin-top: 1vh;
    display: inline-block;
    vertical-align: top;
    background-color:white ;
    position: absolute;
    border: 2px solid;
    border-color: white rgb(239,249,244) white white;
}
img {
    height: 3vh;
    float: left;
    vertical-align: top;
    position: absolute;

    top :50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

button {
    color: white;
    width: 100%;
    height: 7vh;
    background-color:rgb(95,192,205) ;
    border: 0;
    margin-top: 5vh;
}
div a {
    float: right;
    text-decoration: none;
    color: rgb(95,192,205);
    font-size: 2.5vh;
    margin-right: 2vh;
    margin-top: 1vh;
}